html5的新属性(1)

表单新增元素和属性

• control

在html5中可以在一个标签中添加一个表单元素 通过该标签的control属性来访问表单元素

 <form action="">
    <label id="label">
      邮编:
      <input type="text" maxlength="6">
      <small>请输入6位数</small>
    </label>
    <input type="button" onclick="setValue()" value="点击设置默认值">
  </form>
  <script>
    function setValue(){
      var label = document.getElementById('label');
      var textBox = label.control;
      textBox.value = '123456';
    }
  </script>

• 
  
• datalist list
  

datalist标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表

     <form action="">
      <input type="text" list="mylist">
      <datalist id="mylist">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </datalist>
    </form>

• 
  
• pattern
  

pattern 属性规定用于验证输入字段的模式 在提交时去验证

    <form action="">
      <input type="text" pattern="[A-Z]{3}">
      <input type="submit" value="提交">
    </form>

• selectionDirection

selectionDirection 属性有两个值 forward 和 backword 通过你去选择表单中的内容而决定

     <form action="">
      <input type="text" name="test">
      <input type="submit" value="提交" onclick="check()">
    </form>
    <script>
      function check(){
        var oText = document.forms[0]['test'];
        alert(oText.selectionDirection);
      }
    </script>

• 
  
• indeterminate
  

是checkbox 的一种属性 来代表未明确选择的状态

<form action="">
   <input type="checkbox" indeterminate id="checkbox">
</form>
<script>
  var oCheckBox = document.getElementById('checkbox');
  oCheckBox.indeterminate = true;
</script>

• -