HTML5中新新增的表單屬性有哪些?

王铁柱6發表於2024-11-23

HTML5 為表單新增了許多新屬性,增強了表單的功能和使用者體驗。主要包括以下幾類:

1. 輸入型別和屬性:

  • 新的輸入型別: 這些新型別提供了更具體的語義和內建的驗證功能,以及更合適的鍵盤佈局(在移動裝置上尤其有用)。

    • email: 用於輸入電子郵件地址。
    • url: 用於輸入網址。
    • tel: 用於輸入電話號碼。
    • number: 用於輸入數字。
    • range: 用於輸入一定範圍內的數字。
    • date: 用於輸入日期。
    • time: 用於輸入時間。
    • datetime: 用於輸入日期和時間。
    • week: 用於輸入週數。
    • month: 用於輸入月份。
    • color: 用於選擇顏色。
    • search: 用於搜尋框。
  • 新的輸入屬性:

    • placeholder: 顯示在輸入框內的提示文字,在使用者輸入內容後消失。
    • required: 標記必填欄位。
    • autofocus: 頁面載入時自動聚焦到該輸入框。
    • autocomplete: 啟用或禁用瀏覽器的自動完成功能。可以設定為onoff或特定值,例如name, street-address等。
    • min, max, step: 用於numberrange型別的輸入,指定最小值、最大值和步長。
    • pattern: 使用正規表示式定義輸入值的有效格式。
    • list: 將輸入框與datalist元素關聯,提供預定義的選項供使用者選擇。
    • multiple: 允許在email, file等輸入型別中選擇多個值。

2. 表單屬性:

  • novalidate: 禁用瀏覽器對錶單的內建驗證。
  • autocomplete: 啟用或禁用整個表單的自動完成功能。
  • formaction, formenctype, formmethod, formnovalidate, formtarget: 用於表單內單個提交按鈕,允許覆蓋表單自身的提交屬性。

3. datalist 元素:

  • datalist元素與list屬性配合使用,為輸入框提供預定義的選項列表。

4. output 元素:

  • output元素用於顯示計算結果或指令碼輸出。

示例:

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" placeholder="Enter your email" required>

  <label for="website">Website:</label>
  <input type="url" id="website" name="website" placeholder="Enter your website">

  <label for="quantity">Quantity:</label>
  <input type="number" id="quantity" name="quantity" min="1" max="10" value="1">

  <input type="submit" value="Submit">
</form>

<form>
  <input type="text" list="browsers">
  <datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
  </datalist>
</form>

這些新屬性和元素極大地提升了HTML表單的功能和使用者體驗,使得開發者可以建立更易用、更強大的Web表單。

相關文章