number类型的使用

最新推荐文章于 2022-05-24 15:28:32 发布

已转行@

最新推荐文章于 2022-05-24 15:28:32 发布

阅读量332

点赞数

分类专栏：从零学习HTML5 文章标签： html5 html

原文链接：https://www.ptpress.com.cn

版权

从零学习HTML5 专栏收录该内容

57 篇文章 13 订阅

订阅专栏

本文通过一个实例展示了如何使用HTML的input元素创建一个数字输入框，并设置了min、max和step属性进行限制。当输入值超过max属性设定的限制（20）时，会触发错误提示。这段代码演示了前端基本的表单验证，对于理解和应用HTML5的表单控件非常有帮助。

摘要由CSDN通过智能技术生成

将input元素的type属性设置为number类型，并且分别设置min、max和step属性的值。

效果图：

7-16

当文本框中输入“21”时，由于max属性值为“20”，所以将出现提示信息，如下图：

7-16-2

代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>number类型的使用</title>
</head>
<body>
	<form action="#" method="get">
		请输入数值：
		<input type="number" name="number1" value="1" min="1" max="20" step="4" /><br/>
		<input type="submit" value="提交" />
	</form>
</body>
</html>