表单新增元素与属性

form 属性

即便某个表单元素在表单 A 之外,但只要该元素指定了 form 属性,且名称与表单 A 的 id 相同,则它们依然构成一个完整的表单,请参见源代码:

  <form id="textForm">
    <input type="text">
  </form>
  <textarea form="textForm"></textarea>

formaction 属性

在以往版本中,一个表单中的所有内容只能通过表单自身的 action 属性被统一提交到指定地址。在 HTML5 中可以为所有提交按钮,增加不同的 formaction 属性,使单击不同的按钮可以将表单提交到不同的地址。源代码:

  <form id="testForm1">
    <input type="submit" name="s0" value="0" formaction="xx0.php">
    <input type="submit" name="s1" value="1" formaction="xx1.php">
    <input type="submit" name="s2" value="2" formaction="xx2.php">
  </form>

formmethod 属性

在以往的 HTML 版本中,一个表单只有一个 method 属性来统一提交方法。在 HTML5 中可以使用 formmethod 属性来为每一个表单元素指定不同的提交方法。

  <form id="testForm2">
    <input type="submit" name="s3" value="默认使用 GET 方式提交" formaction="xx0.php" formmethod="get">
    <input type="submit" name="s4" value="这里使用 POST 方式提交" formaction="xx1.php" formmethod="post">
  </form>

autofocus 属性

  <form id="testForm3">
    <input type="text" autofocus value="焦点">
    <input type="text">
  </form>

增强的页面元素

figure / figcaption

用于展示独立于页面其它部分的内容

details / summary

用于展示需要折叠起来的内容,比如下面这个效果:

显示详细

源代码是这样的:

<body>  
  <details id="detail" onclick="detail_onclick(this)">
    <summary>显示详细</summary>
    <p id="summaryText" style="visibility: hidden;">我是可怜的、被折叠起来的内容,我是可怜的、被折叠起来的内容,我是可怜的、被折叠起来的内容,我是可怜的、被折叠起来的内容,我是可怜的、被折叠起来的内容,我是可怜的、被折叠起来的内容。</p>
  </details>
  <script>
    function detail_onclick (detail) {
      var p = document.getElementById("summaryText");
      if (detail.open) {
        p.style.visibility = "hidden";
      } else {
        p.style.visibility = "visible";
      }
    }
  </script>
</body>  

mark

用于添加高亮,比如这里的文字被高亮了,它和 Markdown 语法中 ==这里的文字被高亮了== 效果是一样的。

progress

用于呈现进度,一个简单的示例:

当前进度: 0%

源代码:

<body>  
  <section>
    <h2>progress 元素</h2>
    <p>当前进度: <progress id="currentProgress" max="100"><span>0</span>%</progress></p>
    <input type="button" onclick="buttonClick()" value="开始处理">
  </section>
  <script>
    //模拟进度,这里没有使用 for 循环,因为 Javascript 是单线程的。
    function buttonClick() {
      var i = 0;
      function threadOne() {
        if (i<=100) {
          i++;
          progressUpdate(i);
        }
      }
      setInterval(threadOne,50);
    }
    function progressUpdate(newValue) {
      var progressBar = document.getElementById("currentProgress");
      progressBar.value = newValue;
      progressBar.getElementsByTagName("span")[0].textContent = newValue;
    }
  </script>
</body>  

ol / dl / cite / small

ol 新增 start 和 reversed 属性
  1. 没有从序号 1 开始
  2. 没有从序号 1 开始
  3. 没有从序号 1 开始
  1. 没有从序号 1 开始,而且颠倒了
  2. 没有从序号 1 开始,而且颠倒了
  3. 没有从序号 1 开始,而且颠倒了
dl
Hello
world
Hello
HTML5
cite

表示引用,比如: 这是一段引用的内容

small

专门用来表示小字,用于呈现 额外信息

编辑 API: Range

在 HTML5 中,一个 Range 对象代表页面上的一段连续区域。通过 Range 对象,可以获取或修改页面上的任何区域。包含获取,修改,删除和替换等操作。

获取用户光标选取的内容和各种删除
<body>  
  <div><p>测试文字, 测试文字, 测试文字, 测试文字, 测试文字, 测试文字, 测试文字, 测试文字, 测试文字, 测试文字, 测试文字, 测试文字, 测试文字, 测试文字, 测试文字, 测试文字, 测试文字。</p></div>
  <div id="div" style="background-color: aquamarine; width: 500px; height: 300px"><p>等待被删除, 等待被删除, 等待被删除, 等待被删除, 等待被删除, 等待被删除, 等待被删除, 等待被删除, 等待被删除, 等待被删除, 等待被删除, 等待被删除, 等待被删除, 等待被删除, 等待被删除。</p></div>
  <div style="background-color: darksalmon;">
    <p id="p">从指定位置删除指定数量的字符。</p>
    <button onclick="deleteChar()">删除第 3 位到第 7 位</button>
  </div>
  <div>
    <table id="t1" style="border: solid 1px;">
      <tr><td>第 1 行第 1 列</td><td>第 1 行第 2 列</td></tr>
      <tr><td>第 2 行第 1 列</td><td>第 2 行第 2 列</td></tr>
      <tr><td>第 3 行第 1 列</td><td>第 3 行第 2 列</td></tr>
    </table>
    <button onclick="deleteTableRow()">删除第 1 行</button>
  </div>
  <form>
    <input type="button" value="显示我选取的内容" onclick="showRange()"><br>
    <input type="button" value="删除文字" onclick="onlyDeleteContent(true)">
    <input type="button" value="删除整个元素" onclick="onlyDeleteContent(false)">
  </form>
  <div id="showRangeDiv"></div>
  <script>
    function showRange() {
      var htmlContent;
      var showRangeArea = document.getElementById("showRangeDiv");
      var selection = document.getSelection();
      if (selection.rangeCount > 0) {
        htmlContent = "选取了 " + selection.rangeCount + " 处内容\<br\>";
        for (var i=0; i<selection.rangeCount; i++) {
          var rangeContent = selection.getRangeAt(i);
          htmlContent += "其中第 " + (i+1) + " 段内容为: " + rangeContent + "\<br\>";
        }
        showRangeArea.innerHTML = htmlContent;
      }
    }
    function onlyDeleteContent(flag) {
      var div = document.getElementById("div");
      var rangeObj = document.createRange();
      if (flag) {
        rangeObj.selectNodeContents(div);
        rangeObj.deleteContents();
      } else {
        rangeObj.selectNode(div);
        rangeObj.deleteContents();
      }
    }
    function deleteChar() {
      var p = document.getElementById("p");
      var textNode = p.firstChild;
      var rangeObj = document.createRange();
      rangeObj.setStart(textNode, 2);//计数从 0 开始
      rangeObj.setEnd(textNode, 6);
      rangeObj.deleteContents();
    }
    function deleteTableRow() {
      var t = document.getElementById("t1");
      if (t.rows.length > 0) {
        var row = t.rows[0];
        var rangeObj = document.createRange();
        rangeObj.setStartBefore(row);
        rangeObj.setEndAfter(row);
        rangeObj.deleteContents();
      }
    }
  </script>
</body>  
获取用户光标选取的内容和各种删除