玩转HTML5表单应用：轻松探索与实践
一、表单的作用
表单的作用是搜集用户的输入，用户提交表单时向服务器传输数据，从而实现用户与web服务器的交互。
二、表单属性
这个表单展示了form表单常用的属性
| 属性名 | 属性值 | 描述 |
|---|---|---|
| action | 一个url地址 | 指定表单提交到的地址 |
| method | GET , POST | 表单将以此种方法提交到服务器 |
| target | * _self 当前页面 * _blank 每次在新窗口打开 * blank 每次在同一个新窗口打开 * _parent 父级frame * _top *frame * iframename 指定的iframe | 表单提交后，收到回复的页面 |
| name | - | 一个html文档中，每个form的name应该是唯一的 |
| enctype | * application/x-www-form-urlencoded 默认值 * multipart/form-data 上传file用 * text/plain html5默认 | 以 POST 方式提交form时的MIME类型。文件上传必须使用 multipart/form-data |
| autocomplete | on , off | 是否自动完成表单字段 |
| autocapitalize | * none 完全禁用自动首字母大写 * sentences 自动对每句话首字母大写 * words 自动对每个单词首字母大写 * characters 自动大写所有的字母 | iOS 专用属性，表单中文本域英文大小写 |
| accept-charset | 字符编码格式( utf-8 , gb-2312 等) | 将会以此种编码格式提交表单到服务器，默认值是UNKONWN，即html文档所采用的编码格式。 |
| novalidate | true , false | 是否启用表单校验 |
下面举例的表单将会以 post 方式将input的值以 utf-8 编码格式提交到 /login 接口，并会打开一个新页面显示返回结果，由于 target="blank" ，所以就算提交多次该表单，都只会继续刷新之前打开的窗口。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<form action="/login" method="post" target="blank" >
<input type="text" name='username'>
<button>提交</button>
</form>
</body>
</html>
三、表单元素
1. 常见表单元素
常见的表单元素包括 input , select , textarea , button , progress 等，这些元素都有一些自己的属性
2. 表单元素的属性
| 属性 | 属性值 | 描述 |
|---|---|---|
| type（必须） | * text 单行文本框 * raido 单选框 * checkbox 多选框 * tel 电话号码输入框 * range 滑块取值框 ... ... 更多 | 指定input标签展示的样式，忽略type属性将默认使用 text |
| name（必须） | 字符串 | form提交时，该字段的key，忽略value属性的元素将不会被提交 |
| checked（状态） | 任意值 或 忽略该属性 | 有此属性的radio和checkbox元素将被选中，同一name多个元素具有此属性的，提交时取最后一个值 |
| selected（状态） | 任意值 或 忽略该属性 | 有此属性的option元素将被选中，同一name多个元素具有此属性的，提交时取最后一 |
| readonly（状态） | 任意值 或 忽略该属性 | 具有该属性的表单元素将不可输入或改变状态，除非用JavaScript操作 |
| disabled（状态） | 任意值 或 忽略该属性 | 除拥有readonly的特征外，表单提交时，将忽略此字段 |
| form（限制） | 表单id | 该元素将作为指定id表单字段被提交。用于 button 或 input type='submit' 元素时，将提交指定id的表单 |
| accept（限制） | * image/* 只能上传图片 * video/* 只能上传视频 | input type='file' 使用的属性，是一个MIME类型的值，或文件后缀名 |
| multiple（限制） | 任意值 或 忽略该属性 | input type='file' 或 select 或 应用了 datalist 的表单元素才能应用该属性 |
| maxlength（限制） | 正整数或0 | 文本域可输入字符的长度，浮点数将会向下取整，负数将被忽略，JavaScript可以绕过这一限制 |
| required（限制） | 任意值 或 忽略该属性 | 该表单字段是否需要被验证 |
| pattern | 一个正则表达式 | \d{4,6} 形式的正则表达式，作为required校验规则 |
| autocomplete（限制） | on , off | 同form的autocomplete属性，在表单元素上应用，优先级将高于form上指定的 |
| autofocus（限制） | 任意值 或 忽略该属性 | 页面加载时，该元素自动聚焦，应用于多个表单元素时，聚焦到第一个 |
| placeholder（展示） | 字符串 | 在元素没有value时，用于占位显示 |
| value（展示） | 字符串 或 数值 | input 或 progress 展示的值,其中： * checkbox和radio的默认值是 'on' * range和progress的默认值是 0 * progress的是0的时候会播放循环动画 |
3.表单元素用法
- form示例
点击预览按钮，将会把 username1 的值提交到 /preview，
点击发布按钮，将会把 username 的值提交给 /publish
<form action="/preview" name='preview' id='preview'></form>
<form action="/publish" name='publish' id='publish'>
<input type="text" name='username' value='1'>
<input type="text" form='preview' name='username1' value='2'>
<button form='preview'>预览</button>
<button>发布</button>
</form>
- accept示例
<input type="file" accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
- multiple示例
datalist 需要键入 ',' 方可多选(需浏览器支持)
<label>Cc: <input type=email multiple name=cc list=contacts></label>
<datalist id="contacts">
<option value="hedral@damowmow.com">
<option value="pillar@example.com">
<option value="astrophy@cute.example">
<option value="astronomy@science.example.org">
</datalist>
select 需要一直按下ctrl键才可多选
<select name='number' multiple>
<option value="CN">中国</option>
<option value="US">美国</option>
<option value="UK">英国</option>
</select>
input 直接框选多文件即可
<input type="file" multiple>
- value示例
<progress value='70' max='100'></progress>
<input type="range" value='40' max='100'>
<input type="text" value='hello world'>
- type示例
文本框
<input type = “text” name=“名称”/>//单行文本
<textarea cols="30" rows="10"></textarea>//多行文本
密码框
<input type=“password” name=“名称”/>
单选框
<input type=“radio” name=“gender” value=“male”/>
<input type=“radio” name=“gender” value=“female”/>
复选框
<input type =“checkbox” name=“language” value=“Java”/>
<input type =“checkbox” name=“language” value=“C”/>
<input type =“checkbox” name=“language” value=“C#”/>
隐藏域
隐藏域通常用于向服务器提交不需要显示给用户的信息
<input type=“hidden” name=“隐藏域”/>
文件上传
使用file，则form的enctype必须设置为multipart/form-data，method属性为POST。
<input name="uploadedFile" id="uploadedFile" type="file" size="60" accept="text/*"/>
下拉列表
selected默认为选择项
<select name="country" size="10">
<option value="gam">Gambia</option>
<option value="mad" selected>Madagascar</option>
<option value="nam">Namibia</option>
</select>
<label></label>标签
在<input type=“text”>前可以写普通的文本来修饰，但是单击修饰文本的时候input并不会得到焦点，而用label则可以，for属性指定要修饰的控件的id，<label for=“txt1” >内容</label>；
提交按钮
<input type="submit" value="提交"/>
重置按钮
<input type=“reset” value=“重置按钮"/>
普通按钮
<input type="button" value="普通按钮"/>
图像按钮
图像按钮的src属性指定图像源文件，它没有value属性。图像按钮可代替<input type="submit"/>，而现在也可以通过css直接将<input type="submit"/>按钮的外观设置为一幅图片。
<input type="image" src="bg.jpg" />
- 常识
没有 name 和有 disable 的字段不会被提交
同一个表单中，相同name的字段值会发生覆盖，radio 和 checkbox 除外
在低版本浏览器中，name可以作为id使用
忽略或使用浏览器不支持的 type 会转为 type=text
低版本浏览器不支持动态改变 type
点击 button 会默认提交表单
低版本浏览器需要指定 button 的 type=submit 才会提交表单
文本域的光标颜色由字体颜色决定
form表单不能互相嵌套
表单元素可以不在表单的html结构内
参考：https://segmentfault.com/a/1190000005803696
上一篇： 在Java中实现表单数据的提交操作