JavaWeb——HTML表单&CSS

最新推荐文章于 2023-08-30 16:34:28 发布

xubuhui

最新推荐文章于 2023-08-30 16:34:28 发布

阅读量481

点赞数

分类专栏： java JavaWeb

本文链接：https://blog.csdn.net/xubuhui/article/details/90814454

版权

java 同时被 2 个专栏收录

27 篇文章 1 订阅

订阅专栏

JavaWeb

14 篇文章 0 订阅

订阅专栏

1.1 表单标签
表单标签：所有需要提交到服务器端的表单项必须使用<form></form>括起来！
form 标签属性：
action,整个表单提交的位置(可以是一个页面，也可以是一个后台 java 代码)
method,表单提交的方式(get/post/delete……等 7 种)

文本输入项

<input  type=”text”  name=””  size=””  maxlenght=””  readonly=””
placehoder=””/>

密码输入项

<input type=”password” name=”” />

单选按钮

<input type=”radio” name=”” value=”” checked=””/>

多选按钮

<input type=”checkbox” name=”” value=”” checked=”” />

下拉列表

<select name=””>
<option value=”” selected=””>北京</option>
<option>上海</option>
</select>

文件上传项

<input type=”file” name=””/>

文本输入域

<textarea name=””></textarea>

提交按钮

<input type=”submit” value=””/>

普通按钮

<input type=”button” value=””/>

重置按钮

<input type=”reset” value=””/>

隐藏项

<input type=”hidden” name=””/>
用于用户比较敏感的一些信息。

面试题：
Get 与 post 提交方式的区别？【默认提交方式为 get】
Get 提交方式，所有的内容显示在地址栏，不够安全，长度有限制。
Post 提交方式，所有的内容不会显示在地址栏，比较安全，长度没有限制。

案例分析
实现以下效果
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册页面</title>
	</head>
	<body>
		<!--三行一列的表格-->
		<table border="1px" width="1300px" align="center" cellspacing="0px" cellpadding="0px">
			<tr>
				<td>
					<table width="100%" align="center" border="1px">
						<tr>
							<td><img src="课堂演示图片汇总/logo2.png"</td>
							<td><img src="课堂演示图片汇总/header.png"</td>
							<td><a href="#">登录</a>
								<a href="#">注册</a>
								<a href="#">购物车</a></td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td bgcolor="black">
					
					<a href="#"><font size="5" color="white">首页</font></a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#"><font size="5" color="white">手机数码
						</font></a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#"><font size="5" color="white">电脑办公
						</font></a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#"><font size="5" color="white">化妆品
						</font></a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#"><font size="5" color="white">运动户外
						</font></a>
				</td>
			</tr>
			<!--注册表单-->
			<tr>
				<!--嵌入一个十行三列的表格-->
				<td background="课堂演示图片汇总/regist_bg.jpg">
					<form action="#" method="get" name="reform">
					<table border="1px" width="750px" align="center" height="360px" cellspacing="0px" cellpadding="0px">
						<tr>
							<td colspan="2"><font size="5">会员注册：</font><font size="3">USER REGISTER</font></td>
						</tr>
						<tr>
							<td colspan="2"> 用户名：&nbsp;&nbsp;&nbsp;<input type="text" name="username" placeholder="请输入用户名"></td>
						</tr>
						<tr>
							<td colspan="2">密码：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="password" name="password" required="required" placeholder="请输入密码"/></td><br />
						</tr>
						<tr>
							<td colspan="2">确认密码：<input type="password" name="repassword"  placeholder="请输入密码" /></td><br />
						</tr>
						<tr>
							<td colspan="2">Email:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="email" name="email" placeholder="Email"></td><br />
						</tr>
						<tr>
							<td colspan="2">姓名：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="name" placeholder="请输入姓名"</td>
						</tr>
						<tr>
							<td colspan="2">性别：<input type="radio" name="sex" value="男">男
									<input type="radio"name="sex" value="女" checked="checked">女</td><br />
						</tr>
						<tr>
							<td colspan="2">出生日期:&nbsp;&nbsp;&nbsp;<input type="text" name="birthdate" placeholder="请输入出生日期"></td>
						</tr>
						<tr>
							<td colspan="2">验证码：&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="yanzhengma" placeholder="请输入出生日期">
								<img src="课堂演示图片汇总/yanzhengma.png"><img />
							</td>
							
						</tr>
						<tr>
							<td colspan="2" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								&nbsp;&nbsp;&nbsp;<input type="submit" value="注册"  /><br /></td>
						</tr>
					</table>
					</form>
				</td>
			</tr>
			<tr>
				<td><img src="课堂演示图片汇总/footer.jpg" width="100% " height="100%"></img></td>
			</tr>
			<tr>
				<td align="center"><font><a href="#">
					关于我们&nbsp;
				</a></font>
				<font><a href="#">联系我们&nbsp;</a></font>
				<font><a href="#">招贤纳士&nbsp;</a></font>
				<font><a href="#">法律声明&nbsp;</a></font>
				<font><a href="#">友情链接&nbsp;</a></font>
				<font><a href="#">支付方式&nbsp;</a></font>
				<font><a href="#">配送方式 &nbsp;</a></font>
				<font><a href="#">服务声明&nbsp;</a></font>
				<font><a href="#">广告声明</a></font></td>
			</tr>
		</table>
	</body>
</html>

xubuhui

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb——HTML表单&CSS

1.1 表单标签表单标签：所有需要提交到服务器端的表单项必须使用<form></form>括起来！form 标签属性：action,整个表单提交的位置(可以是一个页面，也可以是一个后台 java 代码)method,表单提交的方式(get/post/delete……等 7 种)文本输入项<input type=”text” name=”” size...
复制链接

扫一扫