HTML5中表单的新增类型

Author: 刘老师(Aaron Lau) 武汉长乐教育,武汉PHP培训课程,版权所有,转载请注明!

HTML5中表单的新增类型

在HTML5中新增几个表单类型, 其中大的变化, 是增加了自动验证功能.

本课摘要

  1. Input 类型 - email
  2. Input 类型 - url
  3. Input 类型 - number
  4. Input 类型 - range
  5. Input 类型 - Date Pickers(日期选择器)
  6. Input 类型 - search

1. Input 类型 - email

email 类型用于应该包含 e-mail 地址的输入域。 在提交表单时,会自动验证 email 域的值。 实例

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

2. Input 类型 - url

url 类型用于应该包含 URL 地址的输入域。 在提交表单时,会自动验证 url 域的值。 实例

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

3. Input 类型 - number

number 类型用于应该包含数值的输入域。 您还能够设定对所接受的数字的限定: 实例

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

4.Input 类型 - range

range 类型用于应该包含一定范围内数字值的输入域。 range 类型显示为滑动条。 您还能够设定对所接受的数字的限定: 实例

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

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

HTML5 拥有多个可供选取日期和时间的新输入类型: date - 选取日、月、年 month - 选取月、年 week - 选取周和年 time - 选取时间(小时和分钟) datetime - 选取时间、日、月、年(UTC 时间) datetime-local - 选取时间、日、月、年(本地时间) 下面的例子允许您从日历中选取一个日期:

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

6. Input 类型 - search

search 类型用于搜索域,比如站点搜索或 Google 搜索。 search 域显示为常规的文本域。

上一篇课程 下一篇课程

学生登录