Chinaunix首页 | 论坛 | 博客
  • 博客访问: 570027
  • 博文数量: 208
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 2052
  • 用 户 组: 普通用户
  • 注册时间: 2014-11-19 21:54
文章分类

全部博文(208)

文章存档

2019年(18)

2018年(27)

2017年(5)

2016年(53)

2015年(88)

2014年(17)

分类: HTML5

2016-09-21 15:59:18

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week
不是所有的主流浏览器都支持新的input类型,不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持,仍然可以显示为常规的文本域。

Input 类型: color

点击(此处)折叠或打开

  1. <input type="color" name="favcolor">

点击(此处)折叠或打开

  1. <form action="demo-form.php">
  2.   选择你喜欢的颜色: <input type="color" name="favcolor"><br>
  3.   <input type="submit">
  4. </form>




Input 类型: date

date 类型允许你从一个日期选择器选择一个日期。

点击(此处)折叠或打开

  1. 生日: <input type="date" name="bday">

点击(此处)折叠或打开

  1. <form action="demo-form.php">
  2.   生日: <input type="date" name="bday">
  3.   <input type="submit">
  4. </form>

Input 类型: datetime

datetime 类型允许你选择一个日期(UTC 时间)。

点击(此处)折叠或打开

  1. 生日 (日期和时间): <input type="datetime" name="bdaytime">

点击(此处)折叠或打开

  1. form action="demo-form.php">
  2.   生日 (日期和时间): <input type="datetime" name="bdaytime">
  3.   <input type="submit">
  4. </form>

Input 类型: datetime-local

datetime-local 类型允许你选择一个日期和时间 (无时区).


点击(此处)折叠或打开

  1. 生日 (日期和时间): <input type="datetime-local" name="bdaytime">

点击(此处)折叠或打开

  1. <form action="demo-form.php">
  2.   生日 (日期和时间): <input type="datetime-local" name="bdaytime">
  3.   <input type="submit">
  4. </form>

Input 类型: email

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


点击(此处)折叠或打开

  1. E-mail: <input type="email" name="email">

点击(此处)折叠或打开

  1. <form action="demo-form.php">
  2.   E-mail: <input type="email" name="usremail">
  3.   <input type="submit">
  4. </form>


Input 类型: month

month 类型允许你选择一个月份。


点击(此处)折叠或打开

  1. 生日 (月和年): <input type="month" name=

点击(此处)折叠或打开

  1. <form action="demo-form.php">
  2.   生日 ( 月和年 ): <input type="month" name="bdaymonth">
  3.   <input type="submit">
  4. </form>

Input 类型: number

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

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

点击(此处)折叠或打开

  1. 数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">
  • max- 规定允许的最大值
  • min - 规定允许的最小值
  • step - 规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)
  • value - 规定默认值

点击(此处)折叠或打开

  1. <form action="demo-form.php">
  2.   数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5">
  3.   <input type="submit">
  4. </form>


Input 类型: range

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

range 类型显示为滑动条。


点击(此处)折叠或打开

  1. <input type="range" name="points" min="1" max="10">
  • max - 规定允许的最大值
  • min - 规定允许的最小值
  • step - 规定合法的数字间隔
  • value - 规定默认值

点击(此处)折叠或打开

  1. <form action="demo-form.php" method="get">
  2. Points: <input type="range" name="points" min="1" max="10">
  3. <input type="submit">
  4. </form>


Input 类型: search

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


点击(此处)折叠或打开

  1. Search Google: <input type="search" name="googlesearch">

点击(此处)折叠或打开

  1. <form action="demo-form.php">
  2.   Search Google: <input type="search" name="googlesearch"><br>
  3.   <input type="submit">
  4. </form>


Input 类型: tel


点击(此处)折叠或打开

  1. 电话号码: <input type="tel" name="usrtel">

点击(此处)折叠或打开

  1. <form action="demo-form.php">
  2.   电话号码: <input type="tel" name="usrtel"><br>
  3.   <input type="submit">
  4. </form>


Input 类型: time

time 类型允许你选择一个时间。

定义可输入时间控制器(无时区):

点击(此处)折叠或打开

  1. 选择时间: <input type="time" name="usr_time">

点击(此处)折叠或打开

  1. <form action="demo-form.php">
  2.   选择时间: <input type="time" name="usr_time">
  3.   <input type="submit">
  4. </form>

Input 类型: url

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

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

定义输入URL字段:

点击(此处)折叠或打开

  1. 添加您的主页: <input type="url" name="homepage">

点击(此处)折叠或打开

  1. <form action="demo-form.php">
  2.   添加你的主页: <input type="url" name="homepage"><br>
  3.   <input type="submit">
  4. </form>


Input 类型: week

week 类型允许你选择周和年。

定义周和年 (无时区):

点击(此处)折叠或打开

  1. 选择周: <input type="week" name="week_year">

点击(此处)折叠或打开

  1. <form action="demo-form.php">
  2.   选择周: <input type="week" name="year_week">
  3.   <input type="submit">
  4. </form>


  以上是input 新增的标签,这些标签不单单就是标签,当用户输入信息是,所给标签会自动的验证输入的信息是否正确
  以往呢在我们都是用正则(Regex)在Js里验证。
  上面所有的标签存在一个共同的大问题,就是浏览器兼容性的问题,还需要进一步完善。









阅读(486) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~
评论热议
请登录后评论。

登录 注册