Comments: HTML5 registration page. If you are studying html5, refer
The Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Title> register.html </title>
<Meta http-equiv = "keywords" content = "keyword1, keyword2, keyword3">
<Meta http-equiv = "description" content = "this is my page">
<Meta http-equiv = "content-type" content = "text/html; charset = UTF-8">
<LINK rel = "Shortcut icon" href = "favicon. ico"/>
<Link rel = "stylesheet" type = "text/css" href = "css/register.css"/>
<Script src = "js/checkbox. js" type = "text/javascript">
</Script>
<Script type = "text/javascript">
Function play (){
Document. getElementById ("menu_item"). style. display = "";
}
Function noplay (){
Document. getElementById ("menu_item"). style. display = "none ";
}
Function passwd (){
Var pass = document. getElementById ("password"). value;
Var tip = document. getElementById ("tip ");
If (pass. length <4 ){
Document. getElementById ("meter"). value = pass. length;
Tip. innerHTML = "poor ";
}
Else
If (pass. length <= 8 ){
Document. getElementById ("meter"). value = pass. length;
Tip. innerHTML = "medium ";
}
Else {
Document. getElementById ("meter"). value = pass. length;
Tip. innerHTML = "high ";
}
}
</Script>
</Head>
<Body>
<Div id = "3" style = "position: relative; top: 100px; z-index: 3;">
<Form id = "f1" action = "register.html" method = "post">
<Table align = "center" cellspacing = "0" class = "table">
<Tr class = "thead">
<Td align = "center">
Member registration
</Td>
</Tr>
<Tr>
<Td>
<Table id = "registertable" border = "0px" align = "center" border = "0px" cellspacing = "0" cellpadding = "5px">
<Tr>
<Tr>
<Td align = "right">
Employee ID:
</Td>
<Td align = "left">
<Input type = "text" name = "username" placeholder = "username" required/>
</Td>
</Tr>
<Tr>
<Td align = "right">
Password:
</Td>
<Td align = "left">
<Input type = "password" name = "password" id = "password" placeholder = "password" required onkeyup = "passwd ()"/>
<Meter min = "1" max = "10" low = "5" high = "8" value = "0" id = "meter">
</Meter>
<Span id = "tip"> </span>
</Td>
</Tr>
<Tr>
<Td align = "right">
Password confirmation:
</Td>
<Td align = "left">
<Input type = "password" name = "password2" placeholder = "Confirm password" required/>
</Td>
</Tr>
<Tr>
<Td align = "right">
Birthdate:
</Td>
<Td align = "left">
<Input type = "date" name = "borthday"/>
</Td>
</Tr>
<Tr>
<Td align = "right">
Sex:
</Td>
<Td align = "left">
<Input type = "radio" name = "gender" value = "0" checked/> male
<Input type = "radio" name = "gender" value = "1"/> female
</Td>
</Tr>
<Tr>
<Td align = "right">
Mail box:
</Td>
<Td align = "left">
<Input type = "email" name = "email" placeholder = "email" id = "email" required/>
</Td>
</Tr>
<Tr>
<Td align = "right">
Mobile:
</Td>
<Td align = "left">
<Input type = "tel" pattern = "[0-9] {11}" id = "p" name = "phone" placeholder = "enter an 11-digit number"/>
</Td>
</Tr>
<Tr>
<Td align = "right">
Address:
</Td>
<Td align = "left">
<Input type = "text" name = "address" placeholder = "address" list = "l"/>
<Datalist id = "l">
<Option value = "sh"> Shanghai </option>
<Option value = "bj"> Beijing </option>
<Option value = "js"> Jiangsu </option>
<Option value = "zz"> Zhengzhou </option>
<Option value = "sz"> Shenzhen </option>
</Datalist>
</Td>
</Tr>
<Tr>
<Td align = "right">
Personal webpage:
</Td>
<Td align = "left">
<Input type = "url" name = "page" placeholder = "home site"/>
</Td>
</Tr>
<Tr>
<Td align = "right">
Get up time:
</Td>
<Td align = "left">
<Input type = "time" name = "bed" onblur = "pro ()"/>
</Td>
</Tr>
<Tr>
<Td align = "right">
Avatar:
</Td>
<Td align = "left">
<Input type = "file" id = "f" accept = "image/jpeg" onchange = "show () "/> <span> </span>
<Script>
Function show (){
Var file = document. getElementById ("f"). files [0];
Var fileReader = new FileReader ();
FileReader. readAsDataURL (file );
FileReader. onload = function (){
Document. getElementById ("img"). src = fileReader. result;
}
}
</Script>
</Td>
</Tr>
<Tr>
<Td colspan = "2">
<Details>
<P>
Allow registration
<Mark>
License
</Mark> Information
</P>
<Summary>
Registration License Information
</Summary>
</Details>
</Td>
</Tr>
<Tr>
<Td align = "right">
Verification Code:
</Td>
<Td valign = "middle">
<Input type = "text" name = "captcha" size = "11" maxlength = "4" title = "Enter the verification code on the right"/>
<Span id = "span"> </span>
<Script>
Var span = document. getElementById ("span ");
Span. innerHTML = Math. floor (Math. random ());
</Script>
</Td>
</Tr>
<Tr height = "60px">
<Td align = "center" colspan = "2">
<Input type = "button" value = "go to logon" onclick = "Login location.replace('login.html ')" id = "btn1" onmousemove = "changeBgColor ('btn1 ') "onmouseout =" recoverBgColor ('btn1 ') "class =" submit "/> <input type =" submit "accesskey =" enter "value =" register "id =" btn "onmousemove =" changeBgColor ('btn ') "onmouseout =" recoverBgColor ('btn '); "class =" submit "formmethod =" post "/>
</Td>
</Tr>
</Table>
</Td>
</Tr>
</Table>
</Form>
</Div>
</Body>
</Html>
The Code is as follows:
Body {
Background-image: url ("../images/bg.jpg ");
Text-align: center;
Background-repeat: repeat-x;
Background-position: 0px 0px;
Background-size:
}
. Table {
Border: 1px solid #90 BFFF;
Width: 810px;
}
Tr {
Font-family:;
Font-weight: 800;
Color: #448EF3;
}
Input {
Border: 1px solid #448EF3;
Color: #448EF3;
Font-weight: bold;
Font-family: "";
Height: 35px;
Line-height: 30px;
Border-radius: 5px;
}
. Submit {
Width: 150px;
Height: 40px;
Cursor: hand;
Font-size: 20px;
Color: # ffffff;
Background-color: #448EF3;
Border: 0px;
}
. Thead {
Height: 40px; background: #90 BFFF;
Font-family: "";
Font-size: 30px;
Font-weight: 700;
Color: # ffffff;
Background: #90 BFFF;
}
#3 {
Margin-bottom: 100px;
}
The Code is as follows:
Function ChkAllClick (sonName, cbAllId ){
Var arrSon = document. getElementsByName (sonName );
Var cbAll = document. getElementById (cbAllId );
Var tempState = cbAll. checked;
For (I = 0; I <arrSon. length; I ++ ){
If (arrSon [I]. checked! = TempState)
ArrSon [I]. click ();
}
}
Function ChkSonClick (sonName, cbAllId ){
Var arrSon = document. getElementsByName (sonName );
Var cbAll = document. getElementById (cbAllId );
For (var I = 0; I <arrSon. length; I ++ ){
If (! ArrSon [I]. checked ){
CbAll. checked = false;
Return;
}
}
CbAll. checked = true;
}
Function ChkOppClick (sonName ){
Var arrSon = document. getElementsByName (sonName );
For (I = 0; I <arrSon. length; I ++ ){
ArrSon [I]. click ();
}
}
Function changeBgColor (btn ){
Var btn = document. getElementById (btn );
Btn. style. backgroundColor = "#90 BFFF"
}
Function recoverBgColor (btn ){
Var btn = document. getElementById (btn );
Btn. style. backgroundColor = "#448EF3"
}
------------------------------------------------
The order of the above files is: register.html register.css checkbox.. js
-------------------------------------------------
Background Image: bg.jpg
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
