如何在 HTML 中使用带步长的输入类型字段?

htmlweb developmentfront end technology更新于 2024/7/4 7:40:17

在本文中，我们将在 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……等等。

在具有范围的输入字段上使用步骤

这些步骤也可以用于范围有限的输入字段。因此，也需要声明 maximum 和 minimum 属性。

语法

以下是使用 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>