什么是input？
<input> 标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式，输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
那么input有哪些type值？
-
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"、type="reset"、type="button"**:
分别为：提交表单、重置表单、普通按钮。当type=submit时，还提供了和元素一样的额外属性：formaction、formenctype、formmethod、formtarget 和 formnovalidate。 -
type＝”number“、type＝”range“：
5.1. type=”number” 只能输入数字的文本框。
5.2. type=”range” 生成一个通过拖拽调节大小的调节器。
额外属性：
** min：设置可接受的最小值。
max ：设定可接受的最大值。
value： 指定初始值。
step： 指定上下调节值的步长。
required ：表明用户必须输入一个值，否则无法通过输入验证。
** readonly ：设置文本框内容只读。 -
** type="checkbox"、type="radio"**:
当type等于checkbox或radio，都必须有属性name和value的值，还有可选属性checked、required。
PS：复选框和单选按钮都是以一组一组的形式存在，name值相同的即为一组，一组复选框可以同时选中几个，而一组单选按钮同时只能选中一个。 -
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。 -
type为email、tel、url ：
8.1. email“ 为电子邮件格式 。
8.2. tel：为电话格式。
8.3. url： 为网址格式。
额外属性和 text一致。但对于这几种类型，浏览器支持是不同的。email 支持比较好，现在浏览器都支持格式验证；tel 基本不支持；url 支持一般，部分浏览器只要检测到** http://**就能通过。 -
type=”hidden”：
生成一个隐藏控件，一般用于表单提交时关联主键 ID 提交，而这个数据作为隐藏存在。 -
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等前端库写吧！！！
网友评论