新增元素和属性

新增属性

form属性

在 HTML5 中，可以把表单元素书写在页面的任何地方，通过指定一个 form 属性，值为表单的 id，这样就可以声明该元素从属于指定表单了。

  1. <!-- Safari 5、Google Chrome 10以上版本、Firefox 4以上版本、Opera 10以上版本 -->
  2. <form id="test">
  3.     <input type="text" />
  4. </form>
  5. <textarea form="test"></textarea>

formaction\formmethod\formenctype\formtarget

html4 中，一个表单里的所有元素只能通过表单的 action 属性统一提交，而在 html5 中可以为所有的提交按钮添加不同的 formaction 属性，使得不同的按钮提交到不同的表单。

:::info 同理，类似的还有：

  • formmethod ：对表单元素指定不同的提交方式；
  • formenctype ：对表单元素指定不同的编码方式；属性值有：
    • application/x-www-form-urlencoded：默认编码方式。action=get时，浏览器用该编码方式将数据转换成字符串，然后添加到提交目标地址的后面；
    • multipart/form-data：不对字符编码，在使用包含文件上传的表单时必须使用该值；
    • text/plain：表单数据中的空格被转换为“+”号，但不对表单数据中的特殊字符编码；
  • formtarget：对表单元素指定提交后在何处打开所需要加载的页面； :::
<!-- Safari 5、Google Chrome 10以上版本、Firefox 4以上版本、Opera10.50以上版本、IE 10 -->
<form id="testform" action="test.jsp">
    <input type="submit" name="s1" value="v1" formaction="s1.jsp" />
  <input type="submit" name="s2" value="v2" formaction="s2.jsp" />
</form>

<!-- Safari 5、Google Chrome 10以上版本、Firefox 4以上版本、Opera 10.50以上版本、IE 10 -->
<form id="testform" action="test.jsp">
    <input type="submit" value="get提交" formmethod="get" />
  <input type="submit" value="post提交" formmethod="post" />
</form>

<!-- Safari 5、Google Chrome 10以上版本、Firefox 4以上版本、Opera 10.50以上版本、IE 10 -->
<form id="testform" action="test.jsp">
    <input type="text" name="name" value="test"><br/>
  文件:<input type="file" name="files">
  <input type="submit" value="上传" formaction="uploadFile.jsp" formenctype="multipart/form-data">
  <input type="submit" value="提交" />
</form>

<!-- Safari 5、Google Chrome 10以上版本、Firefox 4以上版本、Opera10.50以上版本、IE 10 ->
<form id="testform" action="test.jsp">
    <input type="submit" name="s1" value="v1" formaction="s1.jsp" formtarget="_self">
    <input type="submit" name="s2" value="v2" formaction="s2.jsp" formtarget="_blank">
</form>

autofocus属性

为文本框、选择框或按钮控件加上 autofocus 属性，当画面打开时，该控件自动获得光标焦点。

<!-- Safari 5、Google Chrome 6以上版本、Firefox 4、Opera10以上版本、IE 10 -->
<input type="text" autofocus />

:::warning 一个页面上只能有一个控件具有 autofocus 属性。 :::

required属性

required 属性可以应用在大多数输入元素上，在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字，提示用户必须输入内容。

<!-- Safari 5、Google Chrome 6以上版本、Firefox 4以上版本、Opera 10以上版本、IE 10 -->
<input type="text" required />

labels属性

html5 为所有可使用标签（label 元素）的表单元素定义一个 labels 属性，属性值为一个 NodeList 对象，代表该元素所绑定的标签元素所构成的集合。表单元素包括非隐藏的 input 元素（type 属性值不等于 hidden)、button 元素、select 元素、textarea 元素、meter 元素、output 元素、progress 元素以及 keygen 元素。

<!-- Safari 5、Google Chrome 6以上版本、Opera 10以上版本 -->
<form id="testform">
  <label for="text_input">验证内容：</label>
  <input type="text" name="name" id="text_input">
  <button id="btn" type="button" onclick="validate()">校验</button>
</form>
<script>
    function validate() {
    var form = document.getElementById('testform');
    var input = document.getElementById('text_input');
    var btn = document.getElementById('btn');
    var label = document.createElement('label');
    label.setAttribute('for', 'text_input');
    form.insertBefore(label, btn);
    input.labels[1].innerHTML = "测试input的labels";
    console.log(input.labels);
  }
</script>

control属性

在 HTML5 中，可以在标签（label元素）内部放置一个表单元素，并且通过该标签的 control 属性来访问该表单元素。

<!-- Safari 5以上版本、Google Chrome 18以上版本、Firefox 10以上版本、Opera 12以上版本 -->
<form>
  <label for="input" id="inputLabel">
    <input type="text" id="input" placeholder="请输入6位数字">
  </label>
  <button type="button" onclick="getControl()">获取label的control</button>
</form>
<script>
    function getControl() {
    var input = document.getElementById('input');
    var label = document.getElementById('inputLabel');
    var labelInput = label.control;
    console.log(labelInput === input);        // true
  }
</script>

placeholder属性

placeholder 是指当文本框（或