HTML5 input 类型 range
<input> range 类型的元素允许用户指定一个数值,该数值必须不小于给定值,并且不得大于另一个给定值。但是,精确值并不重要。通常使用滑块或拨号控件而不是像 number 输入类型这样的文本输入框来表示。
实例
<!DOCTYPE html>
<html>
<body>
<p>
根据浏览器支持:<br>
输入类型 "range" 可显示为滑动控件。
</p>
<form action="/example/html/action_page.aspx" method="get">
Points:
<input type="range" name="points" min="0" max="10">
<input type="submit">
</form>
<p><b>注释:</b>IE9 及早期版本不支持 type="range"。</p>
</body>
</html>
浏览器支持
表格中的数字注明了完全支持该选择器的首个浏览器版本。
类型 | |||||
---|---|---|---|---|---|
range | 4 | 10 | 23 | 3.1 | 11 |
定义与用法
<input type="range"> 用于应该包含一定范围内的值的输入字段。
根据浏览器支持,输入字段能够显示为滑块控件。
验证方式
没有可用的模式验证。 但是,执行以下形式的自动验证:
- 如果将 value 设置为无法转换为有效浮点数的值,则验证将失败,因为输入正遭受错误的输入。
- 该值不得小于 min. 默认值为0。
- 该值将不大于 max. 默认值为100。
- 该值将是 step. 预设值为1。
其他属性
除了所有 <input> 元素共享的属性之外,范围输入还提供以下属性:
属性 | 描述 |
---|---|
list | <datalist>元素的ID,其中包含可选的预定义选项 |
max | 最大允许值 |
min | 最小允许值 |
step | 步进间隔,用于用户界面和验证目的 |