如何在HTML中使用帶有步驟的輸入類型欄位？
- WBOY轉載
- 2023-09-05 23:49:061053瀏覽
在本文中，我們將在 HTML 中使用帶有步驟的輸入類型欄位。
我們使用step屬性來指定元素中數字之間的間隔。例如，如果我們的步驟 =“2”，則數字可以是 -4、-2、0、2、4 等。
此步長設定點選輸入欄位中的上下微調按鈕並在一定範圍內左右移動滑桿時的步進間隔。如果沒有明確包含步驟，則數字的預設值將設定為 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）。
如我們所見，該值不會先於輸入欄位中指定的最小值。
如我們所見，該值不會超過輸入欄位中指定的最大值。
以上是如何在HTML中使用帶有步驟的輸入類型欄位？的詳細內容。更多資訊請關注PHP中文網其他相關文章！