<输入类型=“数字”>

在不支持类型输入的浏览器上数，一个数输入回退到类型文本.

表示输入数字值的数字。您可以通过在价值属性，如下所示：

<输入 身份证件="数" 类型="数" 价值="42" />

除了所有<输入>类型，输入类型数支持这些属性。

列表属性的值是身份证件的<数据列表>元素位于同一文档中。这个<数据列表>提供了一个预定义值列表，以建议用户进行此输入。列表中与不兼容的任何值类型不包括在建议的选项中。提供的值是建议，而不是要求：用户可以从这个预定义的列表中进行选择或提供不同的值。

此输入可接受的最大值。如果价值输入的元素超过此值，则元素失败约束验证。如果最大值属性不是数字，则该元素没有最大值。

此值必须大于或等于最小值属性。

此输入可接受的最小值。如果价值元素的值小于此值，则元素失败约束验证。如果为指定了值最小值这不是一个有效的数字，输入没有最小值。

此值必须小于或等于最大值属性。

这个占位符attribute是一个字符串，它向用户提供一个简短的提示，说明字段中应该包含什么类型的信息。它应该是一个单词或短句，以表明预期的数据类型，而不是一个解释性信息。文本不能包括回车或换行。

如果控件的内容有一个方向性(长期风险率或RTL公司)但需要以相反的方向显示占位符，可以使用Unicode双向算法格式化字符来覆盖占位符中的方向性；看见如何对bidi文本使用Unicode控件了解更多信息。

布尔属性，如果存在，则表示用户无法编辑此字段。它价值但是，仍然可以通过JavaScript代码直接设置HTML输入元素 价值属性。

这个步属性是一个数字，指定值必须遵循的粒度或特殊值任何，如下所述。仅限等于步进基础的值(最小值如有规定，价值否则，如果两者都没有提供，则使用适当的默认值）是有效的。

字符串值为任何表示不暗示步进，并且允许任何值（除非存在其他约束，例如最小值和最大值).

的默认步进值数输入是1，只允许输入整数-除非步进基数不是整数。

这个数输入类型应该只用于递增数字，尤其是当旋转按钮递增和递减有助于用户体验时。这个数输入类型不适合仅由数字组成但严格来说不是数字的值，例如许多国家的邮政编码或信用卡号码。对于非数字输入，请考虑使用不同的输入类型，例如<输入类型=“tel”>或其他<输入>使用键入输入模式属性：

<输入 类型="文本" 输入模式="数字" 图案="\d日*" />

<输入类型=“数字”>元素可以帮助简化您在构建用户界面和在表单中输入数字的逻辑时的工作类型值，数，您可以自动验证输入的文本是一个数字，并且通常有一组向上和向下按钮来向上和向下逐级调整值。

移动浏览器通过显示一个特别的键盘进一步帮助用户体验，当用户尝试输入值时，该键盘更适合输入数字。

在最基本的形式中，数字输入可以这样实现：

<标签 对于="ticketNum（票号）">您想购买的门票数量：</标签>
<输入 身份证件="ticketNum（票号）" 类型="数" 名称="ticketNum（票号）" 价值="0" />

当数字输入为空且输入了单个数字时，该数字输入被视为有效，但在其他情况下无效。如果必修的属性，则输入在为空时不再被视为有效。

有时，对于输入数据应该采用什么形式提供上下文内提示是很有帮助的。如果页面设计没有为每个页面提供描述性标签，那么这一点尤其重要<输入>。这就是占位符占位符是一个最常用的值，用于提示输入应采用的格式价值。当元素价值是""。数据输入框后，占位符消失；如果框被清空，占位符会重新出现。

给，我们有一个数用占位符输入“10的倍数“。请注意，在操作编辑字段的内容时，占位符是如何消失和重新出现的。

<输入 类型="数" 占位符="10的倍数" />

默认情况下，为您提供的向上和向下递增数字的按钮将使值向上和下递增1。您可以通过提供步属性，该属性的值为指定步长量的数字。我们上面的示例包含一个占位符，表示值应该是10的倍数，因此添加一个步的值10:

<输入 类型="数" 占位符="10的倍数" 步="10" />

在本例中，您应该会发现向上和向下阶梯箭头每次都会将值增加或减少10，而不是1。您仍然可以手动输入一个不是10的倍数的数字，但它将被视为无效。

