首页 理论教育 HTML5开发-数量类型

HTML5开发-数量类型

时间:2023-10-26 理论教育 版权反馈
【摘要】:在HTML 5中,“number”类型是用于设置包含数值的输入域。通过“number”类型能够对所接受的数字进行限定。在“number”类型的输入框中,用户不能输入其他非数字型的字符,并且当输入的数字大于设定的最大值或小于设置的最小值时,都将出现数字输入出错的提示信息。在本实例中创建了三个表单,创建了三个“number”类型的元素,分别用于输入日期中“年”“月”“日”的数字。

HTML5开发-数量类型

在HTML 5中,“number”类型是用于设置包含数值的输入域。通过“number”类型能够对所接受的数字进行限定。用户可以使用表4-1所示的属性来规定对数字类型的限定。

表4-1 number类型支持的属性

978-7-111-53392-4-Part02-152.jpg

在HTML 4以前的版本中,如果想要在表单中输入一个指定范围的整数,需要在表单提交前使用代码进行数据检测,以确定输入框中是否是一个符合要求的整数。而在HTML 5中,只要创建一个“number”类型的<input>元素,便可以实现以上操作。该类型的元素在HTML5中还将显示一个微调控件,如果指定了最大与最小范围值,就可以点击微调控件的上限与下限按钮,以指定的步长(step)增加或减少输入框中的值,极大方便了用户的操作。

在“number”类型的输入框中,用户不能输入其他非数字型的字符,并且当输入的数字大于设定的最大值或小于设置的最小值时,都将出现数字输入出错的提示信息。同样道理,该类型不进行输入内容是否为空值的自动检测。

下面通过一个实例讲解验证输入的数值是否合法的方法。

978-7-111-53392-4-Part02-153.jpg

在本实例中创建了三个表单,创建了三个“number”类型的<input>元素,分别用于输入日期中“年”“月”“日”的数字。同时,还新建一个表单的“提交”按钮。单击该按钮时会检测这三个输入框中的数字是否属于各自设置的整数范围,如果不符合则显示错误提示信息。(www.xing528.com)

实例文件3.html的代码如下。

978-7-111-53392-4-Part02-154.jpg

978-7-111-53392-4-Part02-155.jpg

在上述代码中,定义了三个“number”类型的<input>元素输入框,分别用于设置“mm”“max”“value”“step”属性值。其中“step”属性值表示步长值,默认值为1,表示当用户点击微调控件时,向上增加或向下减少的值。所有这些属性值都是可选项,如果不需要指定数字上限则可以省略“max”属性。

运行上述代码后,如果输入框微调控件中的数字不能向上调,则向上箭头按钮变灰,表示不可用,向下箭头则变为可用。反之向下箭头变为灰色,表示不可用,向上箭头则变为可用。执行效果如图4-3所示。

978-7-111-53392-4-Part02-156.jpg

图4-3 执行效果

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

我要反馈