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. 007-guava 缓存

    一.概述 Guava Cache与ConcurrentMap很相似,但也不完全一样.最基本的区别是ConcurrentMap会一直保存所有添加的元素,直到显式地移除.相对地,Guava Cache为了 ...

  2. ES6深入浅出-9 Promise-3.Promise的细节

    await 拿到用户信息,函数前面加await await等待Promise成功或者失败. 如果Promise里面失败了 什么也拿不到.报了一个错误,叫做不认识. 如果想拿到正常错误,就绪try一下 ...

  3. Laya的动画制作,整图动画,序列图动画,时间轴动画,龙骨动画

    参考: Laya动画基础 Egret帧动画工具类 版本:2.1.1.1 序列图动画 白鹭的序列图动画,使用TexureMerger合图,然后使用MovieClip类播放. Laya的话,使用图集打包工 ...

  4. PL-SQL Developer 配置使用Oracle客户端连接

    没有在本地安装Oracle 的用户必须下载一个instantclient(即使客户端), 路径指向这里,才能正常使用 下载 instantclient-basic-nt-11.2.0.3.0.zip ...

  5. HR数据分析常用的50个公式

    HR数据分析常用的50个公式 HR经常需要和数据打交道,如入职率.离职率.加班费计算等.虽然日常工作中,单个数据的计算并不麻烦,但几十上百个累计在一起,确实很容易混淆,甚至计算失误.今天小编急HR之所 ...

  6. centos/Fedora/RHEL 安全设置

    centos/Fedora/RHEL •     整改方法: •     验证检查:  1.查看/etc/login.defs,访谈询问当前所设置的密码长度及更换周期:  2.查看/etc/pam.d ...

  7. 对偶传播神经网络(CPN)

    1987年,美国学者Robert Hecht-Nielsen提出了对偶传播神经网络模型 (Counter Propagation Network,CPN),CPN最早是用来实现样本选择匹配系统的.CP ...

  8. MySQL的join on和 where 的执行顺序和区别,以及各种连接说明

    目录 1.各种连接的解读说明: 1.1.各种连接的含义和说明 1.1.1 所有连接分类 1.1.2 left join 和 left outer join 区别 1.2.神图参考 1.4.一些参考说明 ...

  9. python glob删除目录下的文件

    使用glob匹配目录下的文件 import os import glob path="./" for infile in glob.glob(os.path.join(path,& ...

  10. 通用mybatis单表操作接口

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "- ...