Bagaimana membuat: formulir dalam baris

Belajar bagaimana menggunakan CSS untuk membuat formulir dalam baris responsif.

Formulir dalam baris responsif

Tolong panjangkan ukuran jendela browser untuk melihat efeknya (tanda dan input akan berlapis, bukannya berbaris di layar yang kecil):

Coba sendiri

Bagaimana membuat formulir dalam baris

Langkah pertama - Tambahkan HTML:

gunakan elemen <form> untuk menangani input. Anda dapat menemukan informasi lebih lanjut di tutorial PHP kami.

<form class="form-inline" action="/action_page.php">
  <label for="email">Email:</label>
  <input type="email" id="email" placeholder="Masukkan email" name="email">
  <label for="pwd">Sandi:</label>
  <input type="password" id="pwd" placeholder="Masukkan sandi" name="pswd">
  <label>
    <input type="checkbox" name="remember"> Ingat saya
  </label>
  <button type="submit">Submit</button>
</form>

Langkah kedua - Tambahkan CSS:

/* Mengatur gaya formulir - menampilkan item secara horizontal */
.form-inline {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
/* Menambahkan margin eksternal untuk setiap label */
.form-inline label {
  margin: 5px 10px 5px 0;
}
/* Mengatur gaya bidang input */
.form-inline input {
  vertical-align: middle;
  margin: 5px 10px 5px 0;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}
/* Mengatur gaya tombol pengiriman */
.form-inline button {
  padding: 10px 20px;
  background-color: dodgerblue;
  border: 1px solid #ddd;
  color: white;
}
.form-inline button:hover {
  background-color: royalblue;
}
/* Menambahkan responsivitas - menampilkan komponen formulir secara vertikal daripada horizontal di layar dengan lebar kurang dari 800 paksi */
@media (max-width: 800px) {
  .form-inline input {
    margin: 10px 0;
  }
  .form-inline {
    flex-direction: column;
    align-items: stretch;
  }
}

Coba sendiri

Halaman yang berhubungan

Tutorial:Form HTML

Tutorial:Form CSS