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. TypeScript泛型类 - 把类作为参数类型的泛型类

    /* TypeScript泛型类 - 把类作为参数类型的泛型类 */ /* 泛类:泛型可以帮助我们避免重复的代码以及对不特定数据类型的支持(类型校验),下面我们看看把类当做参数的泛型类 1.定义个类 ...

  2. 如何解决Access操作或事件已被禁用模式阻止

    操作或事件已被禁用模式阻止.本来是Access安全设置的一部分,可以防止一些危险性的宏自动运行损坏数据,但是如果是自己在设计或是修改Access数据库的时候,这个就比较烦人了,一次次的提示,每次都需要 ...

  3. gen语言

    概率编程语言(PPL)领域正经历着机器学习技术快速发展带来的奇迹般的复兴.在短短的几年里,PPL 已经从一个模糊的统计研究领域发展出十几个活跃的开源方案.最近,麻省理工学院(MIT)的研究人员推出了一 ...

  4. Dockerfile构建nginx镜像

    Dockerfile构建nginx镜像 [root@bogon ~]# mkdir /opt/docker-file [root@bogon ~]# cd /opt/docker-file/ [roo ...

  5. DevOps - 配置管理工具Ansible

    1 - 配置管理工具 配置管理工具(SCM,Software Configuration Management)可以将代码.软件方式实现的基础设施配置信息保存,也可以根据需求变化反复进行变更. 相关工 ...

  6. docker 在 centos7.* 上的部署及问题解决

    最近尝试搭建docker 环境,其实个人是比较喜欢“菜鸟学习系列”的知识的,怎奈它的讲解是以Ubuntu为主的,最后找到一个搭建学习系列,感觉写的很好,主要是页面风格清晰明了,遂决定按照此教程学习搭建 ...

  7. 微信小程序实战,与后台交互

    index.wxml <view class="container"> <text>{{txt}}</text> <input name= ...

  8. Java IO把一个文件中的内容以字符串的形式读出来

    代码记录(备查): /** * 把一个文件中的内容以字符串的形式读出来 * * @author zhipengs * */ public class FileToString { public sta ...

  9. 【JS】逻辑处理

    1.计算会员进度 const a = res.data.directCount(当前充值点券) / nextLevelData.map(item => item.direct_number(下一 ...

  10. ubuntu下安装amqp扩展

    目录 环境 下载扩展: 安装amqp: 验证 环境 系统 ubuntu 16.04 php 7.1 下载扩展: sudo apt-get -y install gcc make autoconf li ...