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

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 element is used to create a register button on a web page ?

Register

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 ?

   


   
Stacked Form Example