HTML 06B: Tipe Input dan Validasi Form

Setelah struktur form dipahami, kita dapat membantu pengguna memasukkan data dalam format yang benar. Browser memiliki validasi dasar yang dapat dipakai tanpa JavaScript.

1. Pilih Tipe Input yang Sesuai

Tipe yang tepat dapat menampilkan keyboard yang lebih sesuai di ponsel dan memberikan pemeriksaan format dasar.

2. Validasi Bawaan

• required mewajibkan nilai.
• minlength dan maxlength mengatur panjang teks.
• min dan max mengatur rentang angka atau tanggal.
• pattern menerima pola ekspresi reguler, tetapi sebaiknya tidak dipakai sebelum Anda memahami polanya.

Pesan bantuan harus tetap terlihat. Jangan hanya menjelaskan aturan melalui placeholder.

3. Validasi Browser Bukan Keamanan Server

Pengguna teknis dapat melewati validasi HTML. Karena itu, server harus memeriksa ulang semua data. Validasi browser bertujuan memperbaiki pengalaman pengguna, bukan menjadi pertahanan keamanan utama.

4. Contoh Form Pendaftaran

Kesalahan Umum

• Menggunakan type="text" untuk semua jenis data.
• Membatasi pengguna dengan maxlength tanpa menjelaskan batasnya.
• Menganggap atribut required cukup untuk keamanan.
• Memberikan pesan kesalahan hanya melalui warna merah.

Latihan

Tambahkan validasi pada form kontak: nama minimal dua karakter, email wajib dan harus berformat email, serta pesan minimal sepuluh karakter.

Rangkuman

Tipe input dan atribut validasi membantu pengguna, tetapi server tetap wajib memvalidasi data. Selalu berikan label dan petunjuk yang jelas.