做为html中最为常见，应用最广泛的标签之一，form常伴随前端左右。了解更深，用的更顺。
表单属性
这个表单展示了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>表单元素
常见的表单元素包括 input , select , textarea , button , progress 等，这些元素都有一些自己的属性
| 属性名 | 属性值 | 描述 |
|---|---|---|
| 必须 | ||
| 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的时候会播放循环动画 示例代码 |
注意：以下示例部分来自 w3.org
点击预览按钮，将会把 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>
<input type="file" accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">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><progress value='70' max='100'></progress>
<input type="range" value='40' max='100'>
<input type="text" value='hello world'>常识
下面是对于上面表格的一些总结，也加入了一些新的知识点
没有
name和有disable的字段不会被提交同一个表单中，相同name的字段值会发生覆盖，
radio和checkbox除外在低版本浏览器中，name可以作为id使用
忽略或使用浏览器不支持的
type会转为type=text低版本浏览器不支持动态改变
type点击
button会默认提交表单低版本浏览器需要指定
button的type=submit才会提交表单文本域的光标颜色由字体颜色决定
form表单不能互相嵌套
表单元素可以不在表单的html结构内 示例代码
在表单最后一个input元素中敲回车，会触发表单提交
模拟外观
有一千种浏览器，就有一千种表单元素外观。在以前，要想改变表单元素外观，需要通过其他标签来模拟。
而在现代浏览器上，通过css3的appearance属性( 兼容情况 )指定元素的渲染风格，再结合:after,:before伪元素，可以做出很酷炫的表单元素外观。
作为可替换元素，input标签无法使用伪元素。当然这只是W3标准。以下点到名的表单元素，还是可以照常使用:after,:before的: input type='radio' , input type='checkbox' , input type='file' , input type='range' , button , progress。
appearance是css3的标准属性，面对现实，很多时候还是需要加上-webkit- ，-moz- 前缀，举一个把checkbox做成开关的例子：不出意外，长成这样 
<style>
input[type='checkbox'] {
-webkit-appearance: none;
padding: 9px;
border-radius: 50px;
display: inline-block;
position: relative;
outline: 0;
-webkit-transition: all 0.1s ease-in;
transition: all 0.1s ease-in;
width: 70px;
height: 33px;
}
input[type='checkbox']:before,
input[type='checkbox']:after {
position: absolute;
content: '';
border-radius: 100px;
-webkit-transition: all 0.1s ease-in;
transition: all 0.1s ease-in;
}
input[type='checkbox']:before {
background: white;
top: 1px;
left: 1px;
z-index: 2;
width: 31px;
height: 31px;
box-shadow: 0 3px 1px rgba(0, 0, 0, 0.05), 0 0px 1px rgba(0, 0, 0, 0.3);
}
input[type='checkbox']:after {
content: 'OFF';
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 0 0 #eee, 0 0 1px rgba(0, 0, 0, 0.4);
line-height: 34px;
font-size: 14px;
background: #eee;
color: #ccc;
text-indent: 35px;
box-sizing: border-box;
box-shadow: 0 0 1px #eee;
}
input[type='checkbox']:checked:before {
left: 37px;
}
input[type='checkbox']:checked:after {
content: 'ON';
color: #fff;
text-indent: 10px;
background: #4cda60;
}
</style>
<input type="checkbox">示例代码来自10个HTML5美化版复选框和单选框
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。