首页 > Web开发 > 详细

HTML5表单

时间:2019-05-15 15:44:22      阅读:150      评论:0      收藏:0      [点我收藏+]

                                          HTML5新增表单控件和表单属性

一、Forms:新的输入型控件;

 1.(1)email:电子邮箱文本框,跟普通的没区别;

     技术分享图片

      技术分享图片

   当输入的不是邮箱的时候,验证不通过

    移动端的键盘会有变化

 (2)Tel:电话号码

    tel的功能主要在移动端上,一个键盘的切换

 (3)url网页的URL 网址

    技术分享图片

     技术分享图片

 (4)search 搜索引擎

    chrome下输入文字后,会多出一个关闭的×;

    技术分享图片

    技术分享图片

 (5)range 特定范围内的数值选择器;      

     min max step(步数)

   技术分享图片

    技术分享图片

 (6)number 只能包含数字的输入框;

   技术分享图片

  技术分享图片

 (7)color 颜色选择器;

   技术分享图片

   技术分享图片

 (8)datetime 显示完整日期(opera浏览器下起作用)

    chrome浏览器下:date

    技术分享图片 

   技术分享图片

 (9)datetime-local:显示完整日期,不含时区;

   技术分享图片

 (10)time 显示时间,不含时区

 (11)date:显示日期

 (12)week:显示周

 (13)month:显示月

 2.新的表单特性和函数

  (1)placeholder:输入框提示信息;

   技术分享图片

   技术分享图片

  (2)autocomplete:是否保存用户输入值(默认为on,关闭提示选择off)

   技术分享图片

  (3)autofocus:指定表单获取输入焦点

   技术分享图片

     技术分享图片

  (4)required:此项必填,不能为空

    技术分享图片

    技术分享图片

  (5)pattern:正则验证 pattern="\d{1.5}"

    技术分享图片

      技术分享图片

  (6)formaction 在submit里定义提交地址(只在Opera浏览器下有作用)

  (7)表单验证:validity对象,通过下面的valid可以查看验证是否通过,如果八种验证都通过返回true,一种验证失败返回false;

      -oText.addEventListener("invalid",fn1,false)

 

HTML5表单

原文:https://www.cnblogs.com/yuanjingjing/p/10868366.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!