Html user registration interface, html User Registration
First, go to a simple interface
Here is the content in the style.
<style> input[type]{ border: 1px solid darkorange; background: white; } #button{ border: 10px solid orange; width: 200px; box-shadow:0px 4px 5px #666; background: orange; color: white; } </style>
Let's talk about the content in the body. Here we use defocus onblur and focus onfocus.
<Body>
<Center>
<Div>
<Form>
<H3> User Registration <Hr>
<P> User name: <input type = "text" id = "name" placeholder = "Enter the user name" required = "required" onblur = "name1 ()" <! -- Onfocus = "name2 () -->"> <br> <span id = "tel"> </span> </p>
<P> password: <input id = "paswd" type = "password" placeholder = "enter the password" onblur = "pwd1 () "required =" required "onfocus =" pwd2 () "> <br> <span id =" pw "> </span> </p>
<P> Confirm password: <input id = "paswd2" type = "password" placeholder = "Please confirm password" required = "required" onkeyup = "validate () "> <br> <span id =" qpwtx "> </span> </p>
<P> email: <input type = "email" placeholder = "Please enter your email address" required = "required"> </p>
<P> <input type = "checkbox" required = "required"> I have read the Registration Manual. </p>
<P> <input type = "submit" id = "button" value = "register"> </p>
</Form>
</Div>
</Center>
</Body>
Finally, the Code in js
<Script>
Function name1 (){
Var name = document. getElementById ("name"). value;
If (name. length = ""){
Document. getElementById ("tel"). innerHTML = "the user name cannot be blank"
Document. getElementById ("tel"). style. color = "red ";
} Else {
Document. getElementById ("tel"). innerHTML = "√"
Document. getElementById ("tel"). style. color = "green ";
}
}
// Function name2 (){
// Document. getElementById ("tel"). innerHTML = "Enter the user name"
// Document. getElementById ("tel"). style. color = "#999 ";
//}
Function pwd2 (){
Document. getElementById ("pw"). innerHTML = "enter a 6-12-digit password"
Document. getElementById ("pw"). style. color = "#999 ";
}
Function pwd1 (){
P = document. getElementById ("paswd"). value;
If (p. length> = 6 & p. length <= 20)
{
Document. getElementById ("pw"). innerHTML = "√"
Document. getElementById ("pw"). style. color = "green ";
} Else {
Document. getElementById ("pw"). innerHTML = "format error. Please enter 6-20 characters"
Document. getElementById ("pw"). style. color = "red ";
}
}
Function validate (){
Var qpw = document. getElementById ("paswd"). value;
Var qpw2 = document. getElementById ("paswd2"). value;
If (qpw = qpw2 & p. length> = 6 & p. length <= 20 ){
Document. getElementById ("qpwtx"). innerHTML = "<font color = 'green'> √ </font> ";
Document. getElementById ("button"). disabled = false;
}
Else {
Document. getElementById ("qpwtx"). innerHTML = "<font color = 'red'> two different passwords or incorrect formats </font> ";
Document. getElementById ("button"). disabled = true;
}
}
</Script>
If you need it, you can use it for reference. If you think it's good, click here to recommend it.
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
