Membuat Formulir HTML

Selamat datang di pelajaran berikutnya! Dalam pelajaran ini, Anda akan mempelajari cara membuat formulir menggunakan HTML. Formulir sangat penting untuk mengumpulkan masukan pengguna, yang nantinya dapat Anda proses dengan PHP. Mari kita mulai!

Apa Itu Formulir HTML?

Formulir HTML digunakan untuk mengumpulkan masukan pengguna. Formulir memungkinkan pengguna mengisi bidang, membuat pilihan, dan mengirimkan data ke server untuk diproses.

Contoh: Formulir masuk tempat pengguna memasukkan nama pengguna dan kata sandi.

Poin Utama: Formulir berperan sebagai penghubung antara pengguna dan skrip PHP Anda.

Membuat Formulir Sederhana

Berikut cara membuat formulir HTML dasar:

Penjelasan:

• action: Menentukan berkas PHP yang menangani data formulir.
• method: Menentukan cara mengirim data (GET atau POST).
• required: Memastikan bidang harus diisi sebelum dikirim.

<form action="process.php" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  <button type="submit">Submit</button>
</form>

Elemen Formulir

Formulir dapat menyertakan berbagai tipe masukan untuk mengumpulkan berbagai jenis data:

• text: Untuk masukan teks satu baris.
• email: Untuk alamat email.
• password: Untuk masukan kata sandi.
• checkbox: Untuk pilihan ganda.
• radio: Untuk pilihan tunggal.
• submit: Untuk mengirimkan formulir.

Contoh:

<form action="submit.php" method="POST">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>
  <br>
  <button type="submit">Login</button>
</form>

Menggunakan Tombol Radio

Tombol radio memungkinkan pengguna memilih satu opsi dari suatu kelompok. Contoh:

Kiat: Gunakan atribut name yang sama untuk semua tombol radio dalam satu kelompok.

<form action="submit.php" method="POST">
  <p>Choose your favorite color:</p>
  <input type="radio" id="red" name="color" value="Red">
  <label for="red">Red</label>
  <br>
  <input type="radio" id="blue" name="color" value="Blue">
  <label for="blue">Blue</label>
  <br>
  <button type="submit">Submit</button>
</form>

Menggunakan Kotak Centang

Kotak centang memungkinkan pengguna memilih beberapa opsi. Contoh:

Kiat: Gunakan sintaks larik (hobbies[]) untuk mengumpulkan beberapa nilai.

<form action="submit.php" method="POST">
  <p>Select your hobbies:</p>
  <input type="checkbox" id="reading" name="hobbies[]" value="Reading">
  <label for="reading">Reading</label>
  <br>
  <input type="checkbox" id="traveling" name="hobbies[]" value="Traveling">
  <label for="traveling">Traveling</label>
  <br>
  <button type="submit">Submit</button>
</form>

Menu Pilihan Turun

Menu pilihan turun memungkinkan pengguna memilih satu opsi dari sebuah daftar. Contoh:

Kiat: Gunakan selected untuk menetapkan opsi bawaan.

<form action="submit.php" method="POST">
  <label for="country">Choose your country:</label>
  <select id="country" name="country">
    <option value="USA">USA</option>
    <option value="Canada">Canada</option>
    <option value="UK">UK</option>
  </select>
  <br>
  <button type="submit">Submit</button>
</form>

Aksesibilitas Formulir

Pastikan formulir Anda dapat diakses oleh semua pengguna:

• Gunakan tag label yang ditautkan ke masukan dengan atribut for.
• Kelompokkan masukan yang terkait menggunakan fieldset dan legend.
• Uji formulir untuk memastikan kemudahan penggunaannya di perangkat seluler.

Kiat: Formulir yang mudah diakses meningkatkan pengalaman pengguna bagi semua orang!

Bagus Sekali!

Selamat! Anda telah mempelajari cara membuat formulir HTML dengan berbagai tipe masukan, termasuk bidang teks, tombol radio, kotak centang, dan menu pilihan turun. Formulir merupakan dasar masukan pengguna dalam pengembangan web. Pada pelajaran berikutnya, kita akan mempelajari cara memproses data formulir menggunakan PHP. Mari terus menulis kode!