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. Dart静态方法、对象操作符和类的继承

    /* Dart中的静态成员: 1.使用static 关键字来实现类级别的变量和函数 2.静态方法不能访问非静态成员,非静态方法可以访问静态成员 */ // class Person { // stat ...

  2. 单例模式以及Python实现

    单例模式以及Python实现 单例模式 单例模式就是确保一个类只有一个实例.当你希望整个系统中,某个类只有一个实例时,单例模式就派上了用场.比如,某个服务器的配置信息存在在一个文件中,客户端通过App ...

  3. 安装ORACLE服务出现Oracle Net Configuration Assistant 失败问题【我】

    安装ORACLE服务出现Oracle Net Configuration Assistant 失败问题 本地安装oracle11g,报错提示: 参考下面文章: 报错原因: 主要是对文件系统的访问权限问 ...

  4. 算法习题---4-7RAID技术(UV509)

    一:题目 (一)基础知识补充(RAID和奇偶校验) 磁盘管理—磁盘阵列(RAID)实例详解(本题目常用RAID 5技术实现) 奇偶校验(同行数据中同位上的1的个数,偶校验时:1的个数为偶数则校验结果为 ...

  5. Day2作业:购物商城

    ReadMe: 注意事项: 1.本程序需要提前安装prettytable模块,在商品展示时使用了prettytable 2.数据库使用json模块,有中文数据,在mac系统上编写,运行没有出现问题,在 ...

  6. CSS3 Transition 过渡

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动 ...

  7. 查找searching

    查找searching 在有序数列中查找某一个数据时候的算法设计 查找表的分类 静态查找表:只进行查找操作 动态查找表:不断的插入不存在,删除已存在 查找表的操作 查找.插入.删除 查找也叫检索,是根 ...

  8. springboot集成kaptcha验证码

    在pom.xml引入依赖 <!-- 验证码 --> <!-- https://mvnrepository.com/artifact/com.github.penggle/kaptch ...

  9. Appium移动自动化测试-----(二)安装 Android SDK

    安装Android SDK Android SDK(Software Development Kit,软件开发工具包)提供了 Android API 库和开发工具构建,测试和调试应用程序.简单来讲,A ...

  10. 2019暑期北航培训—预培训作业-IDE的安装与初步使用(Visual Studio版)

    这个作业属于那个课程 2019北航软件工程暑期师资培训 这个作业要求在哪里 预培训-IDE的安装与初步使用(Visual Studio版) 我在这个课程的目标是 提高自身实际项目实践能力,掌握帮助学生 ...