input 标签详解

什么是input？

标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式，输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

那么input有哪些type值？

1. 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*： 表示用户必须输入一个值，否则无法通过输入验证。（必填项）

2. type="password"：
   输入时隐藏输入内容，和type=”text”时所拥的额外属性基本一致，少了一个list属性。

3. type="search" ：
   和type="text"所有用的额外属性值一致。

4. ** type="submit"、type="reset"、type="button"**:
   　分别为：提交表单、重置表单、普通按钮。当type=submit时，还提供了和元素一样的额外属性：formaction、formenctype、formmethod、formtarget 和 formnovalidate。

5. type＝”number“、type＝”range“：
   5.1. type=”number” 只能输入数字的文本框。
   5.2. type=”range” 生成一个通过拖拽调节大小的调节器。
   额外属性：
   ** min：设置可接受的最小值。
   max ：设定可接受的最大值。
   value： 指定初始值。
   step： 指定上下调节值的步长。
   required ：表明用户必须输入一个值，否则无法通过输入验证。
   ** readonly ：设置文本框内容只读。

6. ** type="checkbox"、type="radio"**:
   当type等于checkbox或radio，都必须有属性name和value的值，还有可选属性checked、required。
   PS：复选框和单选按钮都是以一组一组的形式存在，name值相同的即为一组，一组复选框可以同时选中几个，而一组单选按钮同时只能选中一个。

7. type="image"、type="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。

8. type为email、tel、url ：
   8.1. email“ 为电子邮件格式 。
   8.2. tel：为电话格式。
   8.3. url： 为网址格式。
   额外属性和 text一致。但对于这几种类型，浏览器支持是不同的。email 支持比较好，现在浏览器都支持格式验证；tel 基本不支持；url 支持一般，部分浏览器只要检测到** http://**就能通过。

9. type=”hidden”：
   生成一个隐藏控件，一般用于表单提交时关联主键 ID 提交，而这个数据作为隐藏存在。

10. type=”file”：
    生成一个文件上传控件，用于文件的上传。
    额外属性：
    required：表明用户必须提供一个值，否则无法通过验证
    accept：指定接收的MIME类型，例如：accept=”image/gif, image/jpeg, image/png”
    PS：当需要上传文件时，form标签的enctype属性必须设置为multipart/form-data。

当type为data、month、time、week、datetime、datatime-local，因为各种原因还是用jQuery等前端库写吧！！！