HTML5 新 增加 了多个表单输入类型，这些新特性提供了更好的输入控制和验证
下面列出了 html5 新 增加 的输入类型
color
date
datetime
datetime-local
month
number
range
search
tel
time
url
week
虽然并不是所有的主流浏览器都 支持 新的 input 类型，但我们已经可以在所有主流的浏览器中使用它们了，因为即使不被 支持 ，仍然可以 显示 为常规的文本域<input type="color" >
<input type="color" > 用于选取颜色
这个范例从拾色器中选择 一个 颜色
<label>选择你喜欢的颜色:?<input?type="color"?name="favcolor"></label><input type="date" >
<input type="date" > 用于从 一个 日期选择器选择 一个 日期
下面的范例定义 一个 时间控制器
<label>生日:?<input?type="date"?name="bday"></label><input type="datetime" >
<input type="datetime" > 用于创建 一个 选择 一个 日期（UTC 时间）的输入域
定义 一个 日期和时间控制器（本地时间）
<label>生日?(日期和时间):?<input?type="datetime"?name="bdaytime"></label><input type="datetime-local" >
<input type="datetime-local" > 用于创建 一个 选择 一个 日期和时间 (无时区)的输入域
下面的范例定义 一个 日期和时间 (无时区)输入域
<label>生日?(日期和时间):?<input?type="datetime-local"?name="bdaytime"></label><input type="email" >
<input type="email" > 用于创建 一个 e-mail 地址的输入域
iPhone 中的 Safari 浏览器 支持 email 输入类型，并通过改变触摸屏 键盘 来配合它（ 添加 @ 和 .com 选项）下面的范例在提交表单时，会 自动 验证 email 域的值是否合法有效
<label>E-mail:?<input?type="email"?name="email"></label><input type="month" >
<input type="number" > 用来创建 一个 选择月份的输入框
下面的 代码 创建了 一个 月与年输入框 (无时区):
<label>生日?(月和年):?<input?type="month"?name="bdaymonth"></label><input type="number" >
<input type="number" > 用于应该包含数值的输入域
我们还可以对所接受的数字进行限定
下面的 代码 定义 一个 数值输入域(限定):
<label> 数量 ?(?1?到?5?之间?):?<input?type="number"?name="quantity"?min="1"?max="5"></label>可以使用下面的 属性 来设置对数字类型的限定
属性 描述 dis abled 规定输入字段是禁用的 max? 规定允许的最大值 maxlength 规定输入字段的最大字符长度 min 规定允许的最小值 pattern 规定用于验证输入字段的模式 readonly 规定输入字段的值无法 修改 required 规定输入字段的值是必需的 size 规定输入字段中的可见字符数 step 规定输入字段的的合法数字间隔 value 规定输入字段的 默 认值
<input type="range" ><input type="range" > 用于应该包含一定范围内数字值的输入域
range 类型 显示 为滑动条
下面的范例定义了 一个 不需要非常精确的数值（类似于滑块控制）
<input?type="range"?name="points"?min="1"?max="10">可以使用下面的 属性 设置对数字类型的限定
属性 描述 max 规定允许的最大值 min 规定允许的最小值 step 规定合法的数字间隔 value 规定 默 认值
<input type="search" ><input type="search" > 用于创建 一个 搜索 框，比如 站点 搜索 或 Google 搜索
下面的 代码 定义了 一个 搜索 字段 (类似 站点 搜索 或者Google 搜索 )
<label>Search?Google:?<input?type="search"?name="googlesearch"></label><input type="tel" >
<input type="tel" > 用于创建 一个 电话号码输入框
下面的 代码 定义输入电话号码字段
<label>电话号码:?<input?type="tel"?name="usrtel"></label><input type="time" >
<input type="time" > 用于选择 一个 时间
下面的范例定义了可输入时间控制器（无时区）
<label>选择时间:?<input?type="time"?name="usr_time"></label><input type="url" >
<input type="url" > 用于应该包含 URL 地址的输入域
iPhone 中的 Safari 浏览器 支持 url 输入类型，并可以改变触摸屏 键盘 来配合它（ 添加 .com 选项）在提交表单时，会 自动 验证 url 域的值
下面的范例定义了输入 URL 的字段
<label> 添加 您的主页:?<input?type="url"?name="homepage"></label><input type="week" >
<input type="week" > 用于选择周和年
下面的 代码 用于选择周和年 (无时区)
<label>选择周:?<input?type="week"?name="week_year"></label>html5 <input> 标签 标签 描述 @H_186_ 301 @<input> 描述 input 输入器
HTML5 表单元素 ? ?HTML5 MathML 数学公式查看更多关于HTML5 新的 Input 类型的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did92372