html5实现表单的复选框验证


本文摘自PHP中文网,作者青灯夜游,侵删。

本篇文章给大家介绍html5实现表单的复选框验证,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

在之前的文章【JavaScript如何实现表单的复选框验证】中介绍了使用js实现表单的复选框验证的方法,本篇就在给大家介绍一种验证复选框的方法,使用html5来验证复选框。

一、html5验证复选框

向复选框添加HTML5验证实际上非常简单。您需要做的就是包含必需的属性:required

1

2

3

4

5

6

7

<form id="example1" method="POST" >

 

    <p><input id="field_terms" type="checkbox" required name="terms">

    <label for="field_terms">我接受 <u>条款和条件</u></label></p>

    <span><input type="submit"></span>

 

</form>

效果图:

2.gif

这告诉浏览器在不选中复选框的情况下不允许提交表单。一些(但不是全部)浏览器将识别并强制执行此操作。

HTML5表单验证的优点是它在我们调用JavaScript之前发生,显示指令并将用户指向相关元素。

文本警报消息完全是由浏览器生成,甚至可以自动转换为不同的语言,这是使用JavaScript几乎不可能做的。

HTML5表单验证优势在于,提示导致了问题的原因,并且不需要在点击的警报窗口。而且,警报文本我们也可以自定义。

二、自定义HTML5消息

我们可以使用自己定义的文本消息在浏览器上显示,但这只能通过JavaScript完成。这需要自己检查元素的有效性状态并明确设置(并清除)消息:

阅读剩余部分

相关阅读 >>

ichart-组件定制图形库图表/报表开发教程

HTML5音频与视频问题及解决方法

了解什么是HTML5

h5有哪些清空画布方法

HTML5 canvas平铺的代码详解

HTML5画布如何设置字体颜色?(代码示例)

h5开发视频遇到的问题及解决方案

HTML5中的progress元素的详细介绍及兼容性处理

HTML5的video标签操作视频详解

震惊!HTML5区块链游戏联盟成立,设立10亿级发展基金!

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...