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. eclipse默认指向WebContent目录修改为webRoot 设置说明【也适用于Eclipse启动MyEclipse项目】

    转: eclipse默认指向WebContent目录修改为webRoot 设置说明 2014-07-02 17:42:58 落叶上的秋 阅读数 8618更多 分类专栏: Eclipse 问题   l  ...

  2. Spring 中使用了哪些设计模式?

    好了,话不多说,开始今天的内容.spring中常用的设计模式达到九种,我们举例说明. 1.简单工厂模式 又叫做静态工厂方法(StaticFactory Method)模式,但不属于23种GOF设计模式 ...

  3. Python记录-基础语法入门

    # -*- coding: utf-8 -*- #数字计算 a=1 b=2 print(a+b) print(a*b) print((a+b)/1) #浮点数 print((a+b)//2) ##保留 ...

  4. c# 子线程与主线程通信二

    之前写过使用线程上下文实现线程同步,今天利用子线程向主线程发送事件,实现子线程与主线程的同步 基本步骤 1.定义类 using System; using System.Collections.Gen ...

  5. WXS---基础类库

  6. Python 机器学习库 NumPy 教程

    0 Numpy简单介绍 Numpy是Python的一个科学计算的库,提供了矩阵运算的功能,其一般与Scipy.matplotlib一起使用.其实,list已经提供了类似于矩阵的表示形式,不过numpy ...

  7. kafka那些事儿

    1 为什么用消息队列 1)解耦.服务之间没有强依赖,不需要关心调用服务时出现的各种异常,服务挂掉后接口超时等问题 2)异步.解决接口调用多服务时延时高的问题 3)高峰期服务间缓冲.解决工作节奏不一致问 ...

  8. box-shadow 用法总结

    一.基础知识 box-shadow 属性向框添加一个或多个阴影. 语法 box-shadow: offset-x offset-y blur spread color inset; box-shado ...

  9. 记一次EFCore类型转换错误及解决方案

    一  背景 今天在使用EntityFrameworkCore 查询的时候在调试的时候总是提示如下错误:Unable to cast object of type 'System.Data.SqlTyp ...

  10. ABP中的本地化处理(下)

    在上篇文章中我们的重点是讲述怎样通过在Domain层通过PreInitialize()配置ILocalizationConfiguration中的Sources(IList<ILocalizat ...