How To Create a Register Form [Link]
asp
Tutorials Exercises Services Sign Up Log in
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C
ADVERTISEMENT
How TO - Register Form
❮ Previous Next ❯
Learn how to create a register form with CSS.
Register
Please fill in this form to create an account.
Email
Enter email
Password
Enter Password
Repeat Password
Repeat Password
By creating an account you agree to our Terms & Privacy.
Register
1 of 8 30-Aug-24, 4:57 PM
How To Create a Register Form [Link]
Tutorials ExercisesAlready
Services
have anaccount? Signin Sign Up Log in
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C
Try it Yourself »
ADVERTISEMENT
How To Create a Register Form
Step 1) Add HTML:
Use a <form> element to process the input. You can learn more about this in our PHP
tutorial. Then add inputs (with a matching label) for each field:
Example
<form action="action_page.php">
<div class="container">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" id="email"
required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" id="psw"
required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat"
id="psw-repeat" required>
<hr>
<p>By creating an account you agree to our <a href="#">Terms &
Privacy</a>.</p>
<button type="submit" class="registerbtn">Register</button>
</div>
2 of 8 30-Aug-24, 4:57 PM
How To Create a Register Form [Link]
<div class="container signin">
Tutorials have
<p>Already Exercises
an account?Services
<a href="#">Sign in</a>.</p> Sign Up
Log in
</div>
HTML CSS
</form> JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C
ADVERTISEMENT
ADVERTISEMENT
Step 2) Add CSS:
Example
* {box-sizing: border-box}
/* Add padding to containers */
.container {
padding: 16px;
}
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
3 of 8 30-Aug-24, 4:57 PM
How To Create a Register Form [Link]
background: #f1f1f1;
} Tutorials Exercises Services Sign Up Log in
HTML CSS JAVASCRIPT input[type=password]:focus
input[type=text]:focus, SQL PYTHON JAVA {PHP HOW TO [Link] C
background-color: #ddd;
ADVERTISEMENT
outline: none;
}
/* Overwrite default styles of hr */
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
/* Set a style for the submit/register button */
.registerbtn {
background-color: #04AA6D;
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.registerbtn:hover {
opacity:1;
}
/* Add a blue text color to links */
a {
color: dodgerblue;
}
/* Set a grey background color and center the text of the "sign in" section
*/
.signin {
background-color: #f1f1f1;
text-align: center;
}
4 of 8 30-Aug-24, 4:57 PM
How To Create a Register Form [Link]
Try it Yourself »
Tutorials Exercises Services Sign Up Log in
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C
ADVERTISEMENT
Tip: Go to our HTML Form Tutorial to learn more about HTML Forms.
Tip: Go to our CSS Form Tutorial to learn more about how to style form elements.
❮ Previous Next ❯
W3schools Pathfinder
Track your progress - it's free! Sign Up Log in
ADVERTISEMENT
5 of 8 30-Aug-24, 4:57 PM
How To Create a Register Form [Link]
Tutorials Exercises Services Sign Up Log in
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C
ADVERTISEMENT
6 of 8 30-Aug-24, 4:57 PM
How To Create a Register Form [Link]
Tutorials Exercises COLOR
Services PICKER Sign Up Log in
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO [Link] C
ADVERTISEMENT
ADVERTISEMENT ADVERTISEMENT
PLUS SPACES GET CERTIFIED
FOR TEACHERS FOR BUSINESS CONTACT US
Top Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
7 of 8 30-Aug-24, 4:57 PM
How To Create a Register Form [Link]
[Link] Tutorial
Bootstrap Tutorial
Tutorials
PHP Tutorial
Exercises Services Sign Up Log in
Java Tutorial
HTML
CSS C++ Tutorial
JAVASCRIPT
SQL PYTHON JAVA PHP HOW TO [Link] C
jQuery Tutorial
ADVERTISEMENTTop References
FORUM ABOUT ACADEMY
HTML Reference
W3Schools
CSS Referenceis optimized for learning and training. Examples might be simplified to
improve
JavaScriptreading
Referenceand learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we
SQL Reference
cannotReference
Python warrant full correctness
of all content.
[Link] ReferenceWhile using W3Schools, you agree to have read and accepted our
terms of use, cookie and privacy policy.
Bootstrap Reference
PHP Reference
Copyright
HTML Colors1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by
[Link].
Java Reference
Angular Reference
jQuery Reference
Top Examples Get Certified
HTML Examples HTML Certificate
CSS Examples CSS Certificate
JavaScript Examples JavaScript Certificate
How To Examples Front End Certificate
SQL Examples SQL Certificate
Python Examples Python Certificate
[Link] Examples PHP Certificate
Bootstrap Examples jQuery Certificate
PHP Examples Java Certificate
Java Examples C++ Certificate
XML Examples C# Certificate
jQuery Examples XML Certificate
8 of 8 30-Aug-24, 4:57 PM
