Formulir

Formulir di HTML merupakan cara utama untuk mendapatkan masukan dari pengguna. Data yang diisi biasanya akan dikirim ke server untuk diproses, seperti menyimpan ke database atau memicu suatu tindakan.

Elemen <form>

Untuk memulai membuat formulir, kita gunakan elemen <form>. Ini berfungsi sebagai wadah dari semua komponen input yang digunakan.

<form>
  <!-- elemen-elemen input ditempatkan di sini -->
  <label for="nama">Nama:</label>
  <input type="text" id="nama" name="nama"><br />
 
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
</form>

Label

Tag <label> sangat berguna untuk memperjelas maksud dari input dan meningkatkan aksesibilitas. Jika dikaitkan dengan input melalui atribut for (yang harus sama dengan id input), pengguna dapat mengeklik teks label untuk mengaktifkan input-nya.

Fieldset dan Legend

Elemen <fieldset> digunakan untuk mengelompokkan bagian-bagian formulir yang berhubungan. Biasanya digunakan bersama <legend> yang berfungsi sebagai judul dari kelompok tersebut.

Contoh:

<form>
  <fieldset>
    <legend>Informasi Pribadi</legend>
 
    <label for="nama">Nama:</label>
    <input type="text" id="nama" name="nama"><br />
 
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </fieldset>
</form>

Hasilnya akan menampilkan area yang dibingkai dengan label “Informasi Pribadi”, membuat formulir lebih terorganisir dan mudah dipahami.

Pentingnya Atribut name

Agar data input bisa dikirim dan diterima oleh server, setiap elemen <input> harus memiliki atribut name. Tanpa atribut ini, nilainya tidak akan disertakan saat formulir dikirim.

<!-- Tidak akan mengirim data karena tidak ada atribut name -->
<input type="text" id="nama" value="Tanpa name">