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中的进度条progress元素简介及兼容性处理的示例代码

h5+c3+js实现楼层跳跃特效

h5调用相机拍照并压缩图片

html与HTML5有什么区别

h5的页面中怎样调用app功能

HTML5游戏框架cngamejs开发实录-资源加载模块代码详解

HTML5实现对话气泡点击动画

关于HTML5 input placeholder 的颜色修改

如何设置h5的表单验证失败提示语

HTML5让图片转圈的动画效果的实现方法介绍

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




打赏

取消

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

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

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

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

评论

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