Scribd
Upload
5 views13 pages

How To Create A Sign Up Form

The document provides a tutorial on how to create a responsive sign-up form using HTML and CSS. It outlines the necessary HTML structure for the form, including input fields for email and password, and provides CSS styles to enhance the form's appearance. Additionally, it includes instructions for implementing a modal version of the sign-up form and JavaScript for closing the modal when clicking outside of it.

Uploaded by

ahmrichghiddymaxwell
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views13 pages

How To Create A Sign Up Form

The document provides a tutorial on how to create a responsive sign-up form using HTML and CSS. It outlines the necessary HTML structure for the form, including input fields for email and password, and provides CSS styles to enhance the form's appearance. Additionally, it includes instructions for implementing a modal version of the sign-up form and JavaScript for closing the modal when clicking outside of it.

Uploaded by

ahmrichghiddymaxwell
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

How To Create a Sign Up Form https://www.w3schools.com/howto/howto_css_signup_form.

asp

 Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

How TO - Sign Up Form


❮ Previous Next ❯

Learn how to create a responsive sign up form with CSS.

Click on the button to open the sign up form:

Sign Up

Try it Yourself »

How To Create a Sign Up 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" style="border:1px solid #ccc">


<div class="container">
<h1>Sign Up</h1>
<p>Please fill in this form to create an account.</p>

1 of 13 30-Aug-24, 4:53 PM
How To Create a Sign Up Form https://www.w3schools.com/howto/howto_css_signup_form.asp

<hr>
 Tutorials  Exercises  Services   Sign Up Log in
<label for="email"><b>Email</b></label>
HTML
 CSS
<input JAVASCRIPT placeholder="Enter
type="text" SQL PYTHON Email"
JAVA name="email"
PHP HOW TO W3.CSS
required> C

<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>

<label for="psw-repeat"><b>Repeat Password</b></label>


<input type="password" placeholder="Repeat Password" name="psw-repeat"
required>

<label>
<input type="checkbox" checked="checked" name="remember"
style="margin-bottom:15px"> Remember me
</label>

<p>By creating an account you agree to our <a href="#"


style="color:dodgerblue">Terms & Privacy</a>.</p>

<div class="clearfix">
<button type="button" class="cancelbtn">Cancel</button>
<button type="submit" class="signupbtn">Sign Up</button>
</div>
</div>
</form>

Step 2) Add CSS:

Example

* {box-sizing: border-box}

/* Full-width input fields */


input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;

2 of 13 30-Aug-24, 4:53 PM
How To Create a Sign Up Form https://www.w3schools.com/howto/howto_css_signup_form.asp

display: inline-block;
 Tutorials
border: 
none; Exercises  Services   Sign Up Log in
background: #f1f1f1;
HTML
 } CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}

hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}

/* Set a style for all buttons */


button {
background-color: #04AA6D;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}

button:hover {
opacity:1;
}

/* Extra styles for the cancel button */


.cancelbtn {
padding: 14px 20px;
background-color: #f44336;
}

/* Float cancel and signup buttons and add an equal width */


.cancelbtn, .signupbtn {
float: left;
width: 50%;
}

3 of 13 30-Aug-24, 4:53 PM
How To Create a Sign Up Form https://www.w3schools.com/howto/howto_css_signup_form.asp

/* AddTutorials
padding  to Exercises
container Services*/
 elements   Sign Up Log in
.container {
HTML
 CSS
padding: JAVASCRIPT
16px; SQL PYTHON JAVA PHP HOW TO W3.CSS C
}

/* Clear floats */
.clearfix::after {
content: "";
clear: both;
display: table;
}

/* Change styles for cancel button and signup button on extra small screens
*/
@media screen and (max-width: 300px) {
.cancelbtn, .signupbtn {
width: 100%;
}
}

Try it Yourself »

How To Create a Modal Sign Up 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

<!-- Button to open the modal -->


<button onclick="document.getElementById('id01').style.display='block'">Sign
Up</button>

<!-- The Modal (contains the Sign Up form) -->

4 of 13 30-Aug-24, 4:53 PM
How To Create a Sign Up Form https://www.w3schools.com/howto/howto_css_signup_form.asp

<div id="id01" class="modal">


 Tutorials
<span  Exercises  Services   Sign Up
onclick="document.getElementById('id01').style.display='none'" Log in
class="close" title="Close Modal">times;</span>
HTML
 CSS class="modal-content"
<form JAVASCRIPT SQL action="/action_page.php">
PYTHON JAVA PHP HOW TO W3.CSS C
<div class="container">
<h1>Sign Up</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" required>

<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw"
required>

<label for="psw-repeat"><b>Repeat Password</b></label>


<input type="password" placeholder="Repeat Password" name="psw-repeat"
required>

<label>
<input type="checkbox" checked="checked" name="remember"
style="margin-bottom:15px"> Remember me
</label>

<p>By creating an account you agree to our <a href="#"


style="color:dodgerblue">Terms & Privacy</a>.</p>

<div class="clearfix">
<button type="button"
onclick="document.getElementById('id01').style.display='none'"
class="cancelbtn">Cancel</button>
<button type="submit" class="signup">Sign Up</button>
</div>
</div>
</form>
</div>

ADVERTISEMENT

5 of 13 30-Aug-24, 4:53 PM
How To Create a Sign Up Form https://www.w3schools.com/howto/howto_css_signup_form.asp

 Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

Step 2) Add CSS:

