資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 HTML 中使用帶有步長的輸入型別欄位？
在本文中，我們將使用 HTML 中帶有步長的輸入型別欄位。
我們使用 step 屬性來指定 <input> 元素中數字之間的間隔。例如，如果我們的 step = "2"，數字可以是 -4、-2、0、2、4 等。
step 設定在點選輸入欄位中的向上和向下旋轉按鈕、在範圍上左右移動滑塊時步進間隔。如果未明確包含 step，則預設情況下將為數字設定為 1，對於日期/時間輸入型別設定為 1 個單位型別。
數字輸入的預設步進值為 1，僅允許輸入整數，除非步進基數不是整數。時間的預設步進值為 1 秒。
我們還可以將 step 屬性與 max 和 min 屬性一起使用，以在輸入欄位中建立一系列值。
語法
以下是使用 HTML 中帶有步長的輸入欄位的語法。
<input type="number" id="points" name="points" step="enter number">
示例
以下是使用 HTML 中帶有步長的輸入欄位的示例程式：
<!DOCTYPE html> <html> <body> <form > <label for="points">Step Points:</label> <input type="number" id="points" name="points" step="5"> <input type="submit"> </form> </body> </html>
我們在上面的示例程式中使用了 step=5。它將導航到 -10、-5、0、5、10、15……依此類推。
示例
以下是使用 HTML 中帶有步長的輸入欄位的另一個示例程式：
<!DOCTYPE html> <html> <head> <style> input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: none; background-color: #3CBC8D; color: white; } </style> </head> <body> <h2>Input fields with color</h2> <form> <label for="fname">First Name</label> <input type="text" id="fname" name="fname" value="John"> <label for="lname">Last Name</label> <input type="text" id="lname" name="lname" value="Doe"> </form> </body> </html>
我們在上面的示例程式中輸入了 step=10。它將導航到 10、20、30、40、50、60……依此類推。
在帶有範圍的輸入欄位上使用步長
這些步長也可用於範圍有限的輸入欄位。因此，還需要宣告最大值和最小值屬性。
語法
以下是將 step 屬性與 max 和 min 屬性一起使用以在輸入欄位中建立一系列值的語法。
<input type="range" min="0" step="3" max="30">
示例
以下是使用 step 屬性以及 max 和 min 屬性在輸入欄位中建立一系列值的示例程式。
<!DOCTYPE html> <html> <head> </head> <body> <form > <label for="points">Step Points:</label> <input type="number" id="points" name="points" min="0" step="3" max="30"> <input type="submit"> </form> </body> </html>
我們在上面的示例程式中使用了 step=3。它將導航到 0、3、6、9……依此類推到 30（因為我們指定了 max=30）。
我們可以看到，該值不會低於我們在輸入欄位中指定的最小值。
我們可以看到，該值不會超過我們在輸入欄位中指定的最大值。
更新時間： 2022-11-21
715 次檢視
廣告