資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
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 次瀏覽
廣告