全屏

在HTML5中,大幅度增加与改良了input元素的种类,可以简单地使用这些元素来实现HTML5之前需要使用JavaScript才能实现的许多功能。

HTML5中也没有规定这些元素在浏览器中的外观形式,所以同样的input元素在不同的浏览器中可能会有不同的外观。对于不支持新增input元素的浏览器来说,统一将这些input元素视为text类型。

2.1.1邮件类型

(1)功能描述:输入E-mail地址的文本框

(2)语法:

(3)注意:输入的内容中必须包含@,@后面必须具有内容

下面为一个简单的email实例:

html5 搜索界面 html5搜索按钮_搜索

其效果图如下:

html5 搜索界面 html5搜索按钮_HTML5_02

2.1.2搜索类型

(1)功能描述:输入搜索关键字的文本框

(2)语法:

2.1.3URL类型

(1)功能描述:输入WEB站点的文本框

(2)语法:

(3)注意:输入的内容中必须包含"http://"

下面为一个简单的URL实例:

html5 搜索界面 html5搜索按钮_文本框_03

其效果图如下:

html5 搜索界面 html5搜索按钮_搜索_04

2.1.4颜色类型

(1)功能描述:预定义的颜色拾取控件

(2)语法:

(3)默认颜色为黑色

下面为一个简单的实例:

html5 搜索界面 html5搜索按钮_HTML5_05

其效果图如下:

html5 搜索界面 html5搜索按钮_html5新增搜索类型是_06

2.1.5数字类型

(1)功能描述:只能接受数字

(2)语法:

(3)属性:

min:当前域能接受的最小值

max:当前域能接受的最大值

step:决定了域所接受值递增或递减的步长,默认为1

下面为一个简单的实例:

html5 搜索界面 html5搜索按钮_html5新增搜索类型是_07

其效果图如下:

html5 搜索界面 html5搜索按钮_html5 搜索界面_08

2.1.6范围类型

(1)功能描述:允许用户选择一个范围内的值

(2)语法:

(3)属性:

min:范围的下限值

max:范围的上限值

step:声明该值递增或递减的步长

value:设置初始值

下面为一个简答的实例:

html5 搜索界面 html5搜索按钮_html5 搜索界面_09

其效果图如下:

html5 搜索界面 html5搜索按钮_html5新增搜索类型是_10

2.1.7日期类型

(1)功能描述:创建一个日期输入域

(2)语法:

下面为一个简单的实例:

html5 搜索界面 html5搜索按钮_html5新增搜索类型是_11

其效果图如下:

html5 搜索界面 html5搜索按钮_文本框_12

2.1.8周类型

(1)功能描述:与date类型相似,但只能选择周

(2)语法:

下面为一个简单的实例:

html5 搜索界面 html5搜索按钮_搜索_13

其效果图如下:

html5 搜索界面 html5搜索按钮_文本框_14

2.1.9月类型

(1)功能描述:与date类型相似,但只能选择月份

(2)语法:

下面为一个简单的实例:

html5 搜索界面 html5搜索按钮_html5 搜索界面_15

其效果图如下:

html5 搜索界面 html5搜索按钮_html5 搜索界面_16