热门关键字:
jquery > jquery教程 > jquery教程 > html5网页设计教程读书笔记

html5网页设计教程读书笔记

404
作者:管理员
发布时间:2021/7/17 17:53:40
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=5089
  这是补充HTML5基础知识的系列内容,其他为:


  在之前的笔记中记录了HTML5标签元素的语义以及新定义,本周开始进入Web表单部分的学习,该章节已经读过一遍,很多表单验证的工作都可以通过HTML5完成!现在整理笔记,再次进入Web表单的神奇地域。


  因该书出版较早,很多东西已经更改,我会在文中进行更正。


  一、表单验证


  无论是什么站点,只要存在表单元素,基本就少不了表单验证。在HTML4中,表单验证一般交由JavaScript来完成,到了HTML5,提供了多种表单验证方式。一般最常用的便是required属性。有了该属性,如果表单元素为空,则不能进入提交。


  二、HTML4输入类型


  在HTML5时代,HTML4的表单元素依然发挥着最为重要的力量,我们用到的大多数表单还是HTML4时的元素。


  三、HTML5新输入类型


  1、建立联系人表单


  联系人信息


  邮箱:


  电话:


  网址:


  上面我们使用了三个新的input类型收集用户信息,分别是email、tel和url。分别表示邮件、电话和网址。


  浏览器默认不对上述表单进行验证,必须加上required参数。


  1、input type="email"


  告诉浏览器,该输入域的内容为邮件格式。因各个浏览器的验证方式不同,给出的提示也不尽相同,比如上述相同的表单,在chrom v55上以及firefox上的提示分别如下:


  email类型表单只会验证邮件格式是否为aa@bb的格式,并不会判断该邮件地址是否存在。


  这样方便测试没有对表单设置样式,后面会有专门介绍。


  2、input type="tel"


  tel类型是一个普通的文本输入域,尽管现实中电话多为数字,但tel输入域能够接受任意字符(电话号码有时也包含非数字字符,比如+)。


  3、input type="url"


  在博客评论中常常看到输入网址的表单。在HTML5中,提交网址使用url类型表单更优雅。


  与email相同,该输入域只会校验输入的格式,不会确认有无该网址。




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