专栏首页DeveWork为WordPress 评论框添加HTML5 表单验证

为WordPress 评论框添加HTML5 表单验证

WordPress 中最常用到的表单莫过于评论框了,但现在不少的WordPress 主题(包括WordPress官方的主题),其表单验证其实是借助javascript 甚至php来的。因此,访客常常是要点击“提交评论”按钮,然后跳转到错误提示页面才知道哪里写的不够规范。这么来说,用户体验不怎么好。借助HTML5 的表单验证,我们可以轻松解决这个问题,让UE 更上一层楼。

HTML5新的表单特性

  • email
  • url
  • number
  • range
  • Date pickers (date, month, week, time, datetime, datetime-local)
  • search
  • color

两个特殊的验证熟悉

required属性——浏览器会自动验证用户是否输入了该字段,如果不输入无法提交表单;

placeholder属性——可以给表单一段默认的文字,对用户进行提示,获得焦点的时候不会消失,当用户开始输入内容时会自动消失;

对于WordPress 的话,评论框中需要用到email与url(对应电子邮箱,网站)。结合required属性、placeholder属性,原来的代码应该修改为类似如下:

<input type="text" name="author" id="author" value="xxxx" tabindex="1" placeholder="昵称" required /> <input type="email" name="email" id="email" value="xxxx" tabindex="2" placeholder="邮箱" required/>

如果浏览器支持HTML5,那么访客如果不正常输入相关内容就提交表单,浏览器(图示为chrome浏览器)会如下图提示:

没有输入必填项:

邮箱输入错误:

地址输入错误:

实际效果可在下面的评论框进行测试。

立马高端大气上档次有木有!不过要浏览器支持html5才行,某IE 就不用考虑了。

本文部分内容参考:w3school中文版;《HTML5开发实例大全》

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 修改WordPress登陆文件名wp-login.php,防密码被暴力破解

    最近WordPress界出了条新闻:博客平台Wordpress网站遭遇大规模暴力破解攻击(原文附后)。看到这条消息,我立马到空间后台查看了下,发现确实是有很多来...

    Jeff
  • 移除 WordPress 后台插件管理的“编辑”与“停用”功能

    出于某些目的(如多用户博客防止一些小白乱搞),需要禁止(删除/移除)WordPress后台插件管理的 “编辑” 与 “停用” 功能,具体是WordPress 后...

    Jeff
  • WordPress中添加自定义评论表情包的方法(附三套表情包下载)

    如果你知道的话,WordPress中的默认评论表情是非常丑陋的。难听点,如果一个不错的主题调用的是WordPress默认的表情包,那么这就成了这个主题的败笔。J...

    Jeff
  • [Python运维]使用cx_Oracle连接Oracle(基础篇)

    这个专题讲解Python相关方面的内容,首先是运维方面,例如数据库,Linux等,后续会有Web,爬虫等。

    bsbforever
  • Jenkins2 学习系列21 -- 通过JNLP协议添加Slave节点

    Java 网络启动协议(JNLP) 是一种允许客户端启动托管在远程Web服务器上的应用程序的协议。 通过 JNLP 协议增加 agent 比较简单,步骤如下:

    mafeifan
  • 读Zepto源码之Stack模块

    Stack 模块为 Zepto 添加了 addSelf 和 end 方法。 读 Zepto 源码系列文章已经放到了github上,欢迎star: reading...

    对角另一面
  • APT这件事,美国现在有点慌...

    6月28日,美国众议院外交事务委员会通过“2018网络威慑与响应法案”(H. R. 5576),要求美国总统确认高级持续威胁(APT)组织名单,并在《联邦公报》...

    安恒信息
  • python变量

    以上实例,两个整型对象1和2的分配给变量 a 和 b,字符串对象 "john" 分配给变量 c。

    py3study
  • 关于数组的前端面试题,你是否都能答对?

    用户1687375
  • Linux磁盘操作

    院长技术

扫码关注云+社区

领取腾讯云代金券