减小字体
增大字体- ·上一篇内容：HTML中的密码输入框<input type="password">
- ·下一篇内容：<input type="range">
<input type="number">
在HTML中，input元素type属性值设置为number时，将创建一个数字输入控件，该控件允许用户输入一个数字。该控件自动拒绝非数字的字符输入。
数字控件定义基本格式
<input type="number" id="num1" name="num">type属性指定input元素的输入类型为number，即数字。
id属性用于标识控件，方便客户端脚本获取到该控件，以进行相关操作。
name属性定义控件的名称，可以用于客户端脚本获取到该控件，或提交表单后，服务器端脚本通过name属性值获取该控件的值。
其在谷歌浏览器和Edge浏览器中的默认显示形式如下图所示：
当鼠标停留在控件或控件获得焦点时，会在输入区右侧出现上下箭头的图标，用户点击上下箭头会增加或减少输入区的数字。
value属性
value属性为<input type="number">提供一个默认值，该值将显示在控件输入区域中，其格式如下：
<input type="number" id="num2" name="num" value="10">其在浏览器中的显示形式如下图所示：
max属性
max属性用于指定<input type="number">数字输入控件可输入的最大值。
max属性值如果输入的是非数字，则该属性将失效，即没有最大值限制。
如果为<input type="number">指定的value属性值超过了max属性设置的值，则该控件无法通过验证，表单将无法提交。
max属性值必须大于或等于min属性设置的值。
下例将max属性的值设置为100。
<input type="number" id="num3" name="num" max="100">当用户输入的值大于100时，在提交表单时，谷歌浏览器和Edge浏览器将给出下图所示的提示：
min属性
min属性用于指定<input type="number">控件可接受的最小值。
min属性值如果指定的是非数字，则该属性失效，即没有最小值限制。
如果为<input type="number">设置的value属性的值小于min属性设置的值，则该控件无法通过验证，表单无法提交。
如果同时指定min属性和max属性，则min属性的值必须小于或等于max属性的值。
下例将min属性的值设置为60.
<input type="number" id="num4" name="num" min="60">如果用户输入的值小于60，则在谷歌浏览器和Edge浏览器中提交表单时会给出下图所示的提示：
list属性
<input type="number">数字输入控件的list属性关联当前文档中<datalist>元素的id属性。<datalist>元素预定义了一些供用户选择输入的值。
<datalist>元素提供的值仅是根据某种规则预先设定的建议值，并非必需的值，用户也可以直接输入自己想输入的值。
同时，如果<datalist>元素提供的值不符合<input type="number">类型的值，用户也无法实现选择输入。
下例演示了list属性的一个用法，并特意安排了一个不符合要求的值。
<input type="number" id="num4" name="num" list="numlist">
<datalist id="numlist">
<option value="20">
<option value="30">
<option value="abc">
<option value="40">
<option value="50">
</datalist>
其在谷歌浏览器中，当控件获得焦点时，其显示效果如下图所示：
而在edge浏览器中，其形式与谷歌浏览器中稍有不同，下图是在edge浏览器中的显示效果：
step属性
step属性用于给出<input type="number">控件输入数字的间隔。
如未指定step属性，控件默认为1。
若<input type="number">定义了min属性，则以min属性的值为基本值进行调整，例如，min属性的值为10，step值为2的话，则控件可接受的值有：10，12，14,......
若<input type="number">定义了value属性值，则以value属性为基本值，可以往前或往后间隔step值的值都是可接受的值，例如指定value="10", step="2"的话，则......, -6,-4,-2,0,2,4,6,8,10,......都是控件有效可接受的值。
若<input type="number">定义了max属性值的话（未指定以上各属性），则以max属性值为基本值，往前每隔step值都是可接受的值，例如，指定max="10", step="2",则 ......,-4, -2, 0, 2, 4, 6, 8, 10都是合法有效的值。
如果未指定以上任何属性，在谷歌浏览器和edge浏览器中默认是从0开始。
下例演示了各种情况下的具体情形（各例均指定step="2")：
<p>未指定value、min和max：</p>
<p><input type="number" step="2"></p>
<p>指定value属性值为10：</p>
<p><input type="number" value="10" step="2"></p>
<p>指定min属性值为10：</p>
<p><input type="number" min="10" step="2"></p>
<p>指定max属性值为100：</p>
<p><input type="number" max="100" step="2"></p>
<p>指定value属性值为11，min属性值为10：</p>
<p><input type="number" min="10" value="11" step="2"></p>
<p>指定value属性值为11，max属性值为20：</p>
<p><input type="number" value="11" max="20" step="2"></p>未指定value、min和max：
指定value属性值为10：
指定min属性值为10：
指定max属性值为100：
指定value属性值为11，min属性值为10：
指定value属性值为11，max属性值为20：
允许<input type="number">输入小数
默认情况下，<input type="number">只允许输入整数，这个整数可以为0，为正数或负数，如果想输入小数的话，可以通过上面介绍的step属性来设置。
下例将step属性设置为0.01，则用户可以输入带两位小数的数字了。
<input type="number" name="num" value="1.23" step="0.01">其效果如下所示：
placeholder属性
控件的placeholder属性用于提示用户该控件输入的值含义、类型或范围。
placeholder属性一般应设置的简短且意义明了。且内容中不应有换行。
下例演示了placeholder属性的用法：
<input type="number" name="num" placeholder="请输入一个数字">其在谷歌浏览器中的显示效果如下图所示：
readonly属性
readonly属性是一个布尔值，若<input type="number">设置了readonly属性后，则用户不可直接编辑该控件的值。
当然用户借助客户端脚本仍然可以修改其值。
<input type="number" name="num" value="12" readonly>其效果如下：
required属性
required属性用于指定<input type="number">控件的值不能为空。
当用户在该控件中未输入任何值时，该控件则不能通过验证，表单无法提交，浏览器会给出一定的提示。
<input type="number" name="num" required>
当用户未输入任何值而提交表单时，在谷歌浏览器中会给出如下提示：
以上各例，读者可以点击这里在自己浏览器中查看效果。
相关阅读推荐：
<input type="submit"> | <input type="reset"> | <input type="button">
如对以上内容有疑问或文中有错误之处，请留言指出。如需转载，请注明出处：翔宇亭IT乐园（http://www.biye5u.com），并给出本文的链接地址：http://www.biye5u.com/article/html5/2023/6621.html。
微信搜索“优雅的代码”关注本站的公众号，或直接使用微信扫描下面二维码关注本站公众号，以获取最新内容。
个人成长离不开各位的关注，你的关注就是我继续前行的动力。
- 给好评 如果您觉得此内容好，就请您
100%(3) 
- 给差评 如果您觉得此内容差，就请您
0%(0) 