A Vertically Stacked Form places labels and inputs on top of each other. To create a stacked form using CSS, we will first define a container with a maximum width, padding, and border radius for styling.
Preview:
Approach:
- Begin by creating the basic HTML structure, including the form container and form elements using appropriate tags.
- Apply CSS styles to the container, setting its maximum width, padding, border radius, and subtle box shadow for a clean appearance.
- Style form elements individually, adjusting their width, padding, borders, and font size. Ensure a consistent and visually appealing look.
- Use flexbox or grid CSS properties to center the form container on the page, creating a balanced and aesthetically pleasing layout.
- Include placeholder attributes within input fields to provide users with guidance on the expected input for each form element.
Example: Implementation to design a stacked form using CSS properties.
HTML
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" >
< title >Stacked Form</ title >
< link rel = "stylesheet" href = "style.css" >
</ head >
< body >
< div class = "custom-form" >
< h2 >Stacked Form</ h2 >
< form >
< label for = "firstName" >First Name:</ label >
< input type = "text" id = "firstName"
name = "firstName" placeholder = "Enter your first name" autocomplete = "off" required>
< label for = "lastName" >Last Name:</ label >
< input type = "text" id = "lastName" name = "lastName" placeholder = "Enter your last name" autocomplete = "off" required>
< label for = "mobileNumber" >Mobile Number:</ label >
< input type = "tel" maxlength = "10" id = "mobileNumber"
name = "mobileNumber" placeholder = "Enter your mobile number" autocomplete = "off" required>
< label for = "dob" >Date of Birth:</ label >
< input type = "date" id = "dob"
name = "dob" required>
< button type = "submit" >Submit</ button >
</ form >
</ div >
</ body >
</ html >
|
CSS
body { font-family : 'Segoe UI' , Tahoma , Geneva, Verdana , sans-serif ;
margin : 0 ;
padding : 0 ;
display : flex;
align-items: center ;
justify- content : center ;
height : 100 vh;
} .custom-form { max-width : 450px ;
width : 100% ;
padding : 25px ;
border-radius: 10px ;
border : 2px solid green ;
box-shadow: 0 0 10px rgba( 85 , 255 , 34 , 0.5 );
} .custom-form h 2 {
text-align : center ;
} .custom-form label { display : block ;
margin-bottom : 8px ;
color : #555 ;
} .custom-form input, .custom-form select { padding : 12px ;
width : 100% ;
font-size : 16px ;
border : 1px solid #ccc ;
box-sizing: border-box;
border-radius: 4px ;
margin-bottom : 16px ;
} .custom-form button { color : #fff ;
cursor : pointer ;
background-color : #4caf50 ;
width : 100% ;
border : none ;
border-radius: 4px ;
padding : 12px ;
font-size : 16px ;
} |
Output: