HTML5-新增的表单元素
HTML5在HTML4.01的基础上，对表单进行了以下两个方向的扩展：
- 新增input元素类型；
- 新增其他表单元素。
1.新增input元素类型
新增的type属性值(验证型)
| 属性值 | 说明 |
|---|---|
| 邮件类型 | |
| tel | 电话号码 |
| url | URL类型 |
新增的type属性值(取值型)
| 属性值 | 说明 |
|---|---|
| range | 取数字(滑块方式) |
| number | 取数字(微调方式) |
| color | 取颜色 |
| date | 取日期(如2018-11-11) |
| time | 取时间(如08:04) |
| month | 取月份 |
| week | 取周数 |
1.1.验证型
email：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
head>
<body>
<form method="post">
<p>
<label>电子邮箱：
<input type="email" />
label>
<input type="submit" value="提交" />
p>
form>
body>
html>
效果图：
分析：
当输入非电子邮件格式的字符，点击【提交】按钮时，会发现无法提交且弹出提示内容：
有一点需要说明，必须是submit按钮才会弹出提示内容，使用其他按钮(如button按钮)则不会。这是因为email类型的文本框采用了浏览器内置的验证机制，而浏览器内置的验证机制必须使用submit按钮才会触发。
tel：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
head>
<body>
<form method="post">
<p>
<label>电话号码：
<input type="tel" />
label>
<input type="submit" value="提交" />
p>
form>
body>
html>
效果图：
分析：
当输入非电话号码格式的字符，点击【按钮】时，却发现仍可以提交！其实tel类型文本框并不具备完备的验证功能，若想要达到验证效果，需要结合pattern属性来实现。
pattern：
url：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
head>
<body>
<form method="post">
<p>
<label>你的网站：
<input type="url" />
label>
<input type="submit" value="提交" />
p>
form>
body>
html>
效果图：
分析：
当输入非URL格式的字符，点击【提交】按钮时，会发现无法提交且弹出提示内容，效果如下：
分析：
所谓的URL格式字符，指的是以http://或https://开头的网络地址。但是在实际时会发现https://www、tps://www.gh.com这种字符也能提交。原因就是url类型文本框不具备完备的验证功能，若想要达到验证效果，需要结合 pattern属性来实现
pattern：
1.2.取值型
range：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
head>
<body>
<form method="post">
<p>
<label>range：
<input type="range" min="0" max="100" step="10" value="10" />
label>
p>
form>
body>
html>
效果图：
说明：
- min：最小值赋值为0；
- max：最大值赋值为100；
- step：步进为10，即每次拖动增加10或减少10。
number：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
head>
<body>
<form method="post">
<p>
<label>number：
<input type="number" min="0" max="100" step="10" value="10" />
label>
p>
form>
body>
html>
效果图：
通过使用微调按钮来获取某一个范围的数字。
说明：
- min：最小值赋值为0；
- max：最大值赋值为100；
- step：步进为10，即每次微调增加10或减少10；
- 或直接输入赋值。
color：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
head>
<body>
<form method="post">
<p>
<label>color：
<input type="color" value="#000000" />
label>
p>
form>
body>
html>
效果图：
当点击color类型元素时，浏览器会弹出自带的取色工具，以方便选取颜色值：
说明：
value属性用于设置颜色初始值，格式必须是十六进制颜色值如#000000和rgba颜色。
date：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
head>
<body>
<form method="post">
<p>
<label>date：
<input type="date" value="2022-07-03" />
label>
p>
form>
body>
html>
效果图：
当点击date类型元素时，浏览器会弹出自带的日期工具，以方便直接选取日期：
说明：
value属性用于设置日期初始值，格式必须如果为YYYY-MM-DD。
month：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
head>
<body>
<form method="post">
<p>
<label>date：
<input type="month" value="2022-07" />
label>
p>
form>
body>
html>
效果图：
当点击month类型元素时，浏览器会弹出选择框，日历工具，以方便选择哪个月份：
说明：
value属性用于设置初始值，格式必须如YYYY-MM。
week：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
head>
<body>
<form method="post">
<p>
<label>date：
<input type="week" value="2022-W26" />
label>
p>
form>
body>
html>
效果图：
当点击week类型元素时，浏览器会弹出日期工具，以方便选择第几周：
说明：
value属性用于设置初始值，格式必须如YYYY-W[Number]，其中W是week的缩写；[Number]为数字，若小于10的数字，需在前面补齐0。
time：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
head>
<body>
<form method="post">
<p>
<label>time：
<input type="time" value="23:25" />
label>
p>
form>
body>
html>
效果图：
当点击time类型元素时，浏览器会弹出日期工具，以方便选择时间：
说明：
value属性用于设置初始值，格式必须如mm:ss
2.新增其他表单元素
新增的表单元素有：output、datalist。
2.1.output元素
用于定义表单元素的输出结果或计算结果。
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
<script>
window.onload = function() {
var input = document.getElementByTagName('input')[0];
var output = document.getElementByTagName('output')[0];
// 将range的值赋值给output
output.value = input.value;
// 拖动滑动条，改变output值
input.change = function() {
output.value = input.value;
}
}
script>
head>
<body>
<form method="post">
<p>
<label>range：
<input type="range" min="0" max="100" step="10" value="10" />
label>
p>
<output>output>
form>
body>
html>
说明：
output元素是一个行内元素，比span元素更具有语义化。
分析：
output元素一般放在form元素内部，且配合其他表单元素(如文本框等)来使用。
2.2.datalist元素
使用datalist元素来为文本框提供一个可选的列表。
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title>
head>
<body>
<form method="post">
<datalist id="urlList">
<option label="1" value="html5-1">option>
<option label="2" value="html5-2">option>
datalist>
form>
body>
html>
说明：
若想要把datalist绑定到某个文本框，需要设置该文本框的list属性值等于datalist的id的值。