HTML5技术

捣鼓HTML5之表单

字号+ 作者: 来源:CSDN    2014-11-17 18:29 我要评论( )

想当初,刚初学web的时候,做表单需要做些验证,如:email、数字、日期等表单验证。那时菜鸟的我感觉很蛋疼。 现在捣鼓的HTML5,哎哟还不错哦。表单验证很简单,在标签加个属性就搞定,不会javascript的童靴门有救了。呵呵。。。 HTML5提供表单的新属性有:

  想当初,刚初学web的时候,做表单需要做些验证,如:email、数字、日期等表单验证。那时菜鸟的我感觉很蛋疼。

  现在捣鼓的HTML5,哎哟还不错哦。表单验证很简单,在标签加个属性就搞定,不会javascript的童靴门有救了。呵呵。。。

  HTML5提供表单的新属性有:email、url、number、range、Date pickers (date, month, week, time, datetime, datetime-local)、search、color

 

  (1) email 验证

  1. E-mail: <input type="email" name="user_email" /> 

  

\

  (2) Url 验证 

  1. Url: <input type="url" name="user_url" /><br> 

  

\

  (3) number 验证 

  1. 只能输入1到10的数字: <input type="number" name="points" min="1" max="10" /> 

  

\

  (4) range 

  1. 一定数字范围的滑动条 : <input type="range" name="points" min="1" max="10" /> 

  

\

  (5)Date Pickers

  HTML5 拥有多个可供选取日期和时间的新输入类型:

  date - 选取日、月、年

  month - 选取月、年

  week - 选取周和年

  time - 选取时间(小时和分钟)

  datetime - 选取时间、日、月、年(UTC 时间)

  datetime-local - 选取时间、日、月、年(本地时间) 

  1. Date: <input type="date" name="user_date" /> 

  

\

  体验了一把以后,觉得HTML5不仅方便了用户,更方便了开放者。至于在表单这一块还是蛮人性化的,赞一个!!!

  注 : 测试用的是 谷歌chrome(13.0.782.215 ) 浏览器.

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 前端识别验证码思路分析 - 腾讯云技术社区

    前端识别验证码思路分析 - 腾讯云技术社区

    2017-03-30 10:00

  • angularjs+ionic注册页面表单验证(手机号、确认密码、60s后重发验证码) - Ruoyu

    angularjs+ionic注册页面表单验证(手机号、确认密码、60s后重发验证

    2017-03-04 10:01

  • Jquery实现的几款漂亮的时间轴 - 一个北漂的女孩

    Jquery实现的几款漂亮的时间轴 - 一个北漂的女孩

    2017-01-23 10:03

  • MVC伪一个12306图片验证码 - 神牛步行3

    MVC伪一个12306图片验证码 - 神牛步行3

    2017-01-18 12:03

网友点评
0