您可以使用最小值和最大值属性指定字段可以具有的最小值和最大值。例如，让我们给我们的示例一个最小值0，最大值为100:

<输入 类型="数" 占位符="10的倍数" 步="10" 最小值="0" 最大值="100" />

在这个更新版本中，您应该会发现上下步按钮不允许您低于0或高于100。您仍然可以手动输入超出这些边界的数字，但它将被视为无效。

数字输入的一个问题是，它们的步长默认为1。如果您尝试输入带小数的数字（例如“1.0”），它将被视为无效。如果要输入需要小数的值，则需要在步值（例如。步骤=“0.01”允许小数到小数点后两位）。下面是一个简单的示例：

<输入 类型="数" 占位符="1" 步="0.01" 最小值="0" 最大值="10" />

请注意，此示例允许在0和10，小数到两位。例如，“9.52”有效，但“9.521”无效。

<输入>类型的元素数不支持表单大小调整属性，例如大小.你必须求助于CSS公司以更改这些控件的大小。

例如，要将输入的宽度调整为只需输入三位数所需的宽度，我们可以更改HTML以包含身份证件以及缩短占位符，因为字段对于我们目前使用的文本来说太窄了：

<输入
  类型="数"
  占位符="x10个"
  步="10"
  最小值="0"
  最大值="100"
  身份证件="数" />

然后我们添加一些CSS来缩小元素的宽度身份证件选择器#数字:

#数字 {
  宽度:3个;
}

结果如下：

您可以提供默认选项列表，用户可以通过指定列表属性，其值包含身份证件的<数据列表>，其中又包含一个<选项>每个建议值的元素。每个选项的价值是数字输入框的相应建议值。

<输入 身份证件="ticketNum（票号）" 类型="数" 名称="ticketNum（票号）" 列表="默认数字" />
<跨度 班="有效性"></跨度>

<控件 身份证件="默认数字">
  <选项 价值="10045678"></选项>
  <选项 价值="103421"></选项>
  <选项 价值="11111111"></选项>
  <选项 价值="12345678"></选项>
  <选项 价值="12999922"></选项>
</控件>

我们已经提到了一些验证功能数输入，但现在让我们回顾一下：

• <输入类型=“数字”>元素会自动使任何不是数字（或为空，除非必修的）。
• 您可以使用必修的属性使空条目无效。（换句话说，输入必须填写。）
• 您可以使用步属性将有效值约束到特定的步骤集（例如，10的倍数）。
• 您可以使用最小值和最大值属性将有效值约束到下限和上限。

下面的示例展示了上述所有功能，并根据输入的值：

<形式>
  <分区>
    <标签 对于="气球">要订购的引出序号数量（10的倍数）：</标签>
    <输入
      身份证件="气球"
      类型="数"
      名称="气球"
      步="10"
      最小值="0"
      最大值="100"
      必修的 />
    <跨度 班="有效性"></跨度>
  </分区>
  <分区>
    <输入 类型="提交" />
  </分区>
</形式>

尝试提交输入了不同无效值的表单，例如，没有值；值小于0或大于100；不是10的倍数的值；或非数值，并查看浏览器提供的错误消息在不同情况下的差异。

应用于此示例的CSS如下：

分区 {
  边缘-底部:10像素;
}

输入：无效+span:：之后 {
  内容: "✖";
  向左填充:5像素;
}

输入：有效+span:：之后 {
  内容: "✓";
  向左填充:5像素;
}

这里我们使用：无效和：有效伪类，将适当的无效或有效图标作为生成的内容显示在相邻的<span>元素，作为有效性的视觉指示器。

我们把它放在一个单独的<span>元素以增加灵活性。有些浏览器在某些类型的表单输入上无法非常有效地显示生成的内容。（例如，阅读关于<输入类型=“date”>验证.)

<输入类型=“数字”>元素不支持使用图案用于使输入的值符合特定正则表达式模式的属性。

这样做的理由是，如果数字输入包含除数字以外的任何内容，那么它们将无效，您可以使用最小值和最大值属性（如上所述）。

隐式角色对于<输入类型=“数字”>元素是旋转按钮。如果自旋按钮不是表单控件的重要功能，请考虑不使用type=“数字”。相反，使用inputmode=“numeric”以及图案将字符限制为数字和关联字符的属性。使用<输入类型=“数字”>，当用户尝试执行其他操作时，可能会意外增加数字。此外，如果用户试图输入非数字的内容，则不会明确反馈他们做错了什么。

还可以考虑使用自动完成属性帮助用户更快地完成表单，并减少出错的可能性。例如，要在邮政编码字段上启用自动填充，请设置autocomplete=“邮政编码”.

我们已经介绍了一个事实，默认情况下，增量为1，您可以使用步属性以允许十进制输入。让我们仔细看看。

在下面的示例中，是一个用于输入用户身高的表单。它默认接受以米为单位的高度，但您可以单击相关按钮将表单更改为接受英尺和英寸。高度（以米为单位）的输入接受两位小数。

HTML如下所示：

<形式>
  <分区 班="仪表输入组">
    <标签 对于="米">输入您的身高-米：</标签>
    <输入
      身份证件="米"
      类型="数"
      名称="米"
      步="0.01"
      最小值="0"
      占位符="例如1.78"
      必修的 />
    <跨度 班="有效性"></跨度>
  </分区>
  <分区 班="英尺输入组" 风格="显示:没有人;">
    <跨度>输入您的身高-</跨度>
    <标签 对于="脚">脚：</标签>
    <输入 身份证件="脚" 类型="数" 名称="脚" 最小值="0" 步="1" />
    <跨度 班="有效性"></跨度>
    <标签 对于="英寸">英寸：</标签>
    <输入 身份证件="英寸" 类型="数" 名称="英寸" 最小值="0" 最大值="11" 步="1" />
    <跨度 班="有效性"></跨度>
  </分区>
  <分区>
    <输入
      类型="按钮"
      班="米"
      价值="输入高度（英尺和英寸）" />
  </分区>
  <分区>
    <输入 类型="提交" 价值="提交表单" />
  </分区>
</形式>

您将看到，我们正在使用本文前面介绍过的许多属性步值为0.01，因此值如下1.78不被视为无效。我们还为该输入提供了占位符。

我们最初使用隐藏英尺和英寸输入style=“display:none；”，因此仪表是默认的条目类型。

现在，讨论CSS。这看起来与我们之前看到的验证样式非常相似；这里没什么特别的。

分区 {
  边缘-底部:10像素;
  位置:相对的;
}

输入[类型=“数字”] {
  宽度:100像素;
}

输入+span {
  右边距:30像素;
}

输入：无效的+span:：之后 {
  位置:绝对的;
  内容: "✖";
  向左填充:5像素;
}

输入：有效+span:：之后 {
  位置:绝对的;
  内容: "✓";
  向左填充:5像素;
}

最后，JavaScript：

常量仪表输入组=文件.查询选择器(“.metersInputGroup”);
常量英尺输入组=文件.查询选择器(“.feetInputGroup”);
常量仪表输入=文件.查询选择器(“#米”);
常量feet输入=文件.查询选择器(“#英尺”);
常量英寸输入=文件.查询选择器(“#英寸”);
常量开关Btn=文件.查询选择器('输入[type=“button”]');开关Btn.添加事件侦听器(“单击”, () => {
  如果 (开关Btn.获取属性(“类”) === “米”) {开关Btn.setAttribute（设置属性）(“类”, “英尺”);开关Btn.价值= “输入高度（米）”;仪表输入组.风格.显示= “无”;英尺输入组.风格.显示= “块”;feet输入.setAttribute（设置属性）(“必需”, "");英寸输入.setAttribute（设置属性）(“必需”, "");仪表输入.删除属性(“必需”);仪表输入.价值= "";
  } 其他的 {开关Btn.setAttribute（设置属性）(“类”, “米”);开关Btn.价值= “以英尺和英寸为单位输入高度”;仪表输入组.风格.显示= “块”;英尺输入组.风格.显示= “无”;英尺输入.删除属性(“必需”);英寸输入.删除属性(“必需”);仪表输入.setAttribute（设置属性）(“必需”, "");英尺输入.价值= "";英寸输入.价值= "";
  }
});

声明几个变量后，将向按钮控制切换机制。这很简单，主要涉及更改按钮班和<标签>，并在按下按钮时更新两组输入的显示值。

（请注意，我们并没有在米和英尺/英寸之间来回转换，而实际的web应用程序可能会这样做。）

• HTML表单指南
• <输入>
• <输入类型=“tel”>
• CSS属性的兼容性
• 文章：英国政府为什么更改数字的输入类型