如何在 HTML 中使用范围输入类型?

front end technologyhtmlweb development更新于 2025/4/1 11:24:17

HTML 中的表单用于以各种方式接收用户的输入。许多控件有助于创建用户界面。为了接收单个输入，我们使用文本框，可以使用 <input type="text" name="t1"> 创建。此代码将显示如下控件 -

在此控件中，我们可以输入精确或精准的值，这些值稍后可以验证或保存在数据库中。但有时我们需要控件来接收用户的信息，或者可能是用户选择的兴趣，而无法输入精确的信息。例如，在社交媒体网站上，用户需要输入他们的满意度，因此在这种情况下，只能指定一个范围，而不是确切的值。另一个示例是提供价格范围选项，访问者无需输入具体的价格金额，而是直接提及价格范围。

因此，在这种情况下，普通的文本框将毫无用处。我们将使用范围类型的输入控件，它允许用户在范围内选择一个值。

范围控件是一个滑块控件，通过移动圆圈，您可以选择范围。此控件不适用于输入精确值，而是用于不需要精确值的情况。让我们看一个非常基本的范围控件程序。

示例


<html>
<body>
   <form name="form1">
      <label>Select Weight</label></br>
      <input type="range" name="weight">
   </form>
</body>
</html>

The default range of this control is from 0 to 100. But we can also set the minimum and maximum value. To set the minimum and maximum values, we can min and max attributes.

示例


<html>
<body>
  <form name="form1">
      <label>Select Weight</label><br>
      <input type="range" name="weight" min="10" max="200">
   </form>
</body>
</html>

在此程序中，滑块移动时您将无法看到最小值和最大值。

除了 min 和 max 之外，还有其他一些非常有用的属性。它们如下:

Step - 步长值表示间隔值。默认情况下，滑块控件的步长值为 1。如果您希望滑块每次移动 5 步，则步长值需要指定为 5。
Value - 这是滑块在网页中启动时的初始值。

因此，让我们对之前的程序进行一些修改，实现 step 和 value 属性，并显示滑块的值。

示例


<html>
<body>
   <form oninput="res.value = slider1.value">
      <label>Select Weight</label><br>
      <input type="range" name="slider1" min="10" max="200" step="10"  
      value="30"> <br/>
             
      <output name="res" for="slider1">30</output>
   </form>
</body>
</html>