Cara Membuat Form HTML yang Benar dan Aksesibel

Jangan Remehkan Elemen Form

Formulir (Form) adalah nyawa dari sebuah website interaktif. Lewat form, user bisa login, mendaftar, atau melakukan pembelian. Sayangnya, banyak developer pemula yang membuat form secara asal-asalan, sehingga menyulitkan pengguna, terutama bagi mereka yang memiliki keterbatasan penglihatan (menggunakan Screen Reader).

Kesalahan Fatal: Mengabaikan Tag Label

Ini adalah kesalahan paling umum. Developer sering kali hanya menggunakan tag

atau untuk memberi nama pada kotak input.

<!-- BURUK -->
<p>Alamat Email:</p>
<input type="email" name="email">

Praktik di atas membuat kotak input "kehilangan identitas". Komputer tidak tahu bahwa teks "Alamat Email" berhubungan dengan kotak input tersebut.

Cara Benar: Hubungkan Label dan Input

Gunakan tag dan manfaatkan atribut for yang nilainya sama persis dengan atribut id milik tag input.

<!-- BAIK DAN AKSESIBEL -->
<label for="email-user">Alamat Email:</label>
<input type="email" id="email-user" name="email" placeholder="budi@mail.com" required>

Keuntungan cara ini: Jika pengguna mengklik teks "Alamat Email", kursor akan secara otomatis melompat masuk ke dalam kotak input. Ini sangat memudahkan pengguna HP yang layarnya kecil!

Gunakan Tipe Input yang Tepat

HTML5 sudah sangat canggih. Jangan gunakan type="text" untuk semua hal. Sesuaikan dengan datanya:

• type="email": Otomatis memunculkan tombol '@' di keyboard HP user dan menolak input jika formatnya bukan email.
• type="number": Memunculkan keyboard angka (numpad) di HP.
• type="password": Menyembunyikan teks menjadi titik-titik hitam agar tidak diintip orang sebelah.
• type="date": Memunculkan kalender bawaan browser agar user tidak perlu mengetik tanggal manual.

Kesimpulan

Menulis HTML yang bersih (Semantic) bukan hanya soal kerapian kode, tapi soal empati kepada pengguna. Form yang baik akan meningkatkan tingkat keberhasilan konversi (orang yang menyelesaikan pendaftaran) dan membuat website-mu terlihat profesional di mata mesin pencari.