表單欄位 (Form)

  • 新提案
  • →
  • 封閉測試
  • →
  • 公開測試
  • →
  • 已穩定
成熟度說明
  • 新提案：未完成開發、請勿使用。
  • 封閉測試：開發暫時性完成，可使用。可能仍有親和力或其他使用上問題待透過實測發現。
  • 公開測試：開發暫時性完成，歡迎使用。具有完整親和力報告。
  • 已穩定：開發完成、歡迎使用。應無任何親和力或使用上問題。

簡易欄位

HTML 
<div class="fields">
  <fieldset class="fieldset">
    <label for="name" class="field-label">姓名</label>
    <input type="text" id="name" autocomplete="name" class="field-input">
  </fieldset>
  <fieldset class="fieldset">
    <label for="city" class="field-label">居住城市</label>
    <select class="field-input" id="city">
      <option for="select">選擇</option>
      <option for="taipei">台北市</option>
      <option for="newtaipei">新北市</option>
      <option for="keelung">基隆市</option>
    </select>
  </fieldset>
  <fieldset class="fieldset">
    <label for="desc" class="field-label">意見</label>
    <textarea id="desc" class="field-input" rows="4"></textarea>
  </fieldset>
</div>

CSS

  • .fields：作為全部 .fieldset 的容器。
  • fieldset.fieldset：作為單獨表單項目的容器。
  • label.field-label：作為單獨表單項目的 <label>。
  • .field-input：作為輸入欄位。

親和力

  • 使用 .field-label，必要使用 for 和 id 連結 <label> 元件和 <input> 元件。
  • 使用 [autocomplete] 方便使用者快速填寫欄位。
  • 盡量使用 input[type=text]，倚賴伺服器端驗證再於瀏覽器端顯示錯誤內容。伺服器端的表格內容驗證比瀏覽器端的表格驗證更為重要。因為 HTML 的內建表格驗證存在許多親和力的疑慮（請參考 Avoid Default Field Validation.），建議非必要時，盡量仰賴伺服器端驗證，並正確地保留使用者輸入的內容且顯示錯誤。
  • 需要特定的輸入模式則使用 [inputmode] 做設定。

選項欄位

識別證件
HTML 
<div class="fields">
  <fieldset class="fieldset">
    <legend for="id" class="field-label">識別證件</legend>
    <div class="checkable-wrapper-v">
      <div class="checkable-item">
        <input type="radio" name="identification" id="v-healthid" value="healthid">
        <label for="v-healthid">健保卡</label>
      </div>
      <div class="checkable-item">
        <input type="radio" name="identification" id="v-moica" value="moica">
        <label for="v-moica">自然人憑證</label>
      </div>
      <div class="checkable-item">
        <input type="radio" name="identification" id="v-phone" value="phone">
        <label for="v-phone">手機門號</label>
      </div>
    </div>
  </fieldset>
  <fieldset class="fieldset">
    <label class="field-label" for="items">補辦項目</label>
    <div class="checkable-wrapper-h">
      <div class="checkable-item">
        <input type="checkbox" name="check-identification" id="check-h-healthid" value="healthid">
        <label for="check-h-healthid">健保卡</label>
      </div>
      <div class="checkable-item">
        <input type="checkbox" name="check-identification" id="check-h-moica" value="moica">
        <label for="check-h-moica">自然人憑證</label>
      </div>
      <div class="checkable-item">
        <input type="checkbox" name="check-identification" id="check-h-id" value="id">
        <label for="check-h-id">身分證</label>
      </div>
    </div>
  </fieldset>
</div>

CSS

  • .checkable-wrapper-v：用來包含直式的選項。
  • .checkable-wrapper-h：用來包含橫式的選項。
  • .checkable-item：用來包含單一選項，其中包含 <input> 以及 <label> 欄位。

欄位說明

  • 必須為 @pdis.nat.gov.tw 結尾的信箱位址。
HTML 
<div class="fields">
  <fieldset class="fieldset">
    <label for="email" class="field-label">電子信箱</label>
    <ul class="field-description" id="email-description">
      <li>必須為 @pdis.nat.gov.tw 結尾的信箱位址。</li>
    </ul>
    <input type="text" id="email" autocomplete="email" inputmode="email" class="field-input" aria-describedby="email-description">
  </fieldset>
</div>

CSS

  • ul.field-description：作為單獨表單項目說明文字。

親和力

  • 使用 ul.field-description，必要使用 aria-describedby 和 id 連結說明元件和 <input> 元件。

必要欄位

HTML 
<div class="fields">
  <fieldset class="fieldset">
    <label for="email-required" class="field-label">電子信箱 <span class="field-required">必填</span></label>
    <input type="text" id="email-required" autocomplete="email" inputmode="email" aria-required="true" class="field-input">
  </fieldset>
</div>

親和力

  • 使用 input[aria-required="true"] 告知輔助科技。

欄位及驗證錯誤內容

  • 必須為 @pdis.nat.gov.tw 結尾的信箱位址。
  • 錯誤：所輸入內容不是一個信箱位址。
HTML 
<div class="fields">
  <fieldset class="fieldset fieldset-has-error">
    <label for="email-error" class="field-label">電子信箱</label>
    <ul class="field-description" id="email-description-with-error">
      <li>必須為 @pdis.nat.gov.tw 結尾的信箱位址。</li>
      <li>錯誤：所輸入內容不是一個信箱位址。</li>
    </ul>
    <input type="email" id="email-error" autocomplete="email" inputmode="email" class="field-input" pattern=".+@pdis.nat.gov.tw" aria-describedby="email-description-with-error" value="test">
  </fieldset>
</div>

CSS

  • .fieldset-has-error：作為欄位內容有錯誤的視覺辨識。

親和力

  • 在 ul.field-description 將錯誤訊息詳細說明，並用「錯誤：」做為開頭區分表單欄位說明。

欄位加上頭尾文字

不用輸入https://pdis.run/
接上@pdis.nat.gov.tw
HTML 
<div class="fields">
  <fieldset class="fieldset">
    <label for="code" class="field-label">短網址碼</label>
    <div class="field-input-fixes">
      <div class="field-input-prefix" id="url-prefix"><span class="sr-only">不用輸入</span>https://pdis.run/</div>
      <input type="text" id="code" class="field-input" placeholder="NW105SL" aria-describedby="url-prefix">
    </div>
  </fieldset>

  <fieldset class="fieldset">
    <label for="username" class="field-label">信箱名稱</label>
    <div class="field-input-fixes">
      <input type="text" id="username" autocomplete="username" class="field-input" placeholder="muan" aria-describedby="email-suffix">
      <div class="field-input-suffix" id="email-suffix"><span class="sr-only">接上</span>@pdis.nat.gov.tw</div>
    </div>
  </fieldset>
</div>

CSS

  • .field-input-fixes：作為輸入欄位 prefix 及 suffix 的容器。
  • .field-input-prefix：作為 prefix 文字。
  • .field-input-suffix：作為 suffix 文字。

親和力

  • 使用 .field-input-prefix 或 .field-input-suffix 時，必要使用 aria-describedby 和 id 連結說明元件和 <input> 元件。

參考資料