Formulir mobile-first

Termasuk bagian Frontend Praktis dalam perjalanan HTML di Coddy. Pelajaran 10 dari 35.

Form adalah salah satu bagian terpenting dari web: pengguna terus-menerus mengetik, mengetuk, dan berinteraksi dengannya. Saat merancang form dengan pendekatan mobile first, kita berfokus pada kemudahan penggunaan di layar kecil:

Buat input dan tombol lebih besar agar pengguna dapat mengetik dan mengetuk dengan mudah.
Susun kolom secara vertikal dan gunakan input selebar penuh.
Tambahkan padding dan jarak agar nyaman digunakan dengan jari.

Contoh untuk perangkat seluler:

input, button {
  width: 100%;       /* lebar penuh untuk layar kecil */
  padding: 0.75rem;  /* lebih mudah diketuk */
  font-size: 1rem;   /* teks mudah dibaca */
}

Selanjutnya, untuk layar yang lebih besar (tablet atau desktop), kita menyempurnakan tata letaknya:

Letakkan formulir di tengah halaman.
Tempatkan beberapa kolom berdampingan, bukan bertumpuk.
Sesuaikan lebar dan jarak agar tampilannya lebih baik.

Contoh untuk layar yang lebih besar:

@media (min-width: 768px) {
  form {
    max-width: 500px;  /* tengahkan dan batasi lebarnya */
    margin: 0 auto;
  }

  .row {
    display: flex;
    gap: 1rem;         /* input berdampingan */
  }
}

Tantangan

Mudah

Kamu diberi formulir HTML dasar. Tugasmu adalah mengatur gaya dengan pendekatan mobile-first:

Elemen di dalam formulir harus ditumpuk secara vertikal. Gunakan display: flex dan flex-direction: column, lalu tambahkan sedikit gap agar tampilannya bagus.
Terapkan width: 100% dan tambahkan sedikit padding pada elemen input, button, dan textarea agar ukurannya cukup besar untuk layar ponsel dan mudah diketuk.

Coba sendiri

<!DOCTYPE html>
<html>
<head>
  <title>Mobile-First Forms</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 1rem;
      background-color: #f0f4f8;
    }

    form {
      
    }

    input, textarea, button {
      padding: 0.75rem;    
      font-size: 1rem;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    button {
      background-color: #4a90e2;
      color: white;
      border: none;
      cursor: pointer;
    }

    /* Larger screens */
    @media (min-width: 768px) {
      form {
        max-width: 600px;
        margin: 0 auto; /* center form */
      }

      .row {
        display: flex;
        gap: 1rem; /* side-by-side fields */
      }

      .row input {
        width: 100%; /* split space equally */
      }
    }
  </style>
</head>
<body>
   <h1>Contact Us</h1>
  <form>
    <div class="row">
      <input type="text" placeholder="Name" required>
      <input type="email" placeholder="Email" required>
    </div>
    <textarea placeholder="Your Message" rows="4" required></textarea>
    <button type="submit">Send</button>
  </form>
</body>
</html>