从0到1：HTML5+CSS3修炼之道最新章节_莫振杰著

2.2 表单元素

在HTML4.01中，表单的类型以及使用方法都非常有限。HTML5在HTML4.01的基础上，对表单进行了以下两个方向的扩展。

新增input元素类型。

新增其他表单元素。

这两个方向的扩展，使得代码量大大减少，可以极大地提高开发效率。

2.2.1 新增input元素类型

在HTML5中，大量地增加了input元素的种类。换句话说就是，input元素的type属性新增了大量属性值，如表2-1、表2-2所示。

表2-1 新增的type属性值（验证型）

表2-2 新增的type属性值（取值型）

续表

除了表2-2列出的，type属性还有一个取值：datetime。不过，Chrome、Firefox、IE等浏览器的最新版本中已经不再支持了，小伙伴们如果在其他地方看到的话，直接忽略即可。

1.验证型

当type属性取值为“email”时，表示这是输入电子邮件的文本框（语义化）。

语法

举例

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</form>

</body>

</html>

浏览器预览效果如图2-8所示。

图2-8 email类型

分析

当我们输入非电子邮件格式的字符，然后点击【提交】按钮时，会发现无法提交并且弹出提示内容，效果如图2-9所示。

图2-9 提交时效果

这里有一点要说明，即必须是submit按钮才会弹出提示内容，使用其他按钮（如button按钮）则不会。这是因为email类型的文本框采用了浏览器内置的验证机制，而浏览器内置的验证机制必须使用submit按钮才会触发。

tel

当type属性取值为“tel”时，表示这是输入电话号码的文本框（语义化）。

语法

举例

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</form>

</body>

</html>

浏览器预览效果如图2-10所示。

图2-10 tel类型

分析

当我们输入非电话号码格式的字符，然后点击【提交】按钮时，却发现居然可以提交！这是怎么回事呢？其实tel类型文本框并不具备完备的验证功能，如果想要达到验证效果，则需要结合3.2节介绍的pattern属性来实现。

url

当type属性取值为“url”时，表示这是输入URL的文本框（语义化）。

语法

举例

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</form>

</body>

</html>

浏览器预览效果如图2-11所示。

图2-11 url类型

分析

当我们输入非URL格式的字符，然后点击【提交】按钮时，会发现无法提交并且弹出提示内容，效果如图2-12所示。

图2-12 提交时效果

所谓的URL格式字符，指的是以“http://”或者“https://”开头的网络地址。有些小伙伴会发现，像https://www、tps://www.lvyestudy.com这种字符串也能提交！原因也是一样的：url类型文本框也不具备完备的验证功能，如果想要达到验证效果，需要结合pattern属性来实现。

2.取值型

range

当type属性取值为“range”时，我们可以通过拖动滑动条获取某一个范围内的数字。

语法

说明

min属性用于设置最小值，max属性用于设置最大值，step属性用于设置间隔数。这3个属性的取值可以是整数，也可以是小数。

举例

<!DOCTYPE html>

<html>

<head>

window.onload = function(){

var input = document.getElementsByTagName("input")[0];

var output = document.getElementsByTagName("output")[0];

//获取range的初始值

output.value = input.value;

//拖动滑动条，改变output值

input.onchange = function(){

output.value = input.value;

};

}

</script>

</head>

<body>

</form>

</body>

</html>

浏览器预览效果如图2-13所示。

图2-13 range类型

分析

上面这句代码表示：滑动条最小值为-10，最大值为10，每次拖动只能改变5（增加5或减少5）。value="-10"用于设置滑动条的初始值，有一个很有趣的现象是：设置不同的value值，滑块也会出现在对应数值的位置。在这个例子中，若设置value="5"，此时浏览器预览效果如图2-14所示。

图2-14 设置value="5"

在实际开发中，range类型元素都是需要结合JavaScript来操作的，上面这个例子就是最简单也是最经典的。此外，output元素用于定义表单元素的输出结果，我们在这一节的后面会详细介绍。

number

当type属性取值为“number”时，我们可以通过使用微调按钮来获取某一个范围的数字。

语法

说明

min属性用于设置最小值，max属性用于设置最大值，step属性用于设置间隔数。它们的属性取值可以是整数，也可以是小数。

number类型跟range类型功能非常相似，都是获取某一个范围内的数字。不过两者的外观不一样，其中number类型使用的是“微调按钮”，而range类型使用的是“滑块”。

举例

<!DOCTYPE html>

<html>

<head>

window.onload = function(){

var input = document.getElementsByTagName("input")[0];

var output = document.getElementsByTagName("output")[0];

//获取number的初始值

output.value = input.value;

//点击微调按钮，改变output值

input.onchange = function(){

output.value = input.value;

};

}

</script>

</head>

<body>

</form>

</body>

</html>

浏览器预览效果如图2-15所示。

图2-15 number类型

分析

在这个例子中，我们可以直接在文本框中输入数字，也可以通过右边的微调按钮来改变数字。

color

当type属性取值为“color”时，我们可以直接使用浏览器自带的取色工具来获取颜色值。

语法

说明

value属性用于设置颜色初始值，格式必须是十六进制颜色值如#F1F1F1，不能是关键字（如black）和rgba颜色（如#80FFFFFF）。

举例

<!DOCTYPE html>

<html>

<head>

window.onload = function(){

var input = document.getElementsByTagName("input")[0];

var output = document.getElementsByTagName("output")[0];

//页面一载入，获取color的初始值

output.value = input.value;

//选择颜色，改变output值

input.onchange = function(){

output.value = input.value;

};

}

</script>

</head>

<body>

</form>

</body>

</html>

浏览器预览效果如图2-16所示。

图2-16 color类型

分析

当我们点击color类型元素时，浏览器会弹出自带的取色工具，以方便直接选取颜色值，如图2-17所示。

图2-17 浏览器自带的取色工具

color类型元素不仅可以选择颜色，还可以将常用的颜色值添加到自定义颜色栏中，以便再次使用，非常方便。

date

当type属性取值为“date”时，我们可以直接使用浏览器自带的日历工具来获取日期（年、月、日）。

语法

说明

value属性用于设置日期初始值，格式必须如“2018-05-20”。

举例

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</form>

</body>

</html>

浏览器预览效果如图2-18所示。

图2-18 date类型

分析

当我们点击date类型元素时，浏览器会弹出自带的日历工具，以方便直接选取日期，如图2-19所示。

图2-19 浏览器自带的日历工具

此外，value属性用于设置日期初始值，格式必须如“2018-05-20”，像“2018--5-20”这种是无效的。

time

当type属性取值为“time”时，我们可以直接使用浏览器自带的工具来获取时间（时、分）。

语法

说明

value属性用于设置时间初始值，格式必须如“08:04”。

举例

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</form>

</body>

</html>

浏览器预览效果如图2-20所示。

图2-20 time类型

分析

当我们点击time类型元素时，文本框右边会出现微调按钮，以方便调整时间，如图2-21所示。

图2-21 微调按钮

此外，value属性用于设置时间初始值，格式必须如“08:04”，像“8:4”这种是无效的。

month

当type属性取值为“month”时，我们可以使用浏览器自带的工具来获取“月数”。

语法

说明

value属性用于设置初始值，格式必须如“2018-08”。

举例

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</form>

</body>

</html>

浏览器预览效果如图2-22所示。

图2-22 month类型

分析

当我们点击month类型元素时，浏览器会弹出选择框，以方便选择哪个月份，如图2-23所示。

图2-23 月份选择框

week

当type属性取值为“week”时，我们可以使用浏览器自带的工具来获取“周数”。

语法

说明

value属性用于设置初始值，格式必须如“2018-W04”。其中，“W”是“week”的缩写。

举例

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</form>

</body>

</html>

浏览器预览效果如图2-24所示。

图2-24 week类型

分析

当我们点击week类型元素时，浏览器会弹出选择框，以方便选择第几周，如图2-25所示。

图2-25 星期选择框

2.2.2 新增其他表单元素

前面介绍的都是input元素新增的类型，实际上HTML5还新增了3个表单元素：output、datalist、keygen。

1.output元素

在HTML5中，我们可以使用output元素来定义表单元素的输出结果或计算结果。

语法

说明

output元素是一个行内元素，只不过它比span元素更具有语义化。

举例

<!DOCTYPE html>

<html>

<head>

window.onload = function(){

var input = document.getElementsByTagName("input")[0];

var output = document.getElementsByTagName("output")[0];

//获取range的初始值

output.value = input.value;

//拖动滑动条，改变output值

input.onchange = function(){

output.value = input.value;

};

}

</script>

</head>

<body>

</form>

</body>

</html>

浏览器预览效果如图2-26所示。

图2-26 output元素

分析

output元素一般放在form元素内部，并且配合其他表单元素（如文本框等）来使用。我们在此之前接触output元素很多了，因此这里不再赘述。

2.datalist元素

在HTML5中，我们可以使用datalist元素来为文本框提供一个可选的列表。

语法

</datalist>

说明

如果想要把datalist绑定到某个文本框，需要设置该文本框的list属性值等于datalist的id值。

举例

<!DOCTYPE html>

<html>

<head>

</head>

<body>

输入网址：<input type="text" list="urlList"/>

</datalist>

</form>

</body>

</html>

浏览器预览效果如图2-27所示。

图2-27 datalist元素

3.keygen元素

在HTML5中，我们可以使用keygen元素来生成页面的密钥。如果表单内部有keygen元素，则提交表单时，keygen元素将生成一对密钥：一个保存在客户端，称为“私密钥（Private Key）”；另一个发送到服务器，称为“公密钥（Public Key）”。

语法

举例

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</form>

</body>

</html>

浏览器预览效果如图2-28所示。

图2-28 keygen元素

分析

keygen元素主要是作为客户端安全保护的一种方法，不过它在各大浏览器中的兼容性很差，小伙伴们了解一下即可，不需要深入。