Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a responsive inline form with CSS?
A responsive inline form is a form in which all the elements are inline, aligned on the left, with the specific labels. To display the responsiveness i.e., when the web browser is resized, we have set the inline form to stack all the input fields on top of each other. This concept works on smaller screens. Let us see how to create a responsiveness inline form with CSS.
Create a form
To create a form, use the <form> element. We have set two input fields and a button in our form −
<form> <label for="email">Email:</label> <input type="email" id="email" placeholder="Enter email" name="email" /> <label for="pass">Password:</label> <input type="password" id="pass" placeholder="Enter password" name="pass"/> <button type="submit">Submit</button> </form>
Style the form
We have positioned the form as a flex using the display property. The shorthand flex-row is set to row wrap i.e., the flex-direction as row and flex-wrap as wrap. The alignment for all the items are centred using the align-items property −
form {
display: flex;
flex-flow: row wrap;
align-items: center;
}
Submit Button
The submit button for the form is styled like this. Set the cursor property to pointer to make it look clickable −
form button {
padding: 10px 20px;
font-size: 20px;
background-color: rgb(39, 22, 141);
border: 1px solid #ddd;
color: white;
cursor: pointer;
font-weight: bolder;
border-radius: 4px;
}
Set the responsiveness
Media Queries are used to set the responsiveness. The input fields will stack on top of each other when the screen size if less than 800px. We achieved this using the flex-direction property with the value column −
@media (max-width: 800px) {
form input {
margin: 10px 0;
}
form {
flex-direction: column;
align-items: stretch;
}
}
Example
The following is the code to create a responsive inline form with CSS −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
form {
display: flex;
flex-flow: row wrap;
align-items: center;
}
form label {
margin: 5px 10px 5px 0;
}
form input {
margin: 5px 10px 5px 0;
padding: 10px;
}
form button {
padding: 10px 20px;
font-size: 20px;
background-color: rgb(39, 22, 141);
border: 1px solid #ddd;
color: white;
cursor: pointer;
font-weight: bolder;
border-radius: 4px;
}
form button:hover {
background-color: rgb(113, 65, 225);
}
@media (max-width: 800px) {
form input {
margin: 10px 0;
}
form {
flex-direction: column;
align-items: stretch;
}
}
</style>
</head>
<body>
<h1>Responsive Inline Form Example</h1>
<form>
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Enter email" name="email" />
<label for="pass">Password:</label>
<input type="password" id="pass" placeholder="Enter password" name="pass"/>
<button type="submit">Submit</button>
</form>
</body>
</html>
2K+ Views
