How to create a signup form with HTML and CSS?

HTML CSS Web Development Front End Technology

A sign-up form allows any user visiting the website to register. It includes adding an email-id, password, repeat password, and clicking on the Sign-Up button to register. To allow the browser to save the password, click the Remember Me. You can also provide a Terms & Policies link so the users can first read the registration terms. Let us see how to create a signup form with HTML and CSS on a web page.

Create a form

A div container is set for the form. The form is created using the <form> element. We have set the email-id field using the input type text. The password and repeat password fields are set using the input type password −

<form>
   <div class="formContainer">
      <h1>Sign Up Form</h1>
      <hr>
      <label for="email"><b>Email</b></label>
      <input type="text" placeholder="Enter Email" name="email" required>
      <label for="password"><b>Password</b></label>
      <input type="password" placeholder="Enter Password" name="password" required>
      <label for="repeatPassword"><b>Repeat Password</b></label>
      <input type="password" placeholder="Repeat Password" name="repeatPassword"
      required>
      <label>
         <input type="checkbox" checked="checked" name="remember" style="marginbottom: 15px"> Remember me
      </label>
      <p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p>
      <div>
         <button type="submit" class="signup">Sign Up</button>
      </div>
   </div>
</form>

Style the form fields

The form fields input type text and password are styled with 100% width. The display property is set to inline-block to position the fields −

input[type=text], input[type=password] {
   width: 100%;
   font-size: 28px;
   padding: 15px;
   margin: 5px 0 22px 0;
   display: inline-block;
   border: none;
   background: #f1f1f1;
}

Set the Remember Me checkbox

The input type checkbox is used to create a checkbox for the Remember Me password feature −

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

Set the Terms & Policies link

The terms & policies link are set with the <a> element with the href attribute −

<p>By creating an account you agree to our <a href="#"style="color:dodgerblue">Terms & Privacy</a>.</p>

Submit button

The submit button is created using the <button> element −

<div>
   <button type="submit" class="signup">Sign Up</button>
</div>

Style the button

The button is styled with width 100%. The cursor property is set to the pointer value to make the button look like clickable when the mouse cursor is placed −

button {
   font-size: 18px;
   font-weight: bold;
   background-color: rgb(10, 119, 13);
   color: white;
   padding: 14px 20px;
   margin: 8px 0;
   border: none;
   cursor: pointer;
   width: 100%;
   opacity: 0.9;
}

Hover the button

On hovering the button, the opacity will change −

button:hover {
   opacity:1;
}

Example

The following is the code to create a signup form using HTML and CSS −

<!DOCTYPE html>
<html>
   <style>
      body{
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      }
      * {box-sizing: border-box}
      input[type=text], input[type=password] {
         width: 100%;
         font-size: 28px;
         padding: 15px;
         margin: 5px 0 22px 0;
         display: inline-block;
         border: none;
         background: #f1f1f1;
      }
      label{
         font-size: 15px;
      }
      input[type=text]:focus, input[type=password]:focus {
         background-color: #ddd;
         outline: none;
      }
      hr {
         border: 1px solid #f1f1f1;
         margin-bottom: 25px;
      }
      button {
         font-size: 18px;
         font-weight: bold;
         background-color: rgb(10, 119, 13);
         color: white;
         padding: 14px 20px;
         margin: 8px 0;
         border: none;
         cursor: pointer;
         width: 100%;
         opacity: 0.9;
      }
      button:hover {
         opacity:1;
      }
      .formContainer {
         padding: 16px;
      }
      .formContainer p{
         font-size: 28px;
      }
   </style>
<body>
   <form>
      <div class="formContainer">
         <h1>Sign Up Form</h1>
         <hr>
         <label for="email"><b>Email</b></label>
         <input type="text" placeholder="Enter Email" name="email" required>
         <label for="password"><b>Password</b></label>
         <input type="password" placeholder="Enter Password" name="password" required>
         <label for="repeatPassword"><b>Repeat Password</b></label>
         <input type="password" placeholder="Repeat Password" name="repeatPassword" required>
         <label>
            <input type="checkbox" checked="checked" name="remember" style="marginbottom: 15px"> Remember me
         </label>
         <p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p>
         <div>
            <button type="submit" class="signup">Sign Up</button>
         </div>
      </div>
   </form>
</body>
</html>

AmitDiwan

Updated on: 14-Dec-2023

11K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started