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>
<a href="#"><font size="5" color="white">手机数码
</font></a>
<a href="#"><font size="5" color="white">电脑办公
</font></a>
<a href="#"><font size="5" color="white">化妆品
</font></a>
<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"> 用户名: <input type="text" name="username" placeholder="请输入用户名"></td>
</tr>
<tr>
<td colspan="2">密码: <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: <input type="email" name="email" placeholder="Email"></td><br />
</tr>
<tr>
<td colspan="2">姓名: <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">出生日期: <input type="text" name="birthdate" placeholder="请输入出生日期"></td>
</tr>
<tr>
<td colspan="2">验证码: <input type="text" name="yanzhengma" placeholder="请输入出生日期">
<img src="课堂演示图片汇总/yanzhengma.png"><img />
</td>
</tr>
<tr>
<td colspan="2" >
<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="#">
关于我们
</a></font>
<font><a href="#">联系我们 </a></font>
<font><a href="#">招贤纳士 </a></font>
<font><a href="#">法律声明 </a></font>
<font><a href="#">友情链接 </a></font>
<font><a href="#">支付方式 </a></font>
<font><a href="#">配送方式 </a></font>
<font><a href="#">服务声明 </a></font>
<font><a href="#">广告声明</a></font></td>
</tr>
</table>
</body>
</html>