HTML表单 和 表单域
一、什么是表单？收集用户信息的一个容器，相当于点餐时的菜单...表单中包含表单域（文本框、密码框、按钮 都属于表单域）定义表单的语法：表单域常用的属性1.action用来处理请求的页面或程序（通常是JSP页面或Servlet 相当于厨师）点击提交按钮以后，请求提交到handleForm.html页面来处理2.method默认是get提交
一、什么是表单？
收集用户信息的一个容器，相当于点餐时的菜单...
表单中包含表单域（文本框、密码框、按钮 都属于表单域）
定义表单的语法：
<form>
表单域
</form>
常用的属性
1.action
用来处理请求的页面或程序（通常是JSP页面或Servlet 相当于厨师）
点击提交按钮以后，请求提交到handleForm.html页面来处理
<form action = "handleForm.html">
</form>
2.method
默认是get提交
<form action = "handleForm.html" method="post">
</form>
提交方式
常见的提交方式有两种
（1）get请求
（2）post请求
get和post的区别：
区别1：get请求的参数会暴露在浏览器的地址栏中，不安全，post请求的参数不会显示在地址栏中，相对安全。
例：地址栏中显示 www.handleForm.html?username=aaa&password=123
get 纸质菜单
post 点餐机
区别2：get请求的参数长度有限制（通常和浏览器相关）
post请求的参数理论上长度无限制
二、表单域
需求：实现用户登录页面
1）文本框
<input type ="text" name="username" value="username" />
type 表示表单域的类型，默认值是text表示文本框
name 给表单域起一个名字，取对应的表单域中的内容
value 真正传递到服务器的值
属性maxlength="6"表示最多输入6个字符，中英文都是6个
属性size=“30”可以改变文本框的大小，但是尽量不要这样写，通过javascript控制文本框的大小
2）密码框
<input type="password" name="password" value="pasword"/>
3)按钮
①提交按钮，submit，点击提交按钮，会提交请求
<input type="submit" value="登录"/>
②重置按钮，reset，点击重置按钮，会把表单域中的值恢复到默认状态
<input type="reset" value="重置"/>
③图片按钮，image，功能类似于提交按钮，点击图片按钮以后 也会提交表单
<input type="image" src="images/ceo.jpg"/>
④普通按钮，不能提交表单，可以绑定事件
<input type="button" value="普通按钮" οnclick="alert('你好')"/>
不推荐直接在按钮代码上，直接绑定事件，不符合W3C规范
W3C规范：内容、表现、行为三者分离
内容、表现、行为三者分离，如果三者没有分离，代码糅杂在一起，比较乱，不好维护
为了体现代码的可维护
（1）内容
html标签和文字
（2）表现
CSS样式
（3）行为
JavaScript代码控制的
4）隐藏域
隐藏域 name是服务器端用来取值的标识名，value表示传递的内容
<input type="hidden" name="safeCode" value="12345"/>
例：银行卡提交时的安全码，不该让客户看到
5）单选框 radio
<form action="a.jsp" method ="post">
<!--选项写在同一组下，否则没有单选，变成了两个单选框-->
性别：男<input type="radio" name="sex" value="male" />
女<input type="radio" name="sex" value="female"checked="checked"/>
</form>
checked="checked"表示默认选中，如果有多个选项被赋值该属性，那么同组中只有最后一个被默认选中。
6）复选框 checkbox
<form action="a.jsp" method ="post">
<!--可以选多个默认选中-->
爱好：足球<input type="checkbox" name="hobby" value="football" checked="checked"/>
篮球<input type="checkbox" name="hobby" value="basketball"/>
羽毛球<input type="checkbox" name="hobby" value="badminton" checked="checked"/>
</form>
可以选择多个值默认选中
7)下拉列表框 <select><option></option></select>
<form action="a.jsp" method ="post">
<!--mutiple：如果想让下拉列表框可以通过ctrl+左键多选，可以设置multiple属性的属性值为multiple来实现。设置了该属性的下拉列表框，可以设置其多个option选项为默认被选中的。-->
现居住城市：
<select name="city" size="2" multiple="mutiple">
<option value="beijing">北京</option>
<option value="tianjin" selected="selected">天津</option>
<option value="shanghai" selected="selected">上海</option>
<option value="guangzhou">广州</option>
<option value="other">其它</option>
</select>
</form>
size="2"表示一次性显示两个
style="vertical-align:top;"可以改变字体位置、对齐方式。
style="属性1：值1；属性2，值2.。。。"
8）多行文本域 textarea
col=""控制列数，row=""控制行数，readonly="readonly"设置为只读，不可编辑
①<form action="a.jsp" method ="post">
文本域：<textarea name="content" id="2" cols="30" rows="10" style="vertical-align:top" readonly="readonly">
</textarea>
</form>
②<form action="handlerForm.jsp" method="post">
<h2>用户协议</h2>
<textarea name="content" rows="8" cols="60" readonly="readonly">
欢迎阅读XX电子商城用户协议，请仔细阅读如下内容：
...
</textarea><br/><br/>
同意以上协议<input type="checkbox" name="agree"/>
<!-- 设置按钮的disabled属性为disabled可以使按钮不可用-->
<input type="submit" value="注册" disabled="disabled"/>
</form>
9）文件域 file
<form action="a.jsp" method ="post">
请选择上传的照片：<input type="file" name="photo"/>
</form>
附：演示用户注册
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> | |
| <html> | |
| <head> | |
| <title>演示用户注册</title> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"> | |
| </head> | |
| <body> | |
| <fieldset style="width:700px;"> | |
| <legend>用户注册</legend> | |
| <form action="#" method="post"> | |
| <label for="username">用户名</label><input type="text" name="username" id="username"/><br/> | |
| 密码<input type="password" name="password1"/><br/> | |
| 确认密码<input type="password" name="password2"/><br/> | |
| 性别: | |
| 男<input type="radio" name="sex" value="male" checked="checked"/> | |
| 女<input type="radio" name="sex" value="female"/><br/> | |
| 婚姻状态: | |
| 未婚<input type="radio" name="marryState" value="single" checked="checked"/> | |
| 已婚<input type="radio" name="marryState" value="married"/> | |
| 离异<input type="radio" name="marryState" value="divorce"/><br/> | |
| 请选择您的爱好: | |
| 足球:<input type="checkbox" name="hobby" value="football" checked="checked"/> | |
| 篮球:<input type="checkbox" name="hobby" value="basketball" checked="checked"/> | |
| 羽毛球:<input type="checkbox" name="hobby" value="badminton"/><br/> | |
| 请选择您所在城市 | |
| <select name="city" multiple="multiple" size="3" style="vertical-align:top;"> | |
| <option value="beijing">北京</option> | |
| <option value="shanghai">上海</option> | |
| <option value="guangzhou">广州</option> | |
| <option value="shenzhen">深圳</option> | |
| <option value="jinan">济南</option> | |
| </select><br/> | |
| 用户协议<textarea rows="8" cols="80" style="vertical-align:top;" readonly="readonly"> | |
| XXXX电子商城用户协议,请仔细阅读.... | |
| </textarea><br/> | |
| 同意该协议 | |
| <input type="checkbox" name="agree"/><br/> | |
| 请选择需要上传的照片<input type="file" name="photo"/> | |
| <input type="button" value="注册" disabled="disabled"/> | |
| <!-- 九.隐藏域 --> | |
| <input type="hidden" name="safeCode" value="12345"/> | |
| </form> | |
| </fieldset> | |
| </body> | |
| </html> | |
表单域组标签：
<form action="" method="post">
<!-- 表单域组-->
<fieldset>
<legend>用户注册</legend>
<label for="username">用户名</label><input type="text" id="username" name="username" /><br/>
</fieldset>
</form>
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
8
0- 0
已为社区贡献1条内容
所有评论(0)