作者：尘世聚散 | 来源：互联网 | 2023-06-15 21:01
首先在介绍HTML5form表单的新增内容之前，我总结了一下HTML的form表单的内容。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML表单标签title>
head>
<body>
<input type="text">
<input type="password">
<input type="radio">
<input type="checkbox">
<input type="submit">
<input type="reset">
<input type="image">
<input type="hidden">
<input type="file">
<input type="button">
<select name="" id="">
<option value="">option>
<option value="">option>
<option value="">option>
select>
body>
html>
接下来总结HTML5的form表单内容，我分为新增的form元素，新增的form属性，新增的input类型，新增的input属性四个部分。
1.新增的form元素
1)datalist元素
datalist与option联合使用，datalist元素通常通过list属性与一个input相关联，达到的效果就是我们既可以手动输出，也可以选择下拉列表中的选项。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>datalist的使用title>
head>
<body>
<form action="#" method="get">
请输入网址：<input type="text" list="url_data">
<datalist id="url_data">
<option label="百度" value="http://www.baidu.com">option>
<option label="腾讯" value="http://www.qq.com">option>
<option label="搜狐" value="http://www.sohu.com">option>
<input type="submit">
datalist>
form>
body>
html>
2)keygen元素
keygen元素是秘钥对生成器，能够使用户验证更为可靠。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>keygen元素的使用title>
head>
<body>
<form action="#" method="get">
请输入用户名：<input type="text"><br>
请选择加密强度：<keygen/><br>
<input type="submit">
form>
body>
html>
3)output元素
output元素用于在浏览器中显示计算结果或脚本输出。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>output的使用title>
head>
<body>
<form action="#" method="get" name="form">
<output name="output">output>
form>
<script>
var a=parseInt(prompt("请输入第一个数：",0));
var b=parseInt(prompt("请输入第二个数：",0));
document.forms["form"]["output"].value=a*b;
script>
body>
html>
2.新增的form属性
1)autocomplete属性
新增的autocomplete属性可以帮组用户在form表单中的元素中实现自动完成内容输入，不过在使用这项功能之前需要先启用浏览器本身的自动完成功能，才能使用autocomplete属性。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>autocomplete属性的使用title>
head>
<body>
<form action="#" method="get" autocomplete="on">
姓名：<input type="text" name="name"><br>
密码：<input type="password" name="pass"><br>
电子邮箱：<input type="email" name="email"><br>
<input type="submit">
form>
body>
html>
2)novalidate属性
form元素的novalidate属性用于在提交表单时取消整个表单的验证，即关闭对表单内所有元素的有效性检查。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>novalidate的使用title>
head>
<body>
<form action="" method="get" novalidate="true">
请输入正确的电子邮箱：<input type="email" name="user_email" >
<input type="submit" value="提交">
form>
body>
html>
3)formaction属性
等于action。
4)formenctype属性
等于enctype。
5)formmethod属性
等于method。
6)formnovalidate属性
等于novalidate。
7)formtarget属性
等于target。
3.新增的input类型
1)email类型
再提交表单的时候浏览器会自动验证填写的邮箱是否正确。
2)url类型
提交表单的时候，输入的内容时url地址格式的内容，则将数据提交到服务器，如果不是就不允许提交,url地址格式例子：http://www.baidu.com。
3)number类型
这是一个只能输入数值的输入框，其中的属性可以有min，max，step。
4)range类型
输出一定范围内数字值的文本框
5)date类型
输出年，月，日，如2017年6月6日会以2017-06-06显示。
6)month类型
输出月，年
7)week类型
输出周，年
8)time类型
输出小时，分钟
9)datetime类型
输出选取的时间，日，月，年，其中时间为UTC时间。
10)datetime-local类型
同datetime，但是其中时间为本地时间。
11)search类型
用于输入搜索关键词的文本框。
12)tel类型
用于输入电话号码的文本框，但他不限定制输入数字，也包括+，-，（，）等等。
13)color类型
用于设置颜色的文本框.
4.新增的input属性
1)autocomplete属性
在上面的form元素上的autocomplete属性是全局的，我们也可以在一个input元素上单独使用让这个元素自动补充或是不补充。
2)autofocus属性
用于自动获取光标焦点.一般在搜索页面中的搜索文本框，或者一个同意某许可协议的同意按钮。
3)width和height属性
仅用于image类型的高度和宽度的设置。单位是像素。
4)list属性
和datalist搭配使用，在datalist有详细介绍。
5)min,max,step属性
适用于date，picker，number，range属性的input标签。
6)multiple属性
input中file只支持单个文件的上传，multiple属性支持一次性选择多个文件。
7)pattern属性
用于验证input类型输入狂汇总用户输入的内容是否于自定义的正则表达式相匹配，适用于text，url，tel，email，password。
8)placeholder属性
用于为input类型的输入框提供一个提示，这些提示可以给用户一些提示性语言。
9)required属性
告诉用户这个输入框的内容不能为空。
京公网安备 11010802041100号