例子，
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <form id="myForm1" action="#" method="GET"></form> <form id="myForm2" action="#" method="POST"></form> 提交到 myForm1：<input type="text" form="myForm1" name="myForm1" /> <input type="submit" value="提交" form="myForm1" /> 提交到 myForm2：<input type="text" form="myForm2" name="myForm2" /> <input type="submit" value="提交" form="myForm2" /> </body></html>
显示为，
内容根据不同的表单所属的id进行提交。
打开一个页面，当某个文本框须要得到光标焦点时，可以利用 autofocus 属性来实现。
例子，
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <form> <input type="text" autofocus /> <input type="submit" value="搜索" /> </form> </body></html>
显示为，
当点击text框，可以得到焦点。
autocomplete 属性是用来规定表单是否该当启用自动完成功能，即“自动补全”。
自动完成功能便是当用户输入一次数据过后，再次输入相同的数据时可以自动补全内容。
autocomplete 属性包括两个属性值：on、off。
其语法格式为：
<form autocomplete="on"></form>
on 为默认值，意思是启用自动完成功能。
<form autocomplete="off"></form>
off 为禁用自动完成功能。
例子，
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <form autocomplete="on"> 您最喜好的体育运动： <input type="text" list="selectList"/> <datalist id="selectList"> <option>Football</option> <option>Basketball</option> <option>Baseball</option> <option>Running</option> <option>Boxing</option> </datalist> <input type="submit" /> </form> </body></html>
显示为，
HTML5 中添加的新标签还有 datalist，该标签可实现供应数据列表的功能，而 list 属性则是为了将该标签和指定文本框进行关联所设计的。
语法格式为：
<input list="datalist-id" />
例子与上面autocomplete相同，已经用过了。
placeholder 属性描述输入字段预期值的提示信息，提示用户设置的输入值。
其语法格式为：
<input placeholder="text" />
灰色字体是提示信息，placeholder 属性适用于 input 中的 text、search、url、tel、email 和 password 类型。
HTML5 新增了 min，max 和 step 属性用于为数字或日期输入类型的 input 供应数值限定，可以利用该属性的标签有 number、range、Date pickers。
min 属性规定 input 元素的最小值。其语法格式为：
<input type="number" min="number" /> <input type="date" min="date" />
number 为数字值，date 为日期。
max 属性规定 input 元素的最大值。其语法格式为：
<input type="number" max="number" /> <input type="date" max="date" />
step 属性规定 input 元素数值之间的步长，也便是数字间隔。其语法格式为：
<input type="number" step="number" />
例子，
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <form> 输入：<input type="number" min="-1000" max="1000" step="9" /><input type="submit" value="提交" /> </form> </body></html>
显示为，
点击高下箭头，数字以9为step增加或减少。
multiple 属性规定用户一次可以输入多个值。
multiple 属性适用于文件上传功能，也可在 email 类型中利用。
其语法格式为：
<input multiple />
例子，
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <form> 上传：<input type="file" multiple /><input type="submit" value="上传" /> </form> </body></html>
multiple 属性，常日用在 file 和 email 类型中利用来绑定多个值。
利用 HTML5 实现表单验证的几个条件条件：
form 标签不能有 novalidate 属性。input 标签一定要有 required 和 pattern 属性。必须要有 form 标签和提交按钮。HTML表单验证：
placeholder 属性用于为文本框供应提示解释功能，提示解释该文本框希望用户输入何种数据。
当用光标焦点聚焦到该文本框时，提示解释笔墨消逝。不输入任何信息，提示解释笔墨不会被当做用户输入数据提交。
<form> <input placeholder="提示信息" /></form>
required 属性是用来限定文本框内容不能为空的。当文本框内容为空时，无法提交表单。该属性适用于 text、password 等大多数文本框。
<form> <input required /></form>
pattern 属性是对用户输入信息进行正则表达式校验。该属性适用于大多数的 input 类型。例如 text、pass、search 等。
<input type="text" pattern="正则表达式" />
pattern 属性常用的正则表达式：
Email 地址：^\w+([-+.]\w+)@\w+([-.]\w+)\.\w+([-.]\w+)$域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?InternetURL：[a-zA-z]+://[^\s] 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=])?$手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$海内电话号码（0511-4405222、021-87888822）：\d{3}-\d{8}|\d{4}-\d{7}身份证号（15 位、18 位数字）：^\d{15}|\d{18}$帐号是否合法（字母开头，许可 5-16 字节，许可字母数字下划线）：^[a-zA-Z][a-zA-Z0-9_]{4,15}$密码（以字母开头，长度在 6~18 之间，只能包含字母、数字和下划线）：^[a-zA-Z]\w{5,17}$强密码（必须包含大小写字母和数字的组合，不能利用分外字符，长度在 8-10 之间）：^(?=.\d)(?=.[a-z])(?=.[A-Z]).{8,10}$日期格式：^\d{4}-\d{1,2}-\d{1,2} 一年的 12 个月（01～09 和 1～12）：^(0?[1-9]|1[0-2])$一个月的 31 天（01～09 和 1～31）：^((0?[1-9])|((1|2)[0-9])|30|31)$
例子，假设一个用户登录页面，用户名必填，哀求格式为字母数字和下划线组合，长度在 6 到 20 之间。密码为数字，长度也是 6 到 20 之间：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <form> 用户名：<input type="text" id="userName" placeholder="请输入用户名" required pattern="\w{6,20}" /> 密码：<input type="password" id="password" placeholder="请输入密码" required pattern="\d{6,20}" /> <button>登录</button> </form> </body></html>
显示为，
novalidate 属性是用来取消表单的自动验证功能的，例如前面已经讲过的 email 元素，当用户输入数据格式不符合 email 的格式哀求时，系统会自动提示格式禁绝确，这个功能便是自动验证功能。
若用户不肯望系统提示缺点信息而是由自己写代码来实现验证提示功能的话，可以利用 novalidate 属性关闭该功能。
例如，取消 email 类型的内置表单验证。
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <form novalidate> email：<input type="email" name="email" /><input type="submit" value="提交" /><br /> </form> </body></html>
表单验证的四个干系属性，分别是
placeholder 属性：用于为文本框供应提示解释。pattern 属性：用来对用户输入信息进行正则表达式校验的。required 属性：用来限定文本框内容不能为空的。novalidate 属性：用来取消表单的自动验证功能的。HTML5 新增了一个神奇的属性，用它可以存储一些数据，进行定义和数据存取。
我们以 data- 开头来表示自定义数据属性。
例子，
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> li[data-type="one"]{ background:#8bc34a; } li[data-type="two"]{ background:#5089c6; } </style></head><body> <ul> <li data-type="one"></li> <li data-type="two"></li> </ul></body></html>
除了利用自定义数据属性设置样式外，我们还可以利用它来创建元素的提示信息。
例子，
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> span.tooptip{ cursor:pointer; } .tooltip-info{ position:absolute; top: -9999px; } span.tooltip::before{ content:attr(data-tooltip); position:absolute; display:none; color:white; background:rgba(177, 166, 155, 0.55); } span:hover::before{ display:inline-block; } </style></head><body> <p> 欢迎来到王椰浪的学习条记 <span class="tooltip" data-tooltip="这是一个自定义属性"> <span class="tooltip-info"> 这是一个自定义属性 </span> 王耶浪条记本 </span> </p></body></html>
鼠标未放在有自定义属性的笔墨上
鼠标放在有自定义属性的笔墨上
