How to create a stacked form with CSS?

In a stacked form, the input fields, labels and buttons are stacked on top of each other. When the web page with a form is opened on different devices, then it stacks. A form is created on a web page using the <form> element. Let us see how to create a stacked form with CSS.

Create a form

The form on a web page is created using the <form> element. The input fields include input type text, password, and repeat password. With that, the signin and register buttons are also positioned −

<form>
   <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>
   <hr>
   <p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
   <button type="submit" class="registerbtn">Register</button>
   <div class="signin">
      <p>Already have an account? <a href="#">Sign in</a>.</p>
   </div>
</form>

Style the form

The form is styled using the max-width property to set the maximum width −

form {
   padding: 16px;
   max-width: 800px;
   margin-left: 20%;
   background-color: rgb(255, 254, 195);
}

Style the input fields

The width for the input fields are set to 100%. The display property is set to inline-block −

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

The Register button

The <button> element is used to create a register button on a web page −

<button type="submit" class="registerbtn">Register</button>

Style the register button −

.registerbtn {
   background-color: #4CAF50;
   color: white;
   font-size: 25px;
   padding: 16px 20px;
   margin: 8px 0;
   border: none;
   cursor: pointer;
   width: 100%;
   opacity: 0.9;
}

Example

The following is the code to create a stacked form with CSS −

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: Arial, Helvetica, sans-serif;
         font-size: 20px;
      }
      h1{
         text-align: center;
      }
      * {
         box-sizing: border-box;
      }
      label{
         font-size: 18px;
      }
      form {
         padding: 16px;
         max-width: 800px;
         margin-left: 20%;
         background-color: rgb(255, 254, 195);
      }
      input[type=text], input[type=password] {
         width: 100%;
         font-size: 20px;
         padding: 15px;
         margin: 5px 0 22px 0;
         display: inline-block;
         border: none;
         background: #f1f1f1;
      }
      input[type=text]:focus, input[type=password]:focus {
         background-color: #ddd;
         outline: none;
      }
      hr {
         border: 1px solid #f1f1f1;
         margin-bottom: 25px;
      }
      .registerbtn {
         background-color: #4CAF50;
         color: white;
         font-size: 25px;
         padding: 16px 20px;
         margin: 8px 0;
         border: none;
         cursor: pointer;
         width: 100%;
         opacity: 0.9;
      }
      .registerbtn:hover {
         opacity: 1;
      }
      a {
         color: dodgerblue;
         text-decoration: none;
      }
      .signin {
         background-color: #f1f1f1;
         text-align: center;
      }
      @media (max-width: 800px) {
         form {
            width: 100%;
            margin-left: 0px;
         }
      }
   </style>
</head>
<body>
   <h1>Stacked Form Example</h1>
   <form>
      <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>
      <hr>
      <p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
      <button type="submit" class="registerbtn">Register</button>
      <div class="signin">
         <p>Already have an account? <a href="#">Sign in</a>.</p>
      </div>
   </form>
</body>
</html>
Updated on: 2023-12-14T12:12:23+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements