H5表单

HTML5 新的 Input 类型

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

本章全面介绍这些新的输入类型:

  • email
  • url
  • number
  • range
  • Date pickers (date, month, week, time, datetime, datetime-local)
  • search
  • color

浏览器支持

Input type

IE

Firefox

Opera

Chrome

Safari

email

No

4.0

9.0

10.0

No

url

No

4.0

9.0

10.0

No

number

No

No

9.0

7.0

No

range

No

No

9.0

4.0

4.0

Date pickers

No

No

9.0

10.0

No

search

No

4.0

11.0

10.0

No

color

No

No

11.0

No

No

注释:Opera 对新的输入类型的支持最好。不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持,仍然可以显示为常规的文本域。

Input 类型 - email

email 类型用于应该包含 e-mail 地址的输入域。

在提交表单时,会自动验证 email 域的值。

实例

E-mail: <input type="email" name="user_email" />

亲自试一试

提示:iPhone 中的 Safari 浏览器支持 email 输入类型,并通过改变触摸屏键盘来配合它(添加 @ 和 .com 选项)。

Input 类型 - url

url 类型用于应该包含 URL 地址的输入域。

在提交表单时,会自动验证 url 域的值。

实例

Homepage: <input type="url" name="user_url" />

亲自试一试

提示:iPhone 中的 Safari 浏览器支持 url 输入类型,并通过改变触摸屏键盘来配合它(添加 .com 选项)。

Input 类型 - number

number 类型用于应该包含数值的输入域。

您还能够设定对所接受的数字的限定:

实例

Points: <input type="number" name="points" min="1" max="10" />

亲自试一试

请使用下面的属性来规定对数字类型的限定:

属性

描述

max

number

规定允许的最大值

min

number

规定允许的最小值

step

number

规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)

value

number

规定默认值

请试一下带有所有限定属性的例子:亲自试一试

提示:iPhone 中的 Safari 浏览器支持 number 输入类型,并通过改变触摸屏键盘来配合它(显示数字)。

Input 类型 - range

range 类型用于应该包含一定范围内数字值的输入域。

range 类型显示为滑动条。

您还能够设定对所接受的数字的限定:

实例

<input type="range" name="points" min="1" max="10" />

亲自试一试

请使用下面的属性来规定对数字类型的限定:

属性

描述

max

number

规定允许的最大值

min

number

规定允许的最小值

step

number

规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)

value

number

规定默认值

Input 类型 - Date Pickers(日期选择器)

HTML5 拥有多个可供选取日期和时间的新输入类型:

  • date - 选取日、月、年
  • month - 选取月、年
  • week - 选取周和年
  • time - 选取时间(小时和分钟)
  • datetime - 选取时间、日、月、年(UTC 时间)
  • datetime-local - 选取时间、日、月、年(本地时间)

下面的例子允许您从日历中选取一个日期:

实例

Date: <input type="date" name="user_date" />

亲自试一试

输入类型 "month": 亲自试一试

输入类型 "week": 亲自试一试

输入类型 "time": 亲自试一试

输入类型 "datetime": 亲自试一试

输入类型 "datetime-local": 亲自试一试

Input 类型 - search

search 类型用于搜索域,比如站点搜索或 Google 搜索。

search 域显示为常规的文本域。

H5表单的更多相关文章

  1. 基于react hooks,zarm组件库配置开发h5表单页面

    最近使用React Hooks结合zarm组件库,基于js对象配置方式开发了大量的h5表单页面.大家都知道h5表单功能无非就是表单数据的收集,验证,提交,回显编辑,通常排列方式也是自上向下一行一列的方 ...

  2. H5 表单

    伴随着互联网富应用以及移动开发的兴起,传统的Web表单已经越来越不能满足开发的需求,HTML5在Web表单方向也做了很大的改进,如拾色器.日期/时间组件等,使表单处理更加高效. 1.1新增表单类型 - ...

  3. H5表单基础知识(二)

    表单新增属性 <!--<input type="text" class="name" />--> <!-- placeholder ...

  4. [H5表单]一些html5表单知识及EventUtil对象完善

    紧接着上面的文章,一开始准备一篇文章搞定,后来看到,要总结的东西还不少,干脆,把上面文章拆成两部分吧,这部分主要讲讲表单知识! 表单知识 1.Html5的autofocus属性. 有个这个属性,我们不 ...

  5. h5表单属性的介绍

    表单 type属性对应的属性值 text:代表文本框 案例:<input type="text" /> password:代表密码框 radio:单选框 checkbo ...

  6. H5: 表单验证失败的提示语

    前言     前端的童鞋在写页面时, 都不可避免的总会踩到表单验证这个坑. 这时候, 我们就要跪了, 因为要写一堆js来检查. 但是自从H5出现后, 很多常见的表达验证, 它都已经帮我们实现了, 让我 ...

  7. H5——表单验证新特性,注册模态框!

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. H5 表单元素

    HTML5 表单元素 HTML5 的新的表单元素: HTML5 拥有若干涉及表单的元素和属性. 本章介绍以下新的表单元素: datalist keygen output 浏览器支持 Input typ ...

  9. [H5表单]html5自带表单验证体验优化及提示气泡修改

    慕课网之前录制的视频,js/jquery各种宽高的理解和应用,最近终于上线了.还有一个html5左侧导航没有上线!最近慕课网系列课程让我录制一个html5表单验证的课程.今天就稍微说一下表单验证!另外 ...

随机推荐

  1. (一)Hololens Unity 开发环境搭建(Mac BOOTCAMP WIN10)

    (一)Hololens Unity 开发环境搭建(Mac BOOTCAMP WIN10) 系统要求 64位 Windows 10 除了家庭版的 都支持 ~ 64位CPU CPU至少是四核心以上~ 至少 ...

  2. MyBatis 源码分析——动态代理

    MyBatis框架是如何去执行SQL语句?相信不只是你们,笔者也想要知道是如何进行的.相信有上一章的引导大家都知道SqlSession接口的作用.当然默认情况下还是使用DefaultSqlSessio ...

  3. 【java设计模式】之 抽象工厂(Abstract Factory)模式

    1. 女娲的失误 上一节学习了工厂模式,女娲运用了该模式成功创建了三个人种,可是问题来了,她发现没有性别--这失误也忒大了点吧--竟然没有性别,那岂不是--无奈,只好抹掉重来了,于是所有人都被消灭掉了 ...

  4. maven常用命令介绍(持续更新)

    一.Maven的基本概念 主要服务于基于Java平台的项目构建,依赖管理和项目信息管理. 1.1.项目构建 项目构建过程包括[清理项目]→[编译项目]→[测试项目]→[生成测试报告]→[打包项目]→[ ...

  5. Quartz_理解1

    一.引言 quratz是目前最为成熟,使用最广泛的java任务调度框架,功能强大配置灵活.在企业应用中占重要地位.quratz在集群环境中的使用方式是每个企业级系统都要考虑的问题.早在2006年,在I ...

  6. synchronized的使用及注意事项

    主要来源:http://blog.csdn.net/luoweifu/article/details/46613015 1.synchronized(this) void method(){ sync ...

  7. asp.net core mvc剖析:KestrelServer

    KestrelServer是基于Libuv开发的高性能web服务器,那我们现在就来看一下它是如何工作的.在上一篇文章中提到了Program的Main方法,在这个方法里Build了一个WebHost,我 ...

  8. runtime ---- iOS

    1.runtime是什么?runtime是一套底层的C语言的API(包括C语言数据类型,C语言函数) 实际上平时我们写的OC代码底层都是基于runtime,实际上也就是最后都转成了runtime代码 ...

  9. block之---数据传递

    block值传递分为两种情况 1.值传递 含义: 类似于函数参数的值传递,block内部对值的改变对外部没有影响,外部改变对block内部也没有影响. 情况 block访问外部局部变量没有被任何关键字 ...

  10. Codeforces 506E Mr. Kitayuta's Gift (矩阵乘法,动态规划)

    描述: 给出一个单词,在单词中插入若干字符使其为回文串,求回文串的个数(|s|<=200,n<=10^9) 这道题超神奇,不可多得的一道好题 首先可以搞出一个dp[l][r][i]表示回文 ...