MOBILE HTML5學習手冊

HTML5 Web 表單

|

87

最小值與最大值經常在表單驗證中使用，因此對 web 開發人員而言，這些屬性非常實

用。例如，如果你正在編寫一個預訂系統，已經知道哪些時間可讓顧客入座，你可以在

網頁表單裡編入這些資訊，避免使用者提交不正確的時間及顯示可怕的錯誤訊息。同

時，因為網頁已經知道有哪些空檔可用，因此可以只讓使用者選擇有效的時間：

<label>Reservation Time:

<input type="time" min="17:00" max="22:00" name="dinner" required>

</label>

在這個線上餐廳預約系統範例中，你會從 5:00 p.m. 開始提供晚餐，最後入座時間是

10:00 p.m.。在支援的瀏覽器中，你不需要依靠任何 JavaScript 就可以確保系統只接受這

段期間的預約。

step 屬性

日期∕時間輸入類型、

range

與

number

都隱含

step

屬性，但你也可以自行定義它。例

如，如果你有一個五分錢廉價商店，所有價格都是五的倍數，最貴的價格是 $1.00，你

可以在價格設定 GUI 加入下列程式：

<p>

<label for="cost">Price </label>

<input type="number" min="5" max="100" step="5" name="cost" id="cost"/>

</p>

如果 UI 提供一個 Widget，例如範圍滑桿，移動這個滑桿時，將會根據

step

屬性的值來

遞增數值。同樣的，

number ...