How to create a Responsive Inline Form using CSS ?
When the browser window is resized, the labels and inputs will stack on top of each other for smaller screens. To create a responsive inline form using CSS, use a container with flexible styling, such as Flexbox or Grid, to arrange form elements horizontally. Utilize media queries to adjust the layout for smaller screens, ensuring a user-friendly experience across various devices.
Preview
Approach
- Create an HTML with a container for the form elements. Use appropriate HTML tags for labels, input fields, and buttons.
- Apply CSS styles to the container, using Flexbox or Grid to enable a horizontal arrangement of form elements. Set up flexible widths to adjust to different screen sizes.
- Style form elements (labels, inputs, and buttons) with appropriate widths, padding, and borders. Ensure a clean and readable design that adapts well to different devices.
- Implement media queries to define specific styles for smaller screens. Adjust the layout, font sizes, or any other properties to enhance responsiveness and maintain usability on various devices.
- Test the form on different devices and screen sizes to ensure a seamless and responsive user experience.
Example: Implemenattion to design responsive inline form.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Responsive Inline Form</ title > < link rel = "stylesheet" href = "style.css" > </ head > < body > < div class = "responsive-form" > < h1 >w3wiki</ h1 > < h3 > Resize the screen to see the form layout change! </ h3 > < form class = "form-container" > < label for = "firstName" class = "form-container-label" > First Name: </ label > < input type = "text" id = "firstName" name = "firstName" placeholder = "Your first name" class = "form-container-input" required> < label for = "lastName" class = "form-container-label" > Last Name: </ label > < input type = "text" id = "lastName" name = "lastName" placeholder = "Your last name" class = "form-container-input" required> < label for = "email" class = "form-container-label" > Email: </ label > < input type = "email" id = "email" name = "email" placeholder = "Your email address" class = "form-container-input" required> < button type = "submit" class = "form-container-button" > Submit </ button > </ form > </ div > </ body > </ html > |
CSS
body { margin : 0 ; padding : 0 ; display : flex; align-items: center ; justify- content : center ; height : 100 vh; font-family : Arial , Helvetica , sans-serif ; } .responsive-form { max-width : 600px ; box-shadow: 0 0 10px rgba( 97 , 240 , 68 , 0.5 ); width : 100% ; text-align : center ; border-radius: 8px ; border : 2px solid green ; background-color : #fff ; padding : 25px ; } .responsive-form h 1 { color : green } .responsive-form h 3 { margin-bottom : 25px ; font-size : 16px ; } .form-container { display : flex; flex-wrap: wrap; justify- content : space-between; } .form-container-label { text-align : left ; min-width : 48% ; margin-bottom : 10px ; flex: 1 ; } .form-container-input { flex: 1 ; margin-bottom : 10px ; box-sizing: border-box; min-width : 45% ; border : 1px solid #ccc ; border-radius: 6px ; padding : 10px ; } .form-container-button { width : 100% ; border-radius: 4px ; color : #fff ; padding : 12px ; cursor : pointer ; border : none ; flex: 1 ; background-color : green ; } @media screen and ( max-width : 600px ) { .form-container-label, .form-container-input, .form-container-button { flex: 100% ; min-width : 100% ; } } |
Output: