跳到主要内容

数字控件

number 类型如何限制取值范围?​

  • min/max: 允许的最小值与最大值;
  • step: 每次增减的步长;
  • value: 初始值;
<input type="number" name="age" id="age" min="1" max="10" step="2" value="1" />

range 类型如何做滑动选择?​

  • 形态: 滑动器, 在区间内拖动取值;
  • 属性: 同样使用 min/max/step/value;
<input type="range" name="price" id="price" min="50000" max="500000" step="100" value="250000" />

range 的当前值如何反馈给用户?​

  • 问题: 滑动条本身不显示具体数值;
  • 做法: 配 output 元素, 用 for 关联该控件;
  • output 用法见 表单元素;
<output class="price-output" for="price">视觉反馈</output>