How TO – Inline Form
Learn how to create a responsive inline form with CSS.
Responsive Inline Form
We have created an inline form that will stay horizontal until the screen width of the browser window is less than 850 pixels: then the form is displayed vertically instead of horizontally.
Resize the browser window to see the effect.
How To Create an Inline Form
Step 1) Add HTML
Use a <form> element to process the input. You can learn more about this in our PHP tutorial.
Example
<form class=”form-inline” action=”/action_page.php”>
<label for=”email”>Email:</label>
<input type=”email” id=”email” placeholder=”Enter email” name=”email”>
<label for=”pwd”>Password:</label>
<input type=”password” id=”pwd” placeholder=”Enter password” name=”pswd”>
<label>
<input type=”checkbox” name=”remember”> Remember me
</label>
<button type=”submit”>Submit</button>
</form>
Step 2) Add CSS:
Example
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
.form-inline {
display: flex;
flex-flow: row wrap;
align-items: center;
}
.form-inline label {
margin: 5px 10px 5px 0;
}
.form-inline input {
vertical-align: middle;
margin: 5px 10px 5px 0;
padding: 10px;
background-color: #fff;
border: 1px solid #ddd;
}
.form-inline button {
padding: 10px 20px;
background-color: dodgerblue;
border: 1px solid #ddd;
color: white;
cursor: pointer;
}
.form-inline button:hover {
background-color: royalblue;
}
@media (max-width: 800px) {
.form-inline input {
margin: 10px 0;
}
.form-inline {
flex-direction: column;
align-items: stretch;
}
}
</style>
</head>
<body>
<h2>Responsive Inline Form</h2>
<p>We have created an inline form that will stay horizontal until the screen width of the browser window is less than 850 pixels: then the form is displayed vertically instead of horizontally.</p>
<p>Resize the browser window to see the effect.</p>
<form action=”/action_page.php”>
<label for=”email”>Email:</label>
<input type=”email” id=”email” placeholder=”Enter email” name=”email”>
<label for=”pwd”>Password:</label>
<input type=”password” id=”pwd” placeholder=”Enter password” name=”pswd”>
<label>
<input type=”checkbox” name=”remember”> Remember me
</label>
<button type=”submit”>Submit</button>
</form>
</body>
</html>