1. type:该属性是input标签里唯一的必须输入的属性,当然,也可以不填,默认为type = “text”。
  2. required:标记一个字段是否为必须。如果一个字段被标记为required = “required”(严格模式下),或者required(宽松模式下)(ps:下面属性的写法同理,就不一一写出了),并且这个字段的值为空,或者填入的值是无效值,那么这个表单不能提交。什么是无效值?看pattern属性。
  3. pattern:该属性包含了一个JavaScript风格的正则表达式,输入的内容必须完全匹配该正则表达式,不然就算输入的内容无效。对正则表达式不了解?可以去看看JavaScript 正则表达式。
  4. min max:这两个属性用于日期date时间time等输入,还有number和range。顾名思义,它们的作用是限制最大值,最小值。
  5. step:和max min类似,作用是提供一个可以上下点的按钮,比如当前数字是1,你设置了step = “5”,点一下上的按钮,就变成6了。
  6. placeholder:该属性不多说,大家应该都很熟悉,一般是用来提示用户输入的,当用户真的输入了文字之后,会被输入的文字覆盖。
  7. readonly:顾名思义,该属性会让表单空控件不可编辑。这里的不可编辑不是禁用,只是不能编辑文本而已,比如像单选框radio,复选框checkbox这种,本来就是不可编辑的,所以这个属性对它们来说毫无意义。
  8. disabled:该属性会禁用一个表单元素。这里是禁用,完全禁用掉除了iutput之外的所有表单元素。
  9. maxlength :该属性用于限制用户输入的最大字数限制。
  10. size:已经没什么时候实际的作用了,控制大小现在几乎都是由CSS控制了。
  11. form:在HTML5中,表单控件已经没有必要嵌套在一个表单中,新的form属性可以把表单元素与页面上的任意的表单关联起来。也可以被嵌套在一个表单中,随着另一个表单提交,代码如下:
<form id="form1"></form>
<p>
<label for="admin">admin</label>
<input type="text" id="admin" form="form1"/>
</p>

这样,就把form和input联系起来了。如果input没有form属性,那么,它将被关联到离他最近的form表单。
12. autocomplete:顾名思义,自动完成,用户输入一部分,后面的自动补全。需要浏览器保存用户输入的内容,以便下一次自动补全。
13. autofocus:该属性指的是表示这个表单控件在页面载入的时候自动获得焦点。

属性作用

  1. text:如果一个input没有type属性,那么它会是默认type=“text”。没有什么特别的,就是允许输入文本,简单明了。
  2. password:顾名思义,在用户输入密码的时候建议使用这个属性而非text,使用了这个属性,用户输入的文字将会变成*,我们是看不到的,当然,传给后台会是用户输入的文本。有些手机端上不会一开始就是*,而是会短暂的明文显示用户输入的最后一个字符,然后才是*。
  3. checkbox:复选框,默认是小方格,可以选择多个。
  4. radio:单选框,默认是小圆圈,只能选择一个。
  5. submit:通常被认为是一个提交按钮,当点击此按钮时,提交本表单的数据。
  6. file:这个输入类型和其他的不同,其他无非是一些选择,或者输入文本,而这个属性,是为了能让用户上传本地文件。
  7. hidden:顾名思义,该属性是用来隐藏掉该表单控件。以前一般是用来收集一些数据,但是现在没必要了,有强大的localStorage等存储机制,谁还会用这个去存数据呢。
  8. image:该属性接受所有,将会像submit一样提交图片,如果想上传图片,照片,不妨使用这个属性。
  9. reset:重置按钮,点了这个按钮,表单的数据全部重置,也就是清空的意思。一般不会使用,毕竟用户辛辛苦苦填了半天,误操作,点了重置。体验性太差了。
  10. button:顾名思义,一个按钮,表单按钮,和单纯的button元素相比,没有button使用CSS方便,所以如果你不是想用这个按钮去重置(reset)或者提交(submit),并且为了和传统的表单风格相比配的话,建议你都使用button而不是 button。
  11. email:该属性外观上和文本栏相似,用于指定一个电子邮箱地址。在web端没有什么差别,但是在手机端就不一样了,输入键盘会自动的变成有@ 数字 A-Z .等,与输入邮箱有关的字符,用户体验直线上升,有木有?
  12. url:外观功能和 类似,用于指定一个web地址。在手机端上会自动转换成有类似于.com \等方便用户输入web地址的键盘。
  13. tel:用于指定输入的是电话号码。键盘就会变成输入电话号码的键盘。当然,也可以自己定义一些格式什么的,比如023-1235····之类的,需要与pattern属性连用。
  14. number:用于指定输入的是数字,键盘为输入数字的键盘。
  15. range:变成一个滑动条,不同的客户端显示出默认的样式是不一样的。用户可以左右滑动。webkit中可以使用CSS:input[type=range]{=webkit-appearance:slider-vertical}让滑动条竖起来。
  16. search:提供一个搜索栏。如果有文本输入的话,很多浏览器会在最右边提供一个清空搜索栏的小叉,点了就清空该搜索栏。
  17. color:在浏览器支持的情况下,提供一个拾色器,虽然功能没有PS里面的那么强大,不过感觉和window自带的图画功能里面的拾色器差不多。
  18. date:顾名思义,日期选择器,可以用来选择年月日。
  19. datetime:该属性提供两个栏,一个年月日,一个用于时分秒。时区被设置成了UTC。
  20. datetime-local:和 input type="datetime"几乎完全一样,只是不是UTC时间。
  21. month:只包括了年,月的时间选择器。
  22. time:只包括了时分秒的时间选择器,而且是24小时制。
  23. week:该属性是输入多少年的多少周,你可以选择日期,但是返回的是XXXX年XX周。
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