HTML5 input 类型 range

<input> range 类型的元素允许用户指定一个数值,该数值必须不小于给定值,并且不得大于另一个给定值。但是,精确值并不重要。通常使用滑块或拨号控件而不是像 number 输入类型这样的文本输入框来表示。


实例
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <p>
  5. 根据浏览器支持:<br>
  6. 输入类型 "range" 可显示为滑动控件。
  7. </p>
  8. <form action="/example/html/action_page.aspx" method="get">
  9. Points:
  10. <input type="range" name="points" min="0" max="10">
  11. <input type="submit">
  12. </form>
  13. <p><b>注释:</b>IE9 及早期版本不支持 type="range"。</p>
  14. </body>
  15. </html>

浏览器支持

表格中的数字注明了完全支持该选择器的首个浏览器版本。

类型
range410233.111

定义与用法

<input type="range"> 用于应该包含一定范围内的值的输入字段。

根据浏览器支持,输入字段能够显示为滑块控件。


验证方式

没有可用的模式验证。 但是,执行以下形式的自动验证:

  • 如果将 value 设置为无法转换为有效浮点数的值,则验证将失败,因为输入正遭受错误的输入。
  • 该值不得小于 min. 默认值为0。
  • 该值将不大于 max. 默认值为100。
  • 该值将是 step. 预设值为1。

其他属性

除了所有 <input> 元素共享的属性之外,范围输入还提供以下属性:

属性 描述
list <datalist>元素的ID,其中包含可选的预定义选项
max 最大允许值
min 最小允许值
step 步进间隔,用于用户界面和验证目的

分类导航