Bagaimana membuat: formulir responsif

Belajar bagaimana membuat formulir responsif menggunakan CSS.

Formulir responsif

Tolong atur ukuran jendela browser untuk melihat efeknya (pada layar yang kecil, label dan kotak input akan dikelompokkan, bukannya diatur bersama-sama):

Coba sendiri

Bagaimana membuat formulir responsif

Langkah pertama - Tambahkan HTML:

Gunakan elemen <form> untuk menangani input. Anda dapat mengetahui lebih lanjut tentang pelatihan PHP kami.

Tambahkan input untuk setiap field (dengan label yang sesuai) dan gunakan elemen <div> untuk mewrapper label dan input, untuk mengatur lebar yang ditentukan dengan CSS:

<div class="container">
  <form action="action_page.php">
    <div class="row">
      <div class="col-25">
        <label for="fname">Nama Depan</label>
      </div>
      <div class="col-75">
        <input type="text" id="fname" name="firstname" placeholder="Nama Anda..">
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="lname">Nama Belakang</label>
      </div>
      <div class="col-75">
        <input type="text" id="lname" name="lastname" placeholder="Nama belakang Anda..">
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="country">Negara</label>
      </div>
      <div class="col-75">
        <select id="country" name="country">
          <option value="australia">Australia</option>
          <option value="canada">Canada</option>
          <option value="usa">USA</option>
        </select>
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="subject">Subjek</label>
      </div>
      <div class="col-75">
        <textarea id="subject" name="subject" placeholder="Tulis sesuatu.." style="height:200px"></textarea>
      </div>
    </div>
    <div class="row">
      <input type="submit" value="Submit">
    </div>
  </form>
</div>

Langkah kedua - Tambahkan CSS:

/* Atur gaya kotak input, elemen pilihan, dan area teks */
input[type=text], select, textarea{
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}
/* Atur gaya label untuk menampilkannya di samping kotak input */
label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}
/* Atur gaya tombol submit */
input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}
/* Atur gaya kontainer */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
/* Kolom floating label: lebar 25% */
.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}
/* Kolom floating input: lebar 75% */
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}
/* Membersihkan gelombang setelah kolom */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Bentuk responsif - ketika lebar layar kurang dari 600px, dua kolom diatur menumpuk, bukannya diatur paralel */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

Coba sendiri

Halaman yang relevan

Panduan:Form HTML

Panduan:Form CSS