W3C HTML5标准阅读笔记 - input

标准原文:https://www.w3.org/TR/html5/forms.html#the-input-element

HTML5中,input标签用于表示表单输入控件,使用时通过其type属性值来确定具体控件的类型。input标签无需闭合。

属性

除了通用属性,input标签还拥有一系列特有属性:

  • type。定义控件的类型。
  • accept。对于文件上传控件(type=file),定义可以接受的文件类型。
  • alt。对于图片按钮(type=image),当图片不可用时的替代显示文字。
  • autocomplete。是否支持自动补全。
  • autofocus。页面加载后使控件获得焦点。
  • checked。控件是否被选中。
  • disabled。控件是否被禁用。disabled的控件值在表单提交的时候不会发送到服务器端。
  • max。控件可接受的最大数值。
  • min。控件可接受的最小数值。
  • maxlength。控件可接受的最大字符数目。
  • minlength。控件可接受的最小字符数目。
  • multiple。是否接受多个输入值,如在type=file的情况下,是否接受同时选择多个文件。
  • name。表单提交时该控件值所对应的key。
  • placeholder。控件的默认提示文本。
  • readonly。是否允许用户修改控件的值。
  • required。表单提交时控件值是否允许为空。
  • size。定义控件的大小,比如在type=text的情况下,文本框的大小可以让多少个字符可见。
  • src。当type=image时,定义图片的地址。
  • step。设定可选值的间隔区间。
  • value。控件值。
  • pattern。属性值为正则表达式,用于设定控件值需遵循的规则。
  • list。定义控件所对应的提醒列表组件(datalist),其值为对应的datalist元素的id值。

type值

对于控件类型,input可取的type值有:

  • hidden。隐藏控件,用于在表单中放置一些辅助值。
  • text。单行文本输入框,type属性缺失时的默认值。
  • search。单行文本输入框,其值表示搜索关键词。
  • tel。单行文本输入框,对于所填写的字符串是否符合电话号码格式,标准不做任何限定。
  • url。单行文本输入框,其值必须为完整的URL地址,否则浏览器会报错。
  • email。单行文本输入框,其值必须为合法的email地址。
  • password。单行文本输入框,用户输入的字符会以黑点来代替。
  • date。日期选择控件,表单提交时所传输的值为2016-03-16这样的字符串。
  • time。时间设置控件,表单提交时所传输的值为14:22这样的字符串。
  • number。单行文本输入框,只接受数字字符。
  • range。在某一范围中进行值选择的控件,在Chrome中以滑块控件的形式表现,其默认范围为0(最左)到100(最右)。
  • color。色值选择器,Chrome中以色轮的形式表现,其值为#cdc776这样的字符串。
  • checkbox。可选框,可通过访问其checked属性来获知是否被选中。
  • radio。单选按钮,可通过访问其checked属性来获知是否被选中。
  • file。文件上传控件。
  • submit。表单提交按钮。
  • image。图片按钮,具体图片由src属性确定,可用于提交表单。在用图片按钮提交表单时,还会把图片中用户点击的坐标传输到服务端;这一点在以下场景中会比较有用:当把一张图片用作图片按钮,而该图片上有不同操作的图样时(如左边有确定图样,右边有取消图样),点击该图片提交表单到服务器端后,服务器端可以获知用户在图片上的点击坐标,进而采取相应的措施。
  • button。普通按钮。
  • reset。重置按钮,用于将表单中所有的控件重置为默认值。

对于不同的type值与其可用的特有属性值之间的关系,标准文档总结了一个比较全的表格可供参考。

input对象

对于DOM中的input对象,有一些属性比较值得关注:

  • value。控件值。
  • checked。控件是否选中。
  • files。FileList对象,表示已选中的所有文件。如果控件不是文件选择器,则返回null。
  • valueAsDate。Date对象,表示控件所设定的日期。如果控件不是日期/时间选择器,则抛出InvalidStateError异常。
  • valueAsNumber。返回控件所设置的数值。
  • stepUp([n])、stepDown([n])。按照所设定的间隔值(step)往上/下调整数值,如果参数为空,则默认往上/下调整一个间隔值(即默认n=1)。
  • list。控件所对应的datalist元素对象。

而对于input对象所触发的事件,主要有2个:input与change:

  • input。当用户改变控件中的数据,无论改变后的数据是否合法,均会触发input事件。比如,在普通的单行文本输入框(type=text)中,即使该输入框定义了maxlength=3,敲击键盘输入test时,总是会触发4次input事件。
  • change。当用户改变控件中的数据,且这种改变被接受时(如输入值且控件失去焦点时),触发change事件。因此,input事件总是在change事件前被触发的。

Chuan Shao

Read more posts by this author.

Shanghai

Subscribe to Chuan's blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!