HTML5 新增加了哪些表单元素
首先先说一个html5中表单新增的一个功能，在我们之前的html中，表单元素必须放在form元素所包含的里面，在html5中，可以把他们写在页面上的任何一个地方，然后给该元素增加一个form属性，form属性的值为form表单的id，如下：
[html] view plain copy
《form method=“get“ id=“test“》
《input type=“text“ name=“name“/》
《input type=“password“ name=“password“/》
《input type=“submit“ value=“提交“》
《/form》
《input type=“text“ name=“confirm“ form=“test“》
在form元素里面的表单元素可以不用添加form属性，如果你想利用form获取所有表单元素的值，那么在form元素外面的表单元素就必须添加form属性，input、select、textarea等元素都满足该功能。-html表单元素
接下来开始介绍html5新增的表单元素，所有例子均用谷歌浏览器展示。
新增表单元素
email：提交表单的时候验证输入值是否满足email的格式
《input type=“email“ name=“email“/》
url：提交表单的时候验证输入值是否满足url的格式
《input type=“url“ name=“url“/》
number：根据你的设置提供选择数字的功能，其中min为最小值，max为最大值，value为默认值，step为点击箭头时数字的变化量，max、min、step、value均可不写，目前某些浏览器还不支持。-表单
《input type=“number“ name=“number“ min=2 max=100 step=5 value=“15“/》
range：会以一个滑块的形式表现包含一定范围内数字值的输入域，max为最大值，min为最小值，value为默认值，如果没有设置max和min，默认值是1-100
《input type=“range“ name=“range“ min=20 max=200 value=“60“/》
日期和时间类型：
date：选取日、月、年
《input type=“date“ name=“date“/》
month：选取月、年
《input type=“month“ name=“month“/》
week：选取周、年
《input type=“week“ name=“week“/》
time：选取小时、分钟
《input type=“time“ name=“time“/》
datetime：选取时间、日、月、年(UTC时间)（我这里浏览器显示不出效果）
《input type=“datetime“ name=“datetime“/》
datetime-local：选取时间、日、月、年(本地时间)
《input type=“datetime-local“ name=“datetime-local“/》
search：用于搜索域，若加上result=“s“属性，则会在搜索框前面加一个搜索图标（我这里浏览器显示不出效果）
《input type=“search“ name=“search“ result=“s“/》
tel：验证输入的是否是电话号码的格式（我这里浏览器显示不出效果）
《input type=“tel“ name=“tel“ /》
color：color类型会提供颜色拾取器，供用户选择颜色，并将用户选择的颜色填充到此元素中
《input type=“color“ name=“color“/》
新增input属性(部分容易理解的就不进行代码演示了)，后面为支持该属性的元素
autofocus：在打开页面时使元素自动获取焦点 //input,button,select,textarea-html表单元素
placeholder: 在用户输入时进行提示 // input,textarea-表单
form：这篇文章的开头就有这个属性，它用于表明元素属于哪个表单，无论元素的位置在哪里，所属表单都能获取该元素的值 //input,output,button,select,textarea,fieldset -html表单元素
required：表明该元素是必填项，当提交表单的时候会自动验证该元素的内容是否不为空 //input,textarea
max/min/step：限制值的输入范围，以及值的变化程度。上面的新增number元素有介绍。 //input
autocomplete：使form元素或者input元素拥有自动完成功能，既记录用户之前输入的值，关闭为off，默认为on。 //form,input-表单
表单重写属性： //input
formaction:重写表单的action属性
formenctype:重写表单的enctype属性。
enctype属性管理的是表单的MIME编码，MIME就是一种电子邮件传输的互联网标准，表明传递的信息类型和编码，共有三个值可选：
1，application/x-www-form-urlencoded（默认），设置表单传输的编码。
2，multipart/form-data，指定传输数据的特殊类型，主要就是上传的非文本内容，比如文件、图片。
3，text/plain，纯文本传输。
formmethod: 重写表单的method属性
formnovalidate:重写表单的novalidate属性
formtarget：重写表单的target属性。
比如:
[html] view plain copy
《form action=“test.html“ method=“get“ autocomplete=“on“》
姓名: 《input type=“text“ name=“name“ /》《br /》
密码: 《input type=“password“ name=“pwd“ /》《br /》
《input type=“submit“ formnovalidate=“true“ value=“提交未经验证“/》
《/form》
multiple:规定输入字段可选择多个值 //input,select
list：list属性的值为datalist元素的id，datalist元素类似于选择框，在文本框获得焦点的时候以提示输入的方式显示。如下：
[html] view plain copy
姓名：《input type=“text“ name=“name“ list=“name“/》
《datalist id=“name“ 》
《option value=“zhangsan“》张三《/option》
《option value=“lisi“》李四《/option》
《option value-“wanger“》王二《/option》
《/datalist》
pattern:验证input输入域的格式，即正则表达式。
《input type=“text“ name=“name“ pattern=“[A-z0-9]{8}“/》
谁能帮我做个检查表单的代码
《html》
《head》
《meta
document.all.dd.innerHTML=’《font color=red》两次密码输入不符《/font》’;
d=1;
}
else{d=0;check();}
}
function check_4() //mail文本框必填 填写电子邮件 否则提示：电子邮件格式不符
{
document.all.ee.innerHTML=’ ’;
var re=/\w+@\w+(\.\w+)+/ig;
document.form1.mail.value=trim(document.form1.mail.value);
if(!re.test(document.form1.mail.value)){
document.all.ee.innerHTML=’《font color=red》电子邮件格式不符《/font》’;
e=1;
}
else{e=0;check();}
}
function check_5() //QQ号码 必填文本框填写5~9位数字 否则提示格式错误或者未填写QQ号
{
document.all.ff.innerHTML=’ ’;
var re=/^{4,}/;
document.form1.qq.value=trim(document.form1.qq.value);
if(!re.test(document.form1.qq.value)){
document.all.ff.innerHTML=’《font color=red》格式错误或者未填写QQ号《/font》’;
f=1;
}
else{f=0;check();}
}
function trim(inputstr) //除去空格
{
if(!inputstr.length》0) return ““;
var starts=0;
var ends=inputstr.length;
while(starts《ends)
{
if(inputstr.substring(starts,starts+1)==“ “)
starts++;
else
break;
}
while(starts《ends)
{
if(inputstr.substring(ends-1,ends)==“ “)
ends--;
else
break;
}
return inputstr.substring(starts,ends);
}
《/script》
《/head》
《body》
《form name=“form1“ method=“POST“ action=“--WEBBOT-SELF--“》
《table border=“1“ width=“96%“ id=“table1“》
《tr》
《td colspan=“3“》
《p align=“center“》注册表《/td》
《/tr》
《tr》
《td width=“20%“ align=“right“》用户名《/td》
《td width=“22%“》《input type=“input“ value=““ name=“username“ onchange=“check_0();“》《/td》
《td width=“53%“ id=“aa“》 《/td》
《/tr》
《tr》
《td width=“20%“ align=“right“》生日《/td》
《td width=“22%“》《input type=“input“ value=““ name=“birthday“ onchange=“check_1();“》《/td》
《td width=“53%“ id=“bb“》 《/td》
《/tr》
《tr》
《td width=“20%“ align=“right“》密码《/td》
《td width=“22%“》《input type=“password“ value=““ name=“password“ onchange=“check_2();“》《/td》
《td width=“53%“ id=“cc“》 《/td》
《/tr》
《tr》
《td width=“20%“ align=“right“》密码确认《/td》
《td width=“22%“》《input type=“password“ value=““ name=“cpassword“ onchange=“check_3();“》《/td》
《td width=“53%“ id=“dd“》 《/td》
《/tr》
《tr》
《td width=“20%“ align=“right“》电子邮件《/td》
《td width=“22%“》《input type=“input“ value=““ name=“mail“ onchange=“check_4();“》《/td》
《td width=“53%“ id=“ee“》 《/td》
《/tr》
《tr》
《td width=“20%“ align=“right“》QQ号码《/td》
《td width=“22%“》《input type=“input“ value=““ name=“qq“ onchange=“check_5();“》《/td》
《td width=“53%“ id=“ff“》 《/td》
《/tr》
《tr》
《td colspan=“3“》
《p align=“center“》《input type=“submit“ value=“提交“ name=“sub“ disabled=“true“》 《input type=“reset“ value=“重置“》《/td》
《/tr》
《/table》
《/form》
《/body》
《/html》
-html表单元素
js表单验证
《HTML》
《meta charset=“gbk“/》
《head》
《SCRIPT LANGUAGE=“JavaScript“》
function Check(frm1)
{
if (frm1.username.value==““){
alert(“用户名不能为空！“);
document.frm1.username.focus();
return false;
}
if (frm1.p.value==““){
alert(“密码不能为空！“);
document.frm1.p.focus();
return false;
}
if (frm1.p2.value!=frm1.p.value){
alert(“两次密码不一致！“);
document.frm1.p2.focus();
return false;
}
if (frm1.y.value==““){
alert(“邮箱不能为空！“);
document.frm1.y.focus();
return false;
}
}
《/SCRIPT》
《/head》
《BODY》
《FORM NAME=“frm1“》
用户名:《INPUT TYPE=“text“ name=“username“》《br》
密码:《INPUT TYPE=“password“ name=“p“》《br》
重复密码:《INPUT TYPE=“password“ name=“p2“》《br》
邮箱:《INPUT TYPE=“text“ name=“y“》《br》
城市:《select》
《option》山东《/option》
《option》湖南《/option》
《/select》《br》
爱好:吃饭《INPUT TYPE=“checkbox“》睡觉《INPUT TYPE=“checkbox“》吃饭和睡觉《INPUT TYPE=“checkbox“》
男《INPUT TYPE=“radio“》女《INPUT TYPE=“radio“》《br》
个人简介 《textarea》 《/textarea》 《br》
《INPUT TYPE=“submit“ VALUE=“确定“ ONCLICK=“return Check(this.form)“》
《INPUT TYPE=“submit“ VALUE=“重置“ 》
《/FORM》
《/BODY》
《/HTML》
改成这样就行了-表单
