WebTech Interaktif

HTML · Bab 5

Form Dasar

Membangun form dengan label yang terhubung ke input, berbagai jenis input, pasangan name dan value, pilihan select, kotak teks textarea, serta jenis tombol.

Form adalah cara pengunjung mengirim data ke situs: pendaftaran member, pesan ke toko, atau permintaan produk. Di Smart Retail, form kontak menjadi satu-satunya tempat pelanggan “berbicara” dengan toko. Bab ini membahas elemen-elemen form. Validasinya dibahas di bab berikutnya.

5.1 Elemen <form>

<form> membungkus semua isian. Dua atributnya menentukan ke mana dan bagaimana data dikirim:

<form action="/kontak" method="post">
  <!-- isian dan tombol kirim -->
</form>
  • action: alamat yang menerima data.
  • method: get menempelkan data di URL (cocok untuk pencarian), sedangkan post mengirim data di badan permintaan (cocok untuk data yang mengubah sesuatu atau data pribadi).

Data dikirim sebagai pasangan name=value, misalnya nama=Dewi&kategori=3. Pengolahan di server dipelajari di topik Laravel. Di playground situs ini form tidak benar-benar dikirim, karena preview dibatasi demi keamanan.

5.2 <label> yang Terhubung ke Input

Setiap isian butuh label. Hubungkan label dengan isiannya lewat for yang nilainya sama dengan id isian:

<label for="nama">Nama lengkap</label>
<input type="text" id="nama" name="nama">

Dengan label yang terhubung, klik pada tulisan label memindahkan kursor ke isiannya, dan pembaca layar membacakan label saat isian dipilih. Cara lain adalah membungkus input di dalam label, cocok untuk kotak centang. Nilai id harus unik di satu halaman.

HTML + JavaScript

🧪 Coba ubah: klik tulisan “Nama lengkap”, dan kursor pindah ke kotak isian. Lalu ubah for="nama" menjadi for="nama-lain", jalankan, dan klik lagi.

5.3 Jenis <input>

Atribut type menentukan jenis isian:

typeUntukCatatan
textteks satu barisbawaan bila type tidak ditulis
emailalamat emailbrowser memeriksa format email; keyboard ponsel menampilkan @
passwordkata sandihanya disamarkan di layar; keamanan pengiriman tetap butuh HTTPS
numberangkapunya tombol naik turun; batasnya diatur di bab 6
datetanggalpemilih tanggal bawaan browser, tampilannya berbeda tiap browser
radiopilih satu dari beberapasemua pilihan dalam satu kelompok memakai name yang sama
checkboxpilih nol, satu, atau lebihsetiap kotak bisa dicentang terpisah

Atribut value menentukan nilai yang dikirim. Untuk radio dan checkbox, value adalah nilai pilihan itu, dan atribut checked membuatnya terpilih sejak awal. Checkbox yang tidak dicentang tidak ikut terkirim sama sekali.

HTML + JavaScript

🧪 Coba ubah: ubah name="cara" pada radio kedua menjadi name="cara2", lalu jalankan. Sekarang kedua radio bisa terpilih bersamaan, karena tidak lagi satu kelompok.

5.4 <select>, <option>, dan <textarea>

  • <select> membuat daftar pilihan. Setiap pilihan ditulis dengan <option> beserta value-nya, dan selected membuat satu pilihan terpilih sejak awal.
  • <textarea> untuk teks panjang beberapa baris. Elemen ini punya tag penutup, dan isi awalnya ditulis di antara kedua tag (bukan lewat value). Atribut rows mengatur tinggi awalnya.
HTML + JavaScript

5.5 Tombol: type="submit", type="reset", dan type="button"

HTML + JavaScript
  • type="submit" mengirim form. Tombol di dalam form tanpa atribut type dianggap submit, jadi selalu tulis type dengan jelas.
  • type="reset" mengembalikan semua isian ke nilai awal. Coba ketik sesuatu di kotak Kota lalu klik Kosongkan: isinya kembali menjadi “Bandung”. Tombol ini jarang dibutuhkan dan mudah terklik tanpa sengaja.
  • type="button" tidak melakukan apa pun tanpa JavaScript. Tombol ini dipakai untuk aksi yang ditangani skrip, misalnya di topik JavaScript.

5.6 Ringkasan

  • <form> dengan action dan method membungkus isian. Data dikirim sebagai pasangan name=value.
  • Setiap isian butuh <label for> yang cocok dengan id-nya.
  • Jenis input yang umum: text, email, password, number, date, radio, dan checkbox. Radio satu kelompok memakai name yang sama.
  • <select> dan <option> untuk daftar pilihan, <textarea> untuk teks panjang.
  • Selalu tulis type pada <button>.