HTML表单基础和HTML5表单API

1、HTML表单基础

HTML表单用于收集用户输入或选择的数据，且将数据作为参数提交给服务器处理。

1.1 表单标签< form >

定义表单框架，本身无可视化效果，可与文本输入框、密码框、按钮等表单组件形成完整的表单效果。 表1 < form >的相关属性

属性名	属性值	说明
action	url地址	规定提交数据的服务器地址
method	get或post	规定发送数据的HTTP方式，默认为get
name	自定义表单名	规定表单名称，具有唯一性
enctype	application/x-www-form-urlencoded（默认值） multipart/form-data; text/plain	规定数据发送前的编码要求
target	_blank _self _parent _top iframename	规定以什么方式打开action属性中url地址

注：（1）与post相比较，get将表单的数据名称和值转换为文本形式的参数直接加到原url地址后面，不安全，且传输大小较小，不超过2KB。
（2）application/x-www-form-urlencoded：处理表单控件中所有的value属性值；multipart/form-data：用于使用表单上传文件时；text/plain：用于通过表单发送邮件（表单的action属性值为mailto:URL）。

1.2 标记标签< label >

< label >可以在被点击时为对应的表单控件生成焦点，显示效果与普通文本一致。

<!-- <label>的首标签中使用for属性引用对应表单控件的id名称 -->
<!-- 法一 --> 
<label for="user">用户名：</label>
<input type="text" name="user1" id="user1" />
<!-- 法二 --> 
<label>用户名：<input type="text" name="user1" /></label>

1.3 输入标签< input >

根据type不同的属性值可显示多种表单元素样式：单行文本输入框、单选/复选按钮、密码框，id或name属性用于自定义名称。

表2 < input >的type属性值

属性值	说明
text	显示单行文本输入框
password	显示密码输入框（*）
radio	显示单选按钮
checkbox	显示复选按钮
submit	显示提交按钮
reset	显示重置按钮
button	显示无动作按钮，可添加onclick事件，结合Javascript使用
image	显示图像形式的提交按钮
file	显示文件上传控件，包括输入区域和浏览按钮
hidden	隐藏输入字段

<!--添加value可以设置初始文本内容-->
<input type="text" name="username" value="请输入..." />
<!--radio和checkbox类型可使用checked属性设置默认选中的选项-->
<input type="radio" name="ball" value="badminton" checked /> 羽毛球
<input type="radio" name="ball" value="baseball" /> 棒球
<!--image类型的alt属性定义图片无法显示时的替代文本内容-->
<input type="image" src="../images/bird.png" alt="小鸟" />
<!--file类型可添加accpet属性用于筛选上传文件的MIME类型，*表示允许上传所有类型的文件，也可以采用特定的gif或mp4等格式-->
<input type="file" accpet="../images/*" />

注：hidden隐藏域用于确认用户身份，如sessionkey。所有浏览器均支持，不管浏览器是否禁用cookies或脚本。

1.4 列表标签< select >

用于创建单选或多选菜单，根据不同属性值可显示为下拉菜单或列表框。

表3 < select >属性

属性名	属性值	说明
disabled	disabled	禁用列表菜单
multiple	multiple	允许同时选中多项，即显示样式由默认的下拉菜单变为列表框
name	自定义	列表元素名称
size	数值	列表菜单可见选项的个数

< select >可配合若干个< option >标签形成下拉菜单。

表4 < option >属性

属性名	属性值	说明
disabled	disabled	首次加载禁用当前选项
label	文本内容	取代原选项内容显示在列表中
value	文本内容	提交表单发送给服务器的选项值
selected	selected	首次加载当前选项为选中状态

<!-- 默认选中第一个选项，可为&