数据结构
网络
关系型数据库管理系统
操作系统
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 次查看
广告