如何在HTML中使用range输入类型？

HTML表单用于通过各种方式或方法获取用户的输入。许多控件有助于创建用户界面。要获取单个输入，我们使用文本框，可以使用<input type=”text” name=”t1”>创建。这段代码将显示如下控件：

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

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

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

示例


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

此控件的默认范围是0到100。但我们也可以设置最小值和最大值。要设置最小值和最大值，我们可以使用min和max属性。

示例


<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 - step值表示间隔值。默认情况下，滑块控件的step值为1。如果希望滑块一次移动5步，则需要将step值指定为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>