数据结构
网络
关系数据库管理系统 (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 次浏览
广告