input表单的type属性详解，不一样type不一样属性之间区别

目标：详解表单input标签type属性经常使用的属性值

1、input标签和它的type属性 
PS：input 元素能够用来生成一个供用户输入数据的简单文本框。 在默认的状况下， 什么样的数据都可以输入。而经过不一样的type属性值，能够限制输入的内容。

2、总结 
一、text 一个单行文本框，默认属性值 
二、password 隐藏字符的密码框 
三、search 搜索框，在某些浏览器中输入内容会出现叉形标记 
四、submit、reset、button 依次是：提交按钮、重置按钮、普通按钮 
五、number、range 依次是：只能输入数值的框、只能输入在一个指定范围的数值框 
六、checkbox、radio 依次是：复选框，一组复选框(name属性值相同)用户能够勾选多个、单选按钮，一组单选按钮(name属性值相同)用户只能够选中一个 
七、image、color 依次是：图片按钮、颜色代码按钮 
八、email、tel、url 依次是：检测电子邮件、号码、网址的文本框 
九、hidden 生成一个隐藏控件 
十、file 生成一个上传控件 
十一、获取各类日期、时间 data、month、time、week、datetime、datatime-local

3、详解 
一、type=”text” 
1.1)、list 指定为文本框提供建议值的 datalist 元素，其值为datalist 元素的 id 值 
1.2)、maxlength 设置文本最大字符长度 
1.3)、pattern 用于输入验证的正则表达式 
1.4)、placeholder 输入提示的文本，当用户输入内容时会自动消失 
1.5)、readonly 文本框处于只读状态 
1.6)、disabled 文本框处于禁用状态 
1.7)、size 设置文本框宽度 
1.8)、value 设置文本框初始值，会显示在文本框中，显示时优先级比placeholder高，表单提交时优先提交用户输入的内容，若是用户没有输入则提交默认的值 
1.9)、required 表示用户必须输入一个值，不然没法经过输入验证

二、type=”password”，和type=”text”时所拥的额外属性基本一致，少了一个list属性

三、type=”search” ， 和type=”text”全部用的额外属性值一致

四、当type为submit、reset、button，提交表单、重置表单、普通按钮 
4.1)、若是是 submit 时，还提供了和元素同样的额外属性：formaction、formenctype、formmethod、formtarget 和 formnovalidate。

五、当type为number、range时 
5.1)、type=”number” 只能输入数字的文本框 
5.2)、type=”range” 生成一个经过拖拽调节大小的调节器 
额外属性： 
5.3)、min 设置可接受的最小值 
5.4)、max 设定可接受的最大值 
5.5)、value 指定初始值 
5.6)、step 指定上下调节值的步长 
5.7)、required 代表用户必须输入一个值，不然没法经过输入验证 
5.8)、readonly 设置文本框内容只读

六、当type为checkbox、radio 
6.1)、无论type等于checkbox仍是radio，都必须有属性name和value 
6.2)、他们还有可选属性checked、required 
PS：复选框和单选按钮都是以一组一组的形式存在，name值相同的即为一组，一组复选框能够同时选中几个，而一组单选按钮同时只能选中一个

<section>
  <label for="c">C</label> <input type="checkbox" id="c" name="hobby" value="c"/> <label for="python">python</label> <input type="checkbox" id="python" name="hobby" value="python"/> <label for="java">java</label> <input type="checkbox" id="java" name="hobby" value="java"/> </section> <section> <label for="apple">apple</label> <input type="checkbox" id="apple" name="eat" value="apple"/> <label for="orange">orange</label> <input type="checkbox" id="orange" name="eat" value="orange"/> <label for="pear">pear</label> <input type="checkbox" id="pear" name="eat" value="pear"/> </section>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

提交时数据格式：hobby=c&hobby=python&eat=orange&eat=pear

• 1
• 2

<section> <label for="man">男</label> <input type="radio" id="man" name="sex" value="man"/> <label for="men">女</label> <input type="radio" id="men" name="sex" value="men"/> </section>

• 1
• 2
• 3
• 4

提交时数据格式：sex=man

• 1
• 2

七、当type为image、color 
7.1)、当type=”image”时，功能上和type=”submit”同样，前者是用图片做为按钮，固然后者也能够达到一样的效果 
额外属性： 
7.2)、src 指定要显示图像的 URL 
7.3)、alt 提供图片的文字说明，当图片找不到时显示该文字 
7.4)、width 图像的长度，注意这是标签属性，而不是样式属性 
7.5)、height 图片的高度，注意事项如上 
7.6)、提交时的额外属性 formaction、formenctype、formmethod、formtarget和 formnovalidate。

八、当type为email、tel、url 
8.1)、email 为电子邮件格式 
8.2)、tel 为电话格式 
8.3)、url 为网址格式 
8.4)、额外属性和 text一致。但对于这几种类型，浏览器支持是不一样的。email 支持比较好，如今浏览器都支持格式验证；tel 基本不支持；url 支持通常，部分浏览器只要检测到 http://就能经过。

九、type=”hidden” 
9.1)、生成一个隐藏控件，通常用于表单提交时关联主键 ID 提交，而这个数据做为隐藏存在

十、type=”file” 
10.1)、生成一个文件上传控件，用于文件的上传。 
额外属性： 
10.2)、required 代表用户必须提供一个值，不然没法经过验证 
10.3)、accept 指定接收的MIME类型　例如：accept=”image/gif, image/jpeg, image/png” 

《1》上传.csv格式的

<input text="file" accept=".csv" />

《2》上传.xls格式

<input text="file"  accept="application/vnd.ms-excel"/>

《3》上传.xslx格式

<input text="fiel" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/>

《4》上传.png/.jpg/etc格式

<input type="file" accept="text/plain" />

《5》上传图片格式

<input type="file" accept="image/*" />

《6》上传.htm,.html格式

<input type="file" accept="text/html" />

《7》上传video(.avi, .mpg, .mpeg, .mp4)格式

<input type="file" accept="video/*" />

《8》上传audio(.mp3, .wav, etc)格式

<input type="file" accept="audio/*" />

《9》上传.pdf格式

<input type="file" accept=".pdf" />

《10》若是限制两种文件格式，同时限制

<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel">

 

ＰＳ：当须要上传文件时，form标签的enctype属性必须设置为multipart/form-data

十一、当type为data、month、time、week、datetime、datatime-local，由于各类缘由仍是用jquery等前端库写吧！！！