Example

* {box-sizing: border-box}
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}

/* Add a background color when the inputs get focus */


input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}

/* Set a style for all buttons */


button {
background-color: #04AA6D;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}

button:hover {

6 of 13 30-Aug-24, 4:53 PM
How To Create a Sign Up Form https://www.w3schools.com/howto/howto_css_signup_form.asp

opacity:1;
} Tutorials  Exercises  Services   Sign Up Log in

HTML CSS styles


 /* Extra JAVASCRIPT SQL button
for the cancel PYTHON
*/ JAVA PHP HOW TO W3.CSS C
.cancelbtn {
padding: 14px 20px;
background-color: #f44336;
}

/* Float cancel and signup buttons and add an equal width */


.cancelbtn, .signupbtn {
float: left;
width: 50%;
}

/* Add padding to container elements */


.container {
padding: 16px;
}

/* The Modal (background) */


.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: #474e5d;
padding-top: 50px;
}

/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and
centered */
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}

7 of 13 30-Aug-24, 4:53 PM
How To Create a Sign Up Form https://www.w3schools.com/howto/howto_css_signup_form.asp

/* Style
Tutorials Exercises
the horizontal 
ruler Services 
*/  Sign Up Log in
hr {
HTML
 CSS 1px
border: JAVASCRIPT SQL
solid #f1f1f1; PYTHON JAVA PHP HOW TO W3.CSS C
margin-bottom: 25px;
}

/* The Close Button (x) */


.close {
position: absolute;
right: 35px;
top: 15px;
font-size: 40px;
font-weight: bold;
color: #f1f1f1;
}

.close:hover,
.close:focus {
color: #f44336;
cursor: pointer;
}

/* Clear floats */
.clearfix::after {
content: "";
clear: both;
display: table;
}

/* Change styles for cancel button and signup button on extra small screens
*/
@media screen and (max-width: 300px) {
.cancelbtn, .signupbtn {
width: 100%;
}
}

Tip: You can also use the following javascript to close the modal by clicking outside of
the modal content (and not just by using the "x" or "cancel" button to close it):

8 of 13 30-Aug-24, 4:53 PM
How To Create a Sign Up Form https://www.w3schools.com/howto/howto_css_signup_form.asp

 Tutorials  Exercises  Services   Sign Up Log in


Example
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

<script>
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it


window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>

Try it Yourself »

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

9 of 13 30-Aug-24, 4:53 PM
How To Create a Sign Up Form https://www.w3schools.com/howto/howto_css_signup_form.asp

 Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

COLOR PICKER

 
ADVERTISEMENT

10 of 13 30-Aug-24, 4:53 PM
How To Create a Sign Up Form https://www.w3schools.com/howto/howto_css_signup_form.asp

 Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

11 of 13 30-Aug-24, 4:53 PM
How To Create a Sign Up Form https://www.w3schools.com/howto/howto_css_signup_form.asp

 Tutorials  Exercises 
ADVERTISEMENT
Services  
ADVERTISEMENT
Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

 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
W3.CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial

Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference

12 of 13 30-Aug-24, 4:53 PM
How To Create a Sign Up Form https://www.w3schools.com/howto/howto_css_signup_form.asp

Bootstrap Reference

 PHP Reference
Tutorials 
HTML Colors
Exercises  Services   Sign Up Log in
Java Reference
HTML
 CSS Angular Reference
JAVASCRIPT
     SQL PYTHON JAVA PHP HOW TO W3.CSS C
jQuery Reference

Top Examples Get Certified


FORUM ABOUT ACADEMY
HTML Examples HTML Certificate
W3Schools
CSS Examplesis optimized for learning and training.
CSS Examples
Certificate might be simplified to
improve reading
JavaScript Examplesand learning. JavaScript Certificate
Tutorials, references, and examples are constantly
How To Examples Frontreviewed to avoid errors, but we
End Certificate
cannot
SQL warrant full correctness
Examples SQL Certificate
of all content.
Python ExamplesWhile using W3Schools, you agree to have
Python read and accepted our
Certificate
terms of use,
W3.CSS Examples cookie and privacy policy. PHP Certificate
Bootstrap Examples jQuery Certificate
Copyright
PHP Examples1999-2024 by Refsnes Data. All Rights
JavaReserved.
Certificate W3Schools is Powered by
W3.CSS.
Java Examples C++ Certificate
XML Examples C# Certificate
jQuery Examples XML Certificate

13 of 13 30-Aug-24, 4:53 PM

You might also like