form表单

<form id="myForm" action="http://www.baidu.com"></form>

<input type="text" form="myForm">

<input type="submit" form="myForm">

指向表单元素

关于email

<form id="myForm" action="http://www.baidu.com"></form>

<input type=email name=email form="myForm">

<input type="submit" form="myForm">

关于url

<form id="myForm" action="http://www.baidu.com"></form>

<input type=url name=url form="myForm">

<input type="submit" form="myForm">

关于时间

<form id="myForm" action="http://www.baidu.com"></form>

<input type=url name=url form="myForm">

<input type="date">

<input type=time>

<input type=month>

<input type=week>

<input type=datetime>

<input type=datetime-local/>

后边两个支持率相当差，不推荐使用

关于number

<input type="number" max=10 min=0 step=2 value="5"/>

关于range

<input type="range" value="100" />

<input type="range" max=10 min=0 step=1 value=5>

关于color

<input type="color" value="#34538b" />

placeholder

<input id=placeholders placeholder="点击我会以清除">

required默认验证规则

<input id=placeholder name=name required form="myForm">

<input id=placeholder name=require1 required="required" form="myForm">

自定义验证

<input name=require2 pattern="^[1-9]\d{5}$" form="myForm">

maxLength

<textarea id="notes" name="notes" maxLength="10"></textarea>

关于提示文字

<input id=placeholder name=require1 required="required" oninvalid="setCustomValidity('滚蛋')" form="myForm">

<input name=require2 pattern="^[1-9]\d{5}$" oninput="setCustomValidity('gun')" form="myForm">

autofocus自动获得焦点

maxLength<textarea id="notes" name="notes" maxLength="10" autofocus="true"></textarea>

自动完成功能，垃圾

<form action="#" method="get" autocomplete="on">

First name:<input type="text" name="fname" /><br />

Last name: <input type="text" name="lname" /><br />

E-mail: <input type="email" name="email" autocomplete="off" /><br />

<input type="submit" />

</form>

novalidate

<form action="http://www.baidu.com" novalidate="novalidate">

E-mail: <input type="email" name="user_email" />

<input type="submit" />

</form>

<form>表单验证

<form action="http://www.baidu.com" method="post" onsubmit="return check()">

姓名<input type="text" name="uName" id="uName" onblur="checkName()">

<span id="nameMessage"></span><br/>

密码<input type="password" name="uPwd" id="uPwd" onblur="checkPwd()">

<span id="pwdMessage"></span><br/>

email<input type="text" name="uEmail" id="uEmail" onblur="checkEmail()">

<span id="emailMessage"></span><br/>

<input type="submit">

</form>

<script type="text/javascript">

/**

* checkName（）---检查用户名是否合法

* 返回值---boolean

* 执行成功--返回是否boolean

*/

function checkName(){

//1：找到要检测的输入框并且取得输入框当前的值

var uName=document.getElementById("uName").value;

var message=document.getElementById("nameMessage")

//判断

//是否为空 最小/大长度

if(uName.length==0){

message.innerText="用户名不能为空"

return false;

}else if(uName.length<6||uName.length>16){

message.innerText="用户名长度在6-16位之间"

return false;

}else{

message.innerText="用户名可以使用"

return true;

}

}

/**

* checkEmail（）---检查email邮箱是否合法

* 返回值---boolean

* 执行成功--返回是否boolean

*/

function checkEmail(){

var eEmail=document.getElementById("uEmail").value;

var message=document.getElementById("emailMessage")

//email是否合法

//1404395850@qq.com

var v1=eEmail.indexOf('@') //检测必须要有@

var v2=eEmail.indexOf('.') //检测必须要有"."

if(v1==-1||v2==-1||v1>v2){ //v1==-1、v2==-1表示里面没有"@""."；v1>v2表示"@"在"."后面

message.innerHTML="请输入正确的email邮箱地址"

return false;

}else{

//1404395850@qq.com

var v=eEmail.substring(0,v1); //截取用户名

message.innerHTML="邮箱正确"+v;

return true;

}

}

function check(){

return checkName()&&checkPwd()&&checkEmail();

}

</script>