HTML5智能表单
1、表单新增属性
☀ autofocus 属性
input tyPE="text" autofocus/> 设置 autofocus 属性，使文本框自动获得焦点
注意:一个页面中最多只能有一个表单元素设置该属性，否则功能将失效，建议对第一个input元素设置autofocus属性。
☀ formaction 属性
input type="submIT" formaction="处理逻辑"> !-- 处理逻辑可为add.jsp(添加)、update.jsp(修改)、delete.jsp(删除)。 -->
所有提交按钮(input type="submit"> 、input type="image"> 、button type="submit"> )都可以使用 formaction 属性。
HTML5只需添加formaction属性就可实现增加、修改和删除3个按钮功能，不再需要脚本的控制。
☀ autocomplete 属性
若一个元素内包含有 autocomplete="off" 属性，这意味着涉及机密信息，不应被浏览器保存。
若表单未定义 autocomplete，则默认设置为开启自动完成、显示输入提示(记忆用户在曾访问网站上所输入的内容)。
☀ pattern 属性
pattern 属性是input元素的验证属性，该属性的值是一个正则表达式，通过这个表达式可以验证输入内容的有效性。
用户名：input type="text" name="username" pattern="^[a-zA-Z]/w{
2,7}
" title="必须以字母开头，包含字符或数字，长度是3~8" />
br />
密码：input type="text" name="password" pattern="/d{
6}
" title="必须输入6个数字" />
br />
☀ placeholder 属性，也叫占位符
占位符值可以给予用户一个快速提示，让他们了解该在输入字段中输入什么，它并不会取代标签元素。当需要用户输入某一特定格式的内容时，
占位符显得尤其有用。浏览器会在输入字段显示提示文字。当该输入字段被聚焦(focus)激活，该提示文字则消失，失去焦点时又将自动显示。
姓名：input type="text" placeholder="请输入您的真实姓名" name="username">
br />
required 属性 定义必填项
required 是一个布尔型属性，包含此属性的表单元素必须被填写。在发送时若仍为空，浏览器就会给予相关相应。
2、新增的 input 元素类型
☀ 输入类型 tel 及 seArch
tel(电话输入文本) 及 search(搜索关键字输入的文本框) 类型与普通的文本没什么不同，
唯一不同的是输入关键字后search文本框右侧会出现一个"X"按钮，单击"X"后清空输入内容，由此带来方便。
☀ 输入类型 url 及 email
url地址输入框要求必须输入一个包含访问协议的完整的URL路径。
URL网址：input type="url" name="rul" title="URL应包括访问协议">
email邮箱输入框要求输入正确格式，此外，还可以添加 multiple 属性以允许同时输入多个以逗号分隔的email。
Email：input type="email" name="email" title="email的格式是 XXX@XXX.XX ">
☀ 输入类型 number 及 range
number 及 range 类型与包含数值的输入有关，并且支持浮点数表达式。不同的是range类型是用一个滑块来进行输入。
输入数值的取值范围由 min和 max两个属性来设置，默认是不限定; 调节步长使用 step属性，默认步长是1.
input type="number/range" min="最小值" max="最大值" step="改变数值的步长" name="number/range">
☀ 输入类型 color
color 类型让 input元素生成一个颜色选择器。input type="color" name="color">
☀ datalist 选项列表
datalist 元素用于生成一个隐藏的下拉菜单，其相当于一个“看不见”的 select元素。为什么需要设置id值呢？
因为 datalist元素一般需要跟某个文本框结合使用，结合方式是通过将文本框的"list"属性值设置为 datalist的 id值，这样就将 datalist绑定到了某个文本框。用户选中选项后datalist元素自动隐藏。记住，跟文本框一起使用并给文本框list和自身id相同的值。
input type="text" name="degree" form="register" list="degree">
datalist id="degree">
option label="top1" value="大专">
/option>
option label="top2" value="本科">
/option>
option label="toP3" value="研究生">
/option>
/datalist>
☀ 用 datetime(日期和时间),date(日期),time(时间),month,week以及 datetime-local(本地日期时间)这几个type类型表示日期和时间
input type="datetime/date/time/month/week/datetime-local" name="...">
datetime包括日期以及时间信息；时间设置始终为UTC。规范允许用户通过浏览器选择不同时区，但input元素的值始终会被转换为UTC格式。datetime属性 字符串必须以 Z 结束以表明它是UTC格式。"yyYY-MM-DDThh:mm:ss.ssZ"这是UTC格式.目前，很多浏览器都不支持datetime这个类型。
在 date和 month中，时间及时区则被忽略。根据规范定义，date必须是所选月份中的一个有效日期，同时考虑到闰年。年、月、日必须用“ - ”号隔开。为了确保星期与月份不被混淆，week前面通常会加上一个字母 W 。
datetime-local 与之前描述过的 datetime 作用基本相同，唯一不同之处是不需要表明时区。
☀ 使用 meter 显示度量
meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。例子：磁盘用量、查询结果的相关性，等等。
注释：meter> 标签虽说也可标记进度条，但并不应用于指示进度（在进度条中）。如果标记进度条，请使用 PRogress> 标签。
meter value="3" min="0" max="10"> 十分之三/meter> 或meter value="0.6"> /meter>
☀ 用 progress 显示任务进程
progress 元素被作用于展示一个任务的完成度，典型的例子是用户文件上传或下载。
举例来说，设计10个 checkbox类型的 input元素，当它们全部被激活时，进度条将显示到100%。
h1>
Please activate all the checkboxes/h1>
form method="get">
input type="checkbox" onchange="updateProgress()" />
input type="checkbox" onchange="updateProgress()" />
!--and 8 more-->
p>
Progress:progress value="0" max="10" id="pb">
/progress>
/p>
/form>
元素 progress的初始值为0，最大值为10.当 input元素被激活时，就会调用 updateProgress()函数，函数内容如下： script type="text/javascript">
function updateProgress(){
VAR pb=document.getElementById("pb");
var ip=document.getelementsbytagname("input");
var cnt=0;
for(var i=0;
iip.length;
i++){
if(ip[i].checked==true){
cnt++;
}
}
pb.value=cnt;
}
/script>
变量 ip包括了一个包含所有输入元素的节点列表(nodelist)。for循环测试每一个元素的当前状态，若其被激
活(checked==true),计数器变量cnt将增加1.同时，progress元素值将被设成计数器值。
☀ 用 output 进行计算
output 元素用于显示各种表单元素的内容或脚本执行结果，它的作用只是用于显示输出。最常用的例子是电子商务网站的
购物车。通过可选的 for属性，你可以决定将哪些字段添加到计算机中。执行运算需要提供一个或更多的相对应输入字段的 id。
举例来说，3种不同商品购物车：为了在 output元素中及时更新每次数量变化，使用表单的 oninput 事件：
table border="1" width="369" height="169">
tr>
th>
Product/th>
th>
Price(US$)/th>
th>
Quantity/th>
/tr>
tr>
td>
Keyboard/td>
td class="num" id="i1Price">
39.50/td>
td>
input name="i1" id="i1" type="number" min="0" value="0" max="99" />
/td>
/tr>
tr>
td>
Mouse/td>
td class="num" id="i2Price">
26.30/td>
td>
input name="i2" id="i2" type="number" min="0" value="0" max="99" />
/td>
/tr>
tr>
td>
Monitor/td>
td class="num" id="i3Price">
264.50/td>
td>
input name="i3" id="i3" type="number" min="0" value="0" max="99" />
/td>
/tr>
/table>
!-- output 元素在表格下方，相应输入字段中商品的 ID被赋值给 for属性。 -->
p>
Your shopping cart contains output name="sumProd" for="i1 i2 i3" id="sumProd">
/output>
items.total price: output name="sum" for="i1 i2 i3" id="sum">
/output>
US$/p>
!-- 在这段JavaScript代码中，会遍历计算所有的 input元素，得出总数量和总价格。 -->
script type="text/javascript">
function updateSum(){
var ips = document.getElementsByTagName("input");
var sum = 0;
var prods = 0;
for (var i=0;
iips.length;
i++){
var cnt=Number(ips[i].value);
if (cnt>
0){
sum +=cnt*Number(document.getElementById( ips[i].name+"Price").innerHTML);
prods +=cnt;
}
}
document.getElementById("sumProd").value=prods;
document.getElementById("sum").value=sum;
}
/script>
我们运用JavaScript的 Number()函数将相关列的 innerHTML值转换为数字，并根据它直接从表格中的到商品价格，input字段也用这个方法取值(ips[i].value)。如果略过这个步骤的话，JavaScript会直接将字符串加入计算，这样可能导致无法得到正确的结果，计算结果将被赋值给 output 元素的 value 属性。
3、客户端表单验证
★ 自动校验
通过对元素使用 required、pattern、min、max和 step等属性以及新增的 input类型，可实现在表单提交时进行自动校验。前面有介绍过，
下面仅举一个简单的执行自动校验的示例。
姓名：input type="text" name="username" required>
年龄：input type="number" name="age" min="1" max="150" step="1">
手机号码：input type="text" name="phone" pattern="/d{
11}
" title="请输入11位的手机号码">
★ 显式校验：check Validity()方法进行校验
check Validity()返回一个布尔值，为表单中所有的元素或某个元素的内容无效时，返回 false值，否则返回 true。
我们可以通过编写JavaScript代码调用该方法，以将校验结果显示出来，所以又称该方法为“显式校验方法”。
script type="text/javascript">
function check(){
var psw=document.getElementById("psw");
if(psw.checkValidity()) alert("密码输入正确");
else alert("密码输入错误，请再输一次");
return false;
}
/script>
form onsubmit="return check()">
密码：input type="password" pattern="^[a-zA-Z]/w{
3,6}
" name="psw" id="psw" required />
br />
input type="submit" value="提交" />
/form>
上述代码对密码输入有效性进行显式校验，分别将校验结果以警告对话框的形式展现。
★ 取消校验
有时需要把表单中已填写好的数据暂存一下，以便将来继续填写，即不管数据是否有效，取消表单的有效性校验。
取消表单校验的常用方法有两种：一种是为form> 元素设置 novalidate属性；另一种是对提交按钮设置formnovalidate
属性。第一种方式将关闭整个表单的校验，不管提交什么按钮都将不进行校验。第二种方式则由指定的提交按钮来关闭表单的输
入校验，只有当用户通过指定了 fornvalidate属性的按钮提交表单时才会关闭表单的输入校验。
方法一：form novalidate>
方法二：input type="submit" value="保存" formaction="save.jsp" formnovalidate>
★ 自定义校验错误提示信息
使用 setCustomValidity()自定义错误提示信息，可用于检测两次密码输入是否一致：
script type="text/javascript">
function check(){
var psw1=document.getElementById("password1");
var psw2=document.getElementById("password2");
if(psw1.value!=psw2.value) psw2.setCustomValidity("密码和确定密码不一致");
return false;
}
/script>
form action="">
密码：input type="password" id="password1" name="password1" />
br />
确认密码：input type="password" id="password2" name="password2" />
br />
input type="submit" name="" id="" value="提交" onclick="check()" />
/form>
4、简单介绍完HTML5 智能表单后，下面弄一个实例进行上面所有知识点的练习。
!doctype html>
html lang="en">
head>
meta charset="utf-8" />
title>
智能表单/title>
style>
body{
line-height:25px;
}
/style>
script>
//对用户提交的表单进行校验 function checkInput(){
var flag=false;
var username=$("username").value;
var pwd=$("pwd").value;
var email=$("email").value;
if(username==""){
alert("用户名不能为空！");
}
else if(username.length3){
alert("用户名长度必须大于3！");
}
else if(pwd.length6||pwd.length>
14){
alert("密码长度必须在6-14之间！");
}
else if(email.indexOf("@")==-1){
alert("邮箱格式不正确！");
}
else{
flag=true;
}
return flag;
}
function check(){
var psw1=document.getElementById("password1");
var psw2=document.getElementById("password2");
if(psw1.value!=psw2.value) psw2.setCustomValidity("密码和确定密码不一致");
return false;
}
function $(id){
return document.getElementById(id);
}
/script>
head>
body>
form action="" method="post" id="register" onsubmit="return check()">
用户名：input type="text" name="username" form="register" id="username" placeholder="请输入用户名" pattern="u/d{
4}
" autocomplete="off" autofocus/>
autofocus 自动获得焦点， autocomplete="off" 属性，这意味着涉及机密信息，不应被浏览器保存。br/>
密码：input type="password" id="password1" name="password1" placeholder="请输入密码"/>
placeholder="请输入密码"br />
确认密码：input type="password" id="password2" name="password2" />
br />
input type="submit" name="" id="" value="提交" onclick="check()" />
br/>
email：input type="email" name="email" form="register" id="email" required />
required 属性 定义必填项br/>
URL：input type="url" name="url" form="register" />
br/>
日期和时间datetime：input type="datetime" name="datetime" form="register" />
目前，很多浏览器都不支持datetime这个类型。故没效果br/>
本地日期和时间datetime-local：input type="datetime-local" name="datetime-local" form="register" />
br/>
日期date：input type="date" name="date" form="register" />
br/>
时间time：input type="time" name="time" form="register" />
br/>
月份month：input type="month" name="month" form="register" />
br/>
星期week：input type="week" name="week" form="register" />
br/>
数字number：input type="number" name="number" min="1" max="10" step="2" form="register" />
br/>
滚动条range：input type="range" name="range" min="1" max="10" form="register"/>
br/>
手机tel：input type="tel" name="phone" pattern="/d{
11}
" title="请输入11位的手机号码" form="register" />
pattern="/d{
11}
" title="请输入11位的手机号码"br/>
搜索search：input type="search" name="search" results="n" form="register" />
br/>
颜色color：input type="color" name="color" form="register"/>
br/>
学历datalist：input type="text" name="degree" form="register" list="degree"/>
br/>
datalist id="degree">
option label="top1" value="高中">
/option>
option label="top2" value="大专">
/option>
option label="top3" value="本科">
/option>
option label="top4" value="研究生">
/option>
option label="top5" value="博士">
/option>
/datalist>
input type="submit" value="登陆" form="register" />
input type="submit" value="注册" form="register" />
input type="submit" value="formaction='delete.jsp'" form="register" formaction="delete.jsp" />
/form>
meter 显示度量：meter value="3" min="0" max="10">
十分之三/meter>
br/>
p>
用 progress 显示任务进程：/p>
h1>
Please activate all the checkboxes/h1>
form method="get">
input type="checkbox" onchange="updateProgress()" />
input type="checkbox" onchange="updateProgress()" />
!--and 8 more-->
p>
Progress:progress value="0" max="10" id="pb">
/progress>
/p>
/form>
p>
用 output 进行计算：/p>
p>
form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0 input type="range" id="a" value="50">
100+input type="number" id="b" value="50">
=output name="x" for="a b">
/output>
/form>
/p>
script type="text/javascript">
function updateProgress(){
var pb=document.getElementById("pb");
var ip=document.getElementsByTagName("input");
var cnt=0;
for(var i=0;
iip.length;
i++){
if(ip[i].checked==true){
cnt++;
}
}
pb.value=cnt;
}
/script>
/body>
/html>
✪注意：具体的效果可以自己复制代码到浏览器运行下即可～
1、表单新增属性
☀ autofocus 属性
input type="text" autofocus/> 设置 autofocus 属性，使文本框自动获得焦点
注意:一个页面中最多只能有一个表单元素设置该属性，否则功能将失效，建议对第一个input元素设置autofocus属性。
☀ formaction 属性
input type="submit" formaction="处理逻辑"> !-- 处理逻辑可为add.jsp(添加)、update.jsp(修改)、delete.jsp(删除)。 -->
所有提交按钮(input type="submit"> 、input type="image"> 、button type="submit"> )都可以使用 formaction 属性。
HTML5只需添加formaction属性就可实现增加、修改和删除3个按钮功能，不再需要脚本的控制。
☀ autocomplete 属性
若一个元素内包含有 autocomplete="off" 属性，这意味着涉及机密信息，不应被浏览器保存。
若表单未定义 autocomplete，则默认设置为开启自动完成、显示输入提示(记忆用户在曾访问网站上所输入的内容)。
☀ pattern 属性
pattern 属性是input元素的验证属性，该属性的值是一个正则表达式，通过这个表达式可以验证输入内容的有效性。
用户名：input type="text" name="username" pattern="^[a-zA-Z]/w{
2,7}
" title="必须以字母开头，包含字符或数字，长度是3~8" />
br />
密码：input type="text" name="password" pattern="/d{
6}
" title="必须输入6个数字" />
br />
☀ placeholder 属性，也叫占位符
占位符值可以给予用户一个快速提示，让他们了解该在输入字段中输入什么，它并不会取代标签元素。当需要用户输入某一特定格式的内容时，
占位符显得尤其有用。浏览器会在输入字段显示提示文字。当该输入字段被聚焦(focus)激活，该提示文字则消失，失去焦点时又将自动显示。
姓名：input type="text" placeholder="请输入您的真实姓名" name="username">
br />
required 属性 定义必填项
required 是一个布尔型属性，包含此属性的表单元素必须被填写。在发送时若仍为空，浏览器就会给予相关相应。
2、新增的 input 元素类型
☀ 输入类型 tel 及 search
tel(电话输入文本) 及 search(搜索关键字输入的文本框) 类型与普通的文本没什么不同，
唯一不同的是输入关键字后search文本框右侧会出现一个"X"按钮，单击"X"后清空输入内容，由此带来方便。
☀ 输入类型 url 及 email
URL地址输入框要求必须输入一个包含访问协议的完整的URL路径。
URL网址：input type="url" name="rul" title="URL应包括访问协议">
email邮箱输入框要求输入正确格式，此外，还可以添加 multiple 属性以允许同时输入多个以逗号分隔的email。
Email：input type="email" name="email" title="email的格式是 XXX@XXX.XX ">
☀ 输入类型 number 及 range
number 及 range 类型与包含数值的输入有关，并且支持浮点数表达式。不同的是range类型是用一个滑块来进行输入。
输入数值的取值范围由 min和 max两个属性来设置，默认是不限定; 调节步长使用 step属性，默认步长是1.
input type="number/range" min="最小值" max="最大值" step="改变数值的步长" name="number/range">
☀ 输入类型 color
color 类型让 input元素生成一个颜色选择器。input type="color" name="color">
☀ datalist 选项列表
datalist 元素用于生成一个隐藏的下拉菜单，其相当于一个“看不见”的 select元素。为什么需要设置id值呢？
因为 datalist元素一般需要跟某个文本框结合使用，结合方式是通过将文本框的"list"属性值设置为 datalist的 id值，这样就将 datalist绑定到了某个文本框。用户选中选项后datalist元素自动隐藏。记住，跟文本框一起使用并给文本框list和自身id相同的值。
input type="text" name="degree" form="register" list="degree">
datalist id="degree">
option label="top1" value="大专">
/option>
option label="top2" value="本科">
/option>
option label="top3" value="研究生">
/option>
/datalist>
☀ 用 datetime(日期和时间),date(日期),time(时间),month,week以及 datetime-local(本地日期时间)这几个type类型表示日期和时间
input type="datetime/date/time/month/week/datetime-local" name="...">
datetime包括日期以及时间信息；时间设置始终为UTC。规范允许用户通过浏览器选择不同时区，但input元素的值始终会被转换为UTC格式。datetime属性 字符串必须以 Z 结束以表明它是UTC格式。"YYYY-MM-DDThh:mm:ss.ssZ"这是UTC格式.目前，很多浏览器都不支持datetime这个类型。
在 date和 month中，时间及时区则被忽略。根据规范定义，date必须是所选月份中的一个有效日期，同时考虑到闰年。年、月、日必须用“ - ”号隔开。为了确保星期与月份不被混淆，week前面通常会加上一个字母 W 。
datetime-local 与之前描述过的 datetime 作用基本相同，唯一不同之处是不需要表明时区。
☀ 使用 meter 显示度量
meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。例子：磁盘用量、查询结果的相关性，等等。
注释：meter> 标签虽说也可标记进度条，但并不应用于指示进度（在进度条中）。如果标记进度条，请使用 progress> 标签。
meter value="3" min="0" max="10"> 十分之三/meter> 或meter value="0.6"> /meter>
☀ 用 progress 显示任务进程
progress 元素被作用于展示一个任务的完成度，典型的例子是用户文件上传或下载。
举例来说，设计10个 checkbox类型的 input元素，当它们全部被激活时，进度条将显示到100%。
h1>
Please activate all the checkboxes/h1>
form method="get">
input type="checkbox" onchange="updateProgress()" />
input type="checkbox" onchange="updateProgress()" />
!--and 8 more-->
p>
Progress:progress value="0" max="10" id="pb">
/progress>
/p>
/form>
元素 progress的初始值为0，最大值为10.当 input元素被激活时，就会调用 updateProgress()函数，函数内容如下： script type="text/javascript">
function updateProgress(){
var pb=document.getElementById("pb");
var ip=document.getElementsByTagName("input");
var cnt=0;
for(var i=0;
iip.length;
i++){
if(ip[i].checked==true){
cnt++;
}
}
pb.value=cnt;
}
/script>
变量 ip包括了一个包含所有输入元素的节点列表(NodeList)。for循环测试每一个元素的当前状态，若其被激
活(checked==true),计数器变量cnt将增加1.同时，progress元素值将被设成计数器值。
☀ 用 output 进行计算
output 元素用于显示各种表单元素的内容或脚本执行结果，它的作用只是用于显示输出。最常用的例子是电子商务网站的
购物车。通过可选的 for属性，你可以决定将哪些字段添加到计算机中。执行运算需要提供一个或更多的相对应输入字段的 id。
举例来说，3种不同商品购物车：为了在 output元素中及时更新每次数量变化，使用表单的 oninput 事件：
table border="1" width="369" height="169">
tr>
th>
Product/th>
th>
Price(US$)/th>
th>
Quantity/th>
/tr>
tr>
td>
Keyboard/td>
td class="num" id="i1Price">
39.50/td>
td>
input name="i1" id="i1" type="number" min="0" value="0" max="99" />
/td>
/tr>
tr>
td>
Mouse/td>
td class="num" id="i2Price">
26.30/td>
td>
input name="i2" id="i2" type="number" min="0" value="0" max="99" />
/td>
/tr>
tr>
td>
Monitor/td>
td class="num" id="i3Price">
264.50/td>
td>
input name="i3" id="i3" type="number" min="0" value="0" max="99" />
/td>
/tr>
/table>
!-- output 元素在表格下方，相应输入字段中商品的 ID被赋值给 for属性。 -->
p>
Your shopping cart contains output name="sumProd" for="i1 i2 i3" id="sumProd">
/output>
items.Total price: output name="sum" for="i1 i2 i3" id="sum">
/output>
US$/p>
!-- 在这段JavaScript代码中，会遍历计算所有的 input元素，得出总数量和总价格。 -->
script type="text/javascript">
function updateSum(){
var ips = document.getElementsByTagName("input");
var sum = 0;
var prods = 0;
for (var i=0;
iips.length;
i++){
var cnt=Number(ips[i].value);
if (cnt>
0){
sum +=cnt*Number(document.getElementById( ips[i].name+"Price").innerHTML);
prods +=cnt;
}
}
document.getElementById("sumProd").value=prods;
document.getElementById("sum").value=sum;
}
/script>
我们运用JavaScript的 Number()函数将相关列的 innerHTML值转换为数字，并根据它直接从表格中的到商品价格，input字段也用这个方法取值(ips[i].value)。如果略过这个步骤的话，JavaScript会直接将字符串加入计算，这样可能导致无法得到正确的结果，计算结果将被赋值给 output 元素的 value 属性。
3、客户端表单验证
★ 自动校验
通过对元素使用 required、pattern、min、max和 step等属性以及新增的 input类型，可实现在表单提交时进行自动校验。前面有介绍过，
下面仅举一个简单的执行自动校验的示例。
姓名：input type="text" name="username" required>
年龄：input type="number" name="age" min="1" max="150" step="1">
手机号码：input type="text" name="phone" pattern="/d{
11}
" title="请输入11位的手机号码">
★ 显式校验：check Validity()方法进行校验
check Validity()返回一个布尔值，为表单中所有的元素或某个元素的内容无效时，返回 false值，否则返回 true。
我们可以通过编写JavaScript代码调用该方法，以将校验结果显示出来，所以又称该方法为“显式校验方法”。
script type="text/javascript">
function check(){
var psw=document.getElementById("psw");
if(psw.checkValidity()) alert("密码输入正确");
else alert("密码输入错误，请再输一次");
return false;
}
/script>
form onsubmit="return check()">
密码：input type="password" pattern="^[a-zA-Z]/w{
3,6}
" name="psw" id="psw" required />
br />
input type="submit" value="提交" />
/form>
上述代码对密码输入有效性进行显式校验，分别将校验结果以警告对话框的形式展现。
★ 取消校验
有时需要把表单中已填写好的数据暂存一下，以便将来继续填写，即不管数据是否有效，取消表单的有效性校验。
取消表单校验的常用方法有两种：一种是为form> 元素设置 novalidate属性；另一种是对提交按钮设置formnovalidate
属性。第一种方式将关闭整个表单的校验，不管提交什么按钮都将不进行校验。第二种方式则由指定的提交按钮来关闭表单的输
入校验，只有当用户通过指定了 fornvalidate属性的按钮提交表单时才会关闭表单的输入校验。
方法一：form novalidate>
方法二：input type="submit" value="保存" formaction="save.jsp" formnovalidate>
★ 自定义校验错误提示信息
使用 setCustomValidity()自定义错误提示信息，可用于检测两次密码输入是否一致：
script type="text/javascript">
function check(){
var psw1=document.getElementById("password1");
var psw2=document.getElementById("password2");
if(psw1.value!=psw2.value) psw2.setCustomValidity("密码和确定密码不一致");
return false;
}
/script>
form action="">
密码：input type="password" id="password1" name="password1" />
br />
确认密码：input type="password" id="password2" name="password2" />
br />
input type="submit" name="" id="" value="提交" onclick="check()" />
/form>
4、简单介绍完HTML5 智能表单后，下面弄一个实例进行上面所有知识点的练习。
!doctype html>
html lang="en">
head>
meta charset="utf-8" />
title>
智能表单/title>
style>
body{
line-height:25px;
}
/style>
script>
//对用户提交的表单进行校验 function checkInput(){
var flag=false;
var username=$("username").value;
var pwd=$("pwd").value;
var email=$("email").value;
if(username==""){
alert("用户名不能为空！");
}
else if(username.length3){
alert("用户名长度必须大于3！");
}
else if(pwd.length6||pwd.length>
14){
alert("密码长度必须在6-14之间！");
}
else if(email.indexOf("@")==-1){
alert("邮箱格式不正确！");
}
else{
flag=true;
}
return flag;
}
function check(){
var psw1=document.getElementById("password1");
var psw2=document.getElementById("password2");
if(psw1.value!=psw2.value) psw2.setCustomValidity("密码和确定密码不一致");
return false;
}
function $(id){
return document.getElementById(id);
}
/script>
head>
body>
form action="" method="post" id="register" onsubmit="return check()">
用户名：input type="text" name="username" form="register" id="username" placeholder="请输入用户名" pattern="u/d{
4}
" autocomplete="off" autofocus/>
autofocus 自动获得焦点， autocomplete="off" 属性，这意味着涉及机密信息，不应被浏览器保存。br/>
密码：input type="password" id="password1" name="password1" placeholder="请输入密码"/>
placeholder="请输入密码"br />
确认密码：input type="password" id="password2" name="password2" />
br />
input type="submit" name="" id="" value="提交" onclick="check()" />
br/>
email：input type="email" name="email" form="register" id="email" required />
required 属性 定义必填项br/>
URL：input type="url" name="url" form="register" />
br/>
日期和时间datetime：input type="datetime" name="datetime" form="register" />
目前，很多浏览器都不支持datetime这个类型。故没效果br/>
本地日期和时间datetime-local：input type="datetime-local" name="datetime-local" form="register" />
br/>
日期date：input type="date" name="date" form="register" />
br/>
时间time：input type="time" name="time" form="register" />
br/>
月份month：input type="month" name="month" form="register" />
br/>
星期week：input type="week" name="week" form="register" />
br/>
数字number：input type="number" name="number" min="1" max="10" step="2" form="register" />
br/>
滚动条range：input type="range" name="range" min="1" max="10" form="register"/>
br/>
手机tel：input type="tel" name="phone" pattern="/d{
11}
" title="请输入11位的手机号码" form="register" />
pattern="/d{
11}
" title="请输入11位的手机号码"br/>
搜索search：input type="search" name="search" results="n" form="register" />
br/>
颜色color：input type="color" name="color" form="register"/>
br/>
学历datalist：input type="text" name="degree" form="register" list="degree"/>
br/>
datalist id="degree">
option label="top1" value="高中">
/option>
option label="top2" value="大专">
/option>
option label="top3" value="本科">
/option>
option label="top4" value="研究生">
/option>
option label="top5" value="博士">
/option>
/datalist>
input type="submit" value="登陆" form="register" />
input type="submit" value="注册" form="register" />
input type="submit" value="formaction='delete.jsp'" form="register" formaction="delete.jsp" />
/form>
meter 显示度量：meter value="3" min="0" max="10">
十分之三/meter>
br/>
p>
用 progress 显示任务进程：/p>
h1>
Please activate all the checkboxes/h1>
form method="get">
input type="checkbox" onchange="updateProgress()" />
input type="checkbox" onchange="updateProgress()" />
!--and 8 more-->
p>
Progress:progress value="0" max="10" id="pb">
/progress>
/p>
/form>
p>
用 output 进行计算：/p>
p>
form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0 input type="range" id="a" value="50">
100+input type="number" id="b" value="50">
=output name="x" for="a b">
/output>
/form>
/p>
script type="text/javascript">
function updateProgress(){
var pb=document.getElementById("pb");
var ip=document.getElementsByTagName("input");
var cnt=0;
for(var i=0;
iip.length;
i++){
if(ip[i].checked==true){
cnt++;
}
}
pb.value=cnt;
}
/script>
/body>
/html>
✪注意：具体的效果可以自己复制代码到浏览器运行下即可～
觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： HTML5智能表单
本文地址： https://pptw.com/jishu/587240.html