How to Create a Stacked Form using CSS ?
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: