HTML5 – 数字类型

HTML5中引入了一些新的数字类型，这使得我们在表单中获取用户输入更加方便和准确。本文将介绍HTML5中的数字类型，以及如何在HTML中使用这些类型。

HTML5数字类型

HTML5中有三种新的数字类型：number、range和step. 除了number之外，这些类型与进度条有关，下面分别介绍。

number

number类型表示一个浮点数或整型数值。用户可以在表单中输入任意数字，浏览器将自动验证输入是否为数字。

<label for="number-input">输入数字：</label>
<input type="number" id="number-input" name="number-input" min="0" max="100" step="5">

在上面的示例中，min和max属性分别限制了输入的最小值和最大值。step属性规定了该数字的递增步长。

range

range类型表示一个用户可以拖动的滑块，用来选择一个值的范围。可以将这个类型视为number类型的进阶版。

<label for="range-input">选择范围：</label>
<input type="range" id="range-input" name="range-input" min="0" max="100" step="5">

上面的示例中，min和max属性同样限制了滑块的可选范围，而step属性规定了滑块的移动跨步。

step

step类型表示一个表示数字的步骤，它是number类型的一种辅助类型。

<label for="step-input">每次递增5：</label>
<input type="step" id="step-input" name="step-input" value="0" step="5">

在上面的示例中，value属性定义了初始值，而step属性规定了每次递增的步长。

如何使用数字类型

将数字类型用于表单中的输入框时，需要设置type属性为对应的值。同时，可以设置以下属性：

min：设置输入框可输入的最小值
max：设置输入框可输入的最大值
step：设置输入框每次递增或递减的跨度
value：设置输入框的默认值

下面是一个实际的例子，展示如何使用数字类型：

<form>
  <label for="age">请输入年龄：</label>
  <input type="number" id="age" name="age" min="0" max="120" step="1" value="20">
  <br>
  <label for="score">请输入分数：</label>
  <input type="range" id="score" name="score" min="0" max="100" step="10">
  <br>
  <label for="increment">请输入递增步长：</label>
  <input type="step" id="increment" name="increment" value="0" step="5">
</form>