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的值。