Hoe - Inline formulier
Leer hoe u een responsief inline formulier maakt met CSS.
Responsief inline formulier
Pas het formaat van het browservenster aan om het effect te zien (de labels en invoer worden op elkaar gestapeld in plaats van naast elkaar op kleinere schermen):
Een inline formulier maken
Stap 1) HTML toevoegen
Gebruik een <form> element om de invoer te verwerken. U kunt hier meer over leren in onze PHP -tutorial.
Voorbeeld
<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>
Stap 2) CSS toevoegen:
Voorbeeld
/* Style the form - display items horizontally */
.form-inline {
display: flex;
flex-flow: row wrap;
align-items: center;
}
/* Add some margins for each label */
.form-inline label {
margin: 5px 10px 5px 0;
}
/* Style the input fields */
.form-inline input {
vertical-align: middle;
margin:
5px 10px 5px 0;
padding: 10px;
background-color: #fff;
border: 1px solid #ddd;
}
/* Style the submit button */
.form-inline button {
padding: 10px 20px;
background-color: dodgerblue;
border: 1px solid #ddd;
color: white;
}
.form-inline button:hover
{
background-color: royalblue;
}
/* Add responsiveness -
display the form controls vertically instead of horizontally on screens that
are less than 800px wide */
@media (max-width: 800px) {
.form-inline input {
margin: 10px 0;
}
.form-inline {
flex-direction: column;
align-items: stretch;
}
}
Tip: Ga naar onze HTML-formulierhandleiding voor meer informatie over HTML-formulieren.
Tip: Ga naar onze CSS Form Tutorial voor meer informatie over het opmaken van formulierelementen.