HTML5 為表單新增了許多新屬性,增強了表單的功能和使用者體驗。主要包括以下幾類:
1. 輸入型別和屬性:
-
新的輸入型別: 這些新型別提供了更具體的語義和內建的驗證功能,以及更合適的鍵盤佈局(在移動裝置上尤其有用)。
email
: 用於輸入電子郵件地址。url
: 用於輸入網址。tel
: 用於輸入電話號碼。number
: 用於輸入數字。range
: 用於輸入一定範圍內的數字。date
: 用於輸入日期。time
: 用於輸入時間。datetime
: 用於輸入日期和時間。week
: 用於輸入週數。month
: 用於輸入月份。color
: 用於選擇顏色。search
: 用於搜尋框。
-
新的輸入屬性:
placeholder
: 顯示在輸入框內的提示文字,在使用者輸入內容後消失。required
: 標記必填欄位。autofocus
: 頁面載入時自動聚焦到該輸入框。autocomplete
: 啟用或禁用瀏覽器的自動完成功能。可以設定為on
、off
或特定值,例如name
,street-address
等。min
,max
,step
: 用於number
和range
型別的輸入,指定最小值、最大值和步長。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表單。