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完成。这需要自己检查元素的有效性状态并明确设置(并清除)消息:

阅读剩余部分

相关阅读 >>

HTML5中使用mathml数学公式

HTML5 canvas画布详解(一)

HTML5新增了哪些标签

使用HTML5 canvas api中的clip()方法裁剪区域图像代码实例

h5history 模式的实例教程

介绍几个超炫酷的HTML5动画演示及源码的图文详解

HTML5的本地存储indexeddb

HTML5中indexeddb 数据库的相关介绍

字符编码是什么?HTML5如何设置字符编码?

介绍HTML5+canvas调用手机拍照功能实现图片上传(下篇)

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




打赏

取消

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

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

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

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

评论

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