W3C HTML5标准阅读笔记 - form、label

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

HTML5中,form标签用于制作表单,而label标签则用于给表单中的控件添加标题。

form

form标签用于制作页面上的表单控件,其内部不能再包含别的form子元素。除了通用属性,form标签还拥有以下特有属性:

  • accept-charset。提交表单时的字符编码。
  • action。表单提交的地址。
  • autocomplete。是否启用自动补全机制,其可选值有两个:on和off,当autocomplete属性不存在时,默认为on。很奇怪为什么此处标准不把autocomplete属性定义为boolean属性,那样的话使用起来会更加方便。
  • enctype。数据的编码类型,如application/x-www-form-urlencoded
  • method。提交表单时的HTTP方法。
  • name。表单的名称,不能为空字符串。在同一个文档中,多个form标签的name值不能发生冲突。如果一个form的name为“x”,则可以通过document.forms.x来获取该表单对象。
  • novalidate。禁用表单校验特性。
  • target。表单提交后的浏览环境。

在DOM中,form对象的字段有:

  • form.elements。一个HTMLCollection对象,包含form中所有的控件。
  • form.length。form中控件的数目。
  • form[index]。以下标获取form中的某个控件。
  • form[name]。以name获取form中的某个控件。如果有多个控件的name相同(比如radio button的情况),则此操作返回一个包含所有相应元素的RadioNodeList对象。
  • form.submit()。提交表单操作。
  • form.reset()。重置表单 -- 将已经填写的表单内容全部清空。
  • form.checkValidity()。检查表单中的所有控件是否合法。

由于历史原因,上述form.elements、form.length、form[index]和form[name]字段所返回的控件中,不包含图片按钮(<input type="image">)。

表单校验

与HTML4相比,HTML5中增加了表单校验的特性,可以通过给控件元素定义一些属性来限制该控件可以接受的值。在表单提交时,如果没有对form定义novalidate,则浏览器会检测这些控件的限制条件,并在发现限制条件不满足时弹出警告。这些限制条件属性的例子有:input标签中的required属性和maxlength属性等。

一般情况下,对于某个form表单,即使它有多个控件校验不通过,浏览器也只会警告其中一个控件的问题(通常是按HTML代码顺序从上往下第一个校验不通过的控件)。如果需要在表单提交时警告所有校验不通过的控件,则可利用invalid事件来实现 -- 当表单提交时,如果有控件校验不通过,则所有校验不通过的控件都会触发invalid事件,据此即可得到不合法控件的列表。

一个比较有意思的细节是,按照标准的说法,当所有不合法的控件触发invalid事件后,相关的form对象也会触发invalid事件。但是我在Chrome(48.0)、Firefox(44.0)和Opera(35.0)上经过测试,发现没有一款浏览器是支持该行为的。

label

label标签用于设定表单中控件的标题,一个label往往对应一个表单控件。将label与表单控件进行对应的方式有2种:

  1. 设置label元素的for属性,将其设定为要对应的控件的id值。
  2. 将要对应的控件放置在label标签内部,作为label的子元素而存在。

除了语义上的作用,使用label标签会在用户体验上有一个比较好的提升:当点击label文本时,其对应的控件将会获取焦点。

对于DOM中的label对象,其有2个属性比较有用:

  • label.control。返回label对应的表单控件对象。
  • label.htmlFor。返回label的for属性值。值得注意的是,此处label对象的属性名与label标签的属性名并不一致。

而对于DOM中的控件对象,其存在一个叫做labels的属性,访问该属性会以NodeList的形式获得一个控件对应label元素的集合。

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!