HTML5官方文檔學習筆記（三）----HTML表單指南

HTML4中已有的表單控件這裏我就不再重複介紹了，這裏大致總結一下HTML5中表單元素新增的部分

<fieldset> 和 <legend> 元素

<fieldset>元素是一種方便的用於創建具有相同目的的小部件組的方式，出於樣式和語義目的。 你可以在<fieldset>開口標籤後加上一個 <legend>元素來給<fieldset> 標上標籤。 <legend>的文本內容正式地描述了<fieldset>裏所含有部件的用途。

許多輔助技術將使用<legend> 元素，就好像它是相應的 <fieldset> 元素裏每個部件的標籤的一部分。例如，在說出每個小部件的標籤之前，像Jaws或NVDA這樣的屏幕閱讀器會朗讀出legend的內容。
這裏給出MDN上的一個例子：

<form>
  <fieldset>
    <legend>Fruit juice size</legend>
    <p>
      <input type="radio" name="size" id="size_1" value="small">
      <label for="size_1">Small</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_2" value="medium">
      <label for="size_2">Medium</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_3" value="large">
      <label for="size_3">Large</label>
    </p>
  </fieldset>
</form>

多個標籤

嚴格地說，您可以在一個小部件上放置多個標籤，但是這不是一個好主意，因爲一些輔助技術可能難以處理它們。在多個標籤的情況下，您應該將一個小部件和它的標籤嵌套在一個元素中。

<p>Required fields are followed by <abbr title="required">*</abbr>.</p>

<!--這樣寫：-->
<div>
  <label for="username">Name:</label>
  <input type="text" name="username">
  <label for="username"><abbr title="required">*</abbr></label>
</div>

<!--但是這樣寫會更好：-->
<div>
  <label for="username">
    <span>Name:</span>
    <input id="username" type="text" name="username">
    <abbr title="required">*</abbr>
  </label>
</div>

<!--但最好的可能是這樣：-->
<div>
  <label for="username">Name: <abbr title="required">*</abbr></label>
  <input id="username" type="text" name="username">
</div>

HTML 縮寫元素（<abbr>）用於展示縮寫，並且可以通過可選的 title 屬性提供完整的描述。若使用 title 屬性，則它必須且僅可包含完整的描述內容。

用於表單的通用HTML結構

	<section>
        <h2>Contact information</h2>
        <fieldset>
            <legend>Title</legend>
            <ul>
                <li>
                <label for="title_1">
                    <input type="radio" id="title_1" name="title" value="M." >
                    Mister
                </label>
                </li>
                <li>
                <label for="title_2">
                    <input type="radio" id="title_2" name="title" value="Ms.">
                    Miss
                </label>
                </li>
            </ul>
        </fieldset>
        <p>
            <label for="name">
            <span>Name: </span>
            <strong><abbr title="required">*</abbr></strong>
            </label>
            <input type="text" id="name" name="username">
        </p>
        <p>
            <label for="mail">
            <span>E-mail: </span>
            <strong><abbr title="required">*</abbr></strong>
            </label>
            <input type="email" id="mail" name="usermail">
        </p>
        <p>
            <label for="pwd">
            <span>Password: </span>
            <strong><abbr title="required">*</abbr></strong>
            </label>
            <input type="password" id="pwd" name="password">
        </p>
    </section>
    <section>
        <h2>Payment information</h2>
        <p>
            <label for="card">
            <span>Card type:</span>
            </label>
            <select id="card" name="usercard">
            <option value="visa">Visa</option>
            <option value="mc">Mastercard</option>
            <option value="amex">American Express</option>
            </select>
        </p>
        <p>
            <label for="number">
            <span>Card number:</span>
            <strong><abbr title="required">*</abbr></strong>
            </label>
            <input type="number" id="number" name="cardnumber">
        </p>
        <p>
            <label for="date">
            <span>Expiration date:</span>
            <strong><abbr title="required">*</abbr></strong>
            <em>formatted as mm/yy</em>
            </label>
            <input type="date" id="date" name="expiration">
        </p>
    </section>
    <p> <button type="submit">Validate the payment</button> </p>