什么是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等前端库写吧!!!