Cara - Formulir Sebaris
Pelajari cara membuat formulir sebaris responsif dengan CSS.
Formulir Inline Responsif
Ubah ukuran jendela browser untuk melihat efeknya (label dan input akan ditumpuk di atas satu sama lain alih-alih di samping satu sama lain di layar yang lebih kecil):
Cara Membuat Formulir Sebaris
Langkah 1) Tambahkan HTML
Gunakan elemen <form> untuk memproses input. Anda dapat mempelajari lebih lanjut tentang ini di tutorial PHP kami.
Contoh
<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>
Langkah 2) Tambahkan CSS:
Contoh
/* 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: Buka Tutorial Formulir HTML kami untuk mempelajari lebih lanjut tentang Formulir HTML.
Tip: Buka Tutorial Formulir CSS kami untuk mempelajari lebih lanjut tentang cara menata elemen formulir.