HTML5 Input 类型

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 域显示为常规的文本域。

HTML5 总结-表单-输入类型的更多相关文章

  1. HTML5之表单新增类型介绍

    1.html5的input标签的type类型新增介绍: 2.表单新增属性介绍: 3.代码示例: <!doctype html> <html> <head></ ...

  2. yii表单输入元素

    InputElement http://www.yiichina.com/api/CFormInputElement CFormInputElement 可以代表以下基于type属性的表单输入类型: ...

  3. HTML5 智能表单

    HTML5 智能表单 1.表单新增属性  ☀ autofocus 属性 <input type="text" autofocus/>设置 autofocus 属性,使文 ...

  4. HTML5智能表单

    HTML5 智能表单 1.表单新增属性  ☀ autofocus 属性 <input type="text" autofocus/>设置 autofocus 属性,使文 ...

  5. 前端MVC Vue2学习总结(五)——表单输入绑定、组件

    一.表单输入绑定 1.1.基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖, ...

  6. 精美的HTML5/CSS3表单 带小图标

    今天我们要来分享一款非常精美的HTML5/CSS3表单,准备地说,这是一款经过美化的input输入表单,每一个输入表单都可以定义其两侧的小图标,非常华丽.另外,这款表单应用还采用了3种不同的风格主题, ...

  7. Vue.js教程--基础2(事件处理 表单输入绑定

    事件处理 表单输入绑定 事件处理 监听v-on 监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 可以在v-on:click=''加内联语句. 有时也需要在内联语句处理器中访问原始 ...

  8. Vue学习计划基础笔记(五) - 表单输入绑定、组件基础

    表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...

  9. Vue基础-自定义事件的表单输入组件、自定义组件的 v-model

    Vue 测试版本:Vue.js v2.5.13 学习 Vue 的自定义事件的表单输入组件,觉得文档讲的不太细致,所以这里再细化一下: 如果不用 v-model,代码应该是这样: <myinput ...

随机推荐

  1. 深入浅出Mybatis系列(八)---mapper映射文件配置之select、resultMap good

    上篇<深入浅出Mybatis系列(七)---mapper映射文件配置之insert.update.delete>介绍了insert.update.delete的用法,本篇将介绍select ...

  2. [置顶] SpecDD(混合的敏捷方法模型)主要过程概述

    敏捷已成为当今使用最广泛的开发方法.有趣的是,敏捷方法的流行性并不是因为它取代了其他开发方法,相反它与这些方法进行了更好地融合.现实世界众多敏捷项目的成功,也证明了敏捷将走向杂化的未来. SpecDD ...

  3. Using SetWindowRgn

    Using SetWindowRgn Home Back To Tips Page Introduction There are lots of interesting reasons for cre ...

  4. 迷宫城堡(强联通targin)

    迷宫城堡 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  5. android UI进阶之用【转】

    android UI进阶之用ViewPager实现欢迎引导页面 摘要: ViewPager需要android-support-v4.jar这个包的支持,来自google提供的一个附加包.大家搜下即可. ...

  6. 度小于所述过程:es.exe

    在防火墙管理,见未知的过程"es.exe" 程序信息: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGVzdGNzX2Ru/font ...

  7. Oracle中NVARCHAR2与VARCHAR2的差别

    NVARCHAR2在计算长度时和字符集相关的: 比如数据库是中文字符集时以长度10为例, 1.NVARCHAR2(10)是能够存进去10个汉字的.假设用来存英文也仅仅能存10个字符. 2.而VARCH ...

  8. javascript条件运算符

    variablename=(condition)?value1:value2 javascript条件运算符

  9. 说一说Servlet 的生命周期

    答:servlet 有良好的生存期的定义, 包括加载和实例化. 初始化. 处理请求以及服务结束.这个生存期由 javax.servlet.Servlet 接口的 init,service 和 dest ...

  10. c++ primer plus 习题答案(2)

    p221.8 #include<iostream> #include<cstdlib> #include<cstring> using namespace std; ...