Smart Forms
<!doctype html><html lang="ZH-CN"> <head> <meta charset="Utf-8" /> <title>Smart Forms</title> <style> body{ line-height:px;} </style> <script> //Verify user-Submitted Forms function checkinput(){ varflag=false;varusername=$ ("username"). Value;varpwd=$ ("PWD"). Value;varemail=$ ("Email"). Value;if(username=="") {alert ("User name cannot be empty!" "); }Else if(username.length<3) {alert ("username must be longer than 3!" "); }Else if(pwd.length<6|| Pwd.length> -) {alert ("Password length must be between 6-14!" "); }Else if(Email.indexof ("@")==-1) {alert ("The mailbox format is not correct!" "); }Else{flag=true; }returnFlag } function $(ID){ returndocument.getElementById (ID); }</script> <head> <body> <form Action="login.html" method="POST" ID ="register"> </form>User name:<input type="text" name= "username" form=" Register " id=" username " placeholder=" Please enter user name " pattern= "U\d{4}" AutoComplete="Off"/><br/>Password:<input type="password" name="pwd" form="register " id=" pwd "/><br/>Mailbox:<input type="email " name="Email" form= "Register" id="Email" required /><br/>Url:<input type="url " name="url" 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/>Digital:<input type="number" name="number" min="1" max= "ten" step="2" form="register" Autofocus /><br/>Scroll bar:<input type="range" name="range" min="1" Max="Ten" form="register"/><br/>Search:<input type= "search" name= "search" results="n" Form="register" /><br/>Color:<input type="Color " name="Color" form= "register"/><br/>Degree:<input type="text" name= "degree" form="Register" List="degree"/><br/> <DataList id="degree"> <option>College</option> <option>Undergraduate</option> <option>Graduate</option> </DataList> <input type="Submit" value="Login" form= "Register" /> </body></html>
HTML5-Smart Form