Formulir dasar: label, input, dan tombol

Formulir mengumpulkan isian dari pengunjung. Elemen form membungkus semua isian. Atribut action berisi alamat yang menerima data, dan method menentukan cara pengiriman: get untuk pencarian yang hasilnya boleh muncul di alamat, post untuk data yang mengubah sesuatu di server.

<form action="/daftar" method="post">
  <label for="nama">Nama lengkap</label>
  <input type="text" id="nama" name="nama" required>

  <label for="surel">Surel</label>
  <input type="email" id="surel" name="surel">

  <button type="submit">Kirim pendaftaran</button>
</form>

Setiap isian ditulis dengan input. Atribut type menentukan bentuk isiannya, misalnya text, email, number, atau date, dan browser ikut memeriksa isinya sesuai jenis itu. Atribut name menjadi nama data yang dikirim, sedangkan id menjadi penanda yang dipakai label. Input tanpa name tidak ikut terkirim sama sekali.

Elemen label memberi nama isian. Atribut for pada label diisi persis sama dengan id input yang dituju. Hubungan itu membuat teks label bisa diklik untuk memindahkan kursor ke isiannya, dan membuat pembaca layar menyebut nama isian begitu kursor masuk. Tombol pengirim ditulis dengan button bertipe submit.

Atribut placeholder menampilkan contoh isian berwarna pudar di dalam kotak, dan teks itu hilang begitu pengguna mulai mengetik. Karena itu placeholder bukan pengganti label: namanya lenyap tepat saat isian terisi, sehingga pengguna kehilangan acuan ketika memeriksa ulang jawabannya. Placeholder menunjukkan bentuk isian, misalnya susunan tanggal, sementara nama isiannya tetap ditulis di label. Atribut required menandai isian yang wajib diisi, ditulis tanpa nilai, dan membuat browser menolak pengiriman selama isian itu masih kosong.

<form action="/langganan" method="post">
  <label for="telepon">Nomor telepon</label>
  <input type="tel" id="telepon" name="telepon" required>

  <button type="submit">Daftar</button>
</form>

Contoh kedua ini memakai satu isian bertipe tel dan memperlihatkan tiga atribut pada satu input sekaligus: type, id, dan name, ditambah required di ujung tag. Nilai for pada label dan nilai id pada input sama-sama telepon. Tombol ditulis dengan type submit secara eksplisit. Tanpa atribut itu tombol di dalam form memang tetap mengirim, tetapi pembaca kode harus menebak maksudnya, dan latihan di pelajaran ini memeriksa atribut type pada tombolnya.