1.电子邮件

<input type="email" name="email"/>

默认正则:输入内容必须有@符号,@后面必须有内容

2.搜索框

<input type="search" name="search"/>

3.url地址

<input type="url" name="url"/>

默认正则:必须包含http:或者https:

4.电话号码

<input type="tel" name="tel"/>

5.数字

<input type="number" name="num" step="5" min="5" max="50"/>

默认正则:只能输入数字 ,会有步长,默认步长为1

6.color(调色盘)

<input type="color" name="color"/>

7.range(范围条)

<input type="range" name="range" min="0" max="10" step="2" value="10"/>

注意:

-范围类型:
min:最小值
max:最大值
step:步长
value:总长

8.日历date

<input type="date" name="date"/>

<input type="week" name="week"/>

<input type="time" name="time"/>

注意:实际开发中基本不用,因为丑

H5新增input标签的更多相关文章

  1. h5新增html标签语义

    H5新增常用标签<body> <header>...</header> <nav>...</nav> <article> < ...

  2. H5新增的标签和属性

    声明 Web 世界中存在许多不同的文档.只有了解文档的类型,浏览器才能正确地显示文档. HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML ...

  3. 08 H5新增input元素

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. H5新增的标签总结

    1:便于排版的Form表单 HTML5为了方便排版,可以使form的表单标签脱离form的嵌套. 方法:form指定id,所有的标签标签都添加form= id属性. 例如: <form acti ...

  5. HTML5新增input标签属性

    一. input type属性 <form action=""> 邮箱<input type="email" name="" ...

  6. H5新增input表单、表单属性

    新增表单 email,Email类型 url , Url类型 date,日期类型 time,时间类型 month,月类型 week,周类型 number,数字类型 tel,电话类型 search,搜索 ...

  7. H5新增的标签以及改良的标签

    1>OL标签的改良 start type  reversed:翻转排序 2>datalist标签自动补全的使用 3>progress标签的使用:进度条 4>meter标签的应用 ...

  8. H5 使用input标签上传图片给后台

    html代码: <div class="hpk-showimg"> <!-- 营业执照 --> <div class="idcardup&q ...

  9. h5新增标签及css3新增属性

    - h5新增的标签 新增元素 说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为vi ...

随机推荐

  1. linux非root用户安装jdk1.8

    如题,先到 Oracle 官方网站 下载1.8版本的 JDK 压缩包(jdk-8u221-linux-x64.tar.gz)到本地(如D盘的soft目录),然后开始进入linux的非root用户(如w ...

  2. VMware Workstation 将虚拟机挂起后,电脑会很卡,SCSI转换成IDE就可以了

    摘自:http://www.360doc.com/content/15/0405/09/10098873_460727712.shtml 用过 VMware Workstation 的人,不知道有没有 ...

  3. Qt编写自定义控件63-水波效果

    一.前言 几年前就一直考虑过写这个控件了,在9年前用C#的时候,就看到过别人用C#写了个水波效果的控件,挺好玩的,当时看了下代码用的二维数组来存储变换的图像像素数据,自从学了Qt以后,有过几次想要用Q ...

  4. if判断用法

  5. Laya的场景以及场景的加载

    参考: Laya项目发布详解 Laya2.0 内嵌模式.加载模式.分离模式.文件模式的场景加载创建和场景打开关闭 版本2.1.1.1 白鹭中的场景是exml制作,发布后exml代码都会打包到defau ...

  6. 转 zabbix 优化方法 以及 后台数据库查询方法 两则

    ############sample 1 https://blog.51cto.com/sfzhang88/1558254 如何从Zabbix数据库中获取监控数据 sfzhang关注6人评论40627 ...

  7. 转 oracle healthcheck

    ##sample 0 https://carlos-sierra.net/2013/11/01/a-healthy-way-to-do-an-oracle-database-health-check/ ...

  8. 在Spring+MyBatis组合中使用事务

     通过Spring和MyBatis的组合,给出一个较为详细的实例 代码清单:配置Spring+MyBatis测试环境 <?xml version='1.0' encoding='UTF-8' ? ...

  9. Newtonsoft.Json 方法使用()

    JSON.NET1.3.0,旧版本的json.net,使用Newtonsoft.Json.JavaScriptConvert.DeserializeObject类进行转换 如果是新版本的json.ne ...

  10. 3.WXML语法

    标签必须完全闭合 大小写敏感