Untuk memberikan pengalaman pengguna terbaik, pastikan Anda menggunakan elemen dan
elemen type yang paling sesuai untuk data yang dimasukkan pengguna.
Membantu pengguna mengisi teks
Gunakan elemen <input> untuk menyediakan kolom formulir. <input> adalah pilihan terbaik
untuk satu kata, frasa, dan entri singkat. Untuk teks yang lebih panjang, gunakan elemen
<textarea>. Hal ini memungkinkan beberapa baris teks, dan memudahkan
pengguna melihat teks yang mereka masukkan, karena elemen dapat di-scroll dan
diubah ukurannya.
Memastikan pengguna memasukkan data dalam format yang benar
Apakah Anda ingin membantu pengguna mengisi nomor telepon?
Ubah atribut type menjadi type="tel" untuk <input>.
Pengguna di perangkat seluler akan mendapatkan keyboard virtual yang disesuaikan,
sehingga mereka dapat memasukkan nomor telepon dengan lebih cepat.
Untuk alamat email, gunakan type="email".
Sekali lagi, keyboard virtual yang disesuaikan ditampilkan.
Gunakan atribut required untuk membuat kolom formulir wajib diisi.
Saat formulir dikirim, browser akan memeriksa apakah input memiliki nilai dan apakah valid: dalam hal ini,
apakah input tersebut adalah alamat email yang diformat dengan baik.
Pelajari lebih lanjut berbagai jenis input. Objek ini juga menyediakan fitur validasi bawaan.
Membantu pengguna mengisi tanggal
Kapan Anda ingin memulai perjalanan berikutnya?
Untuk membantu pengguna mengisi tanggal, gunakan type="date".
Beberapa browser menampilkan format sebagai placeholder seperti yyyy-mm-dd,
yang menunjukkan cara memasukkan tanggal.
Semua browser modern menyediakan antarmuka kustom untuk memilih tanggal dalam bentuk pemilih tanggal.
Membantu pengguna memilih opsi
Untuk memastikan pengguna dapat memilih atau membatalkan pilihan salah satu opsi yang memungkinkan, gunakan type="checkbox".
Apakah Anda ingin menawarkan beberapa opsi?
Bergantung pada kasus penggunaan Anda, ada berbagai alternatif.
Pertama, lihat kemungkinan solusi jika pengguna hanya boleh memilih satu opsi.
Anda dapat menggunakan beberapa elemen <input> dengan type="radio" dan nilai name yang sama. Pengguna melihat semua opsi sekaligus, tetapi hanya dapat memilih satu opsi.
Opsi lainnya adalah menggunakan elemen <select>.
Pengguna dapat men-scroll daftar opsi yang tersedia dan memilih salah satunya.
Untuk beberapa kasus penggunaan, seperti memilih rentang angka, <input>
dari jenis range mungkin merupakan opsi yang baik.
Apakah Anda perlu menawarkan kemampuan untuk memilih beberapa opsi?
Gunakan elemen <select> dengan atribut multiple atau beberapa elemen <input> berjenis checkbox.
Anda juga dapat menggunakan <input> bersama dengan elemen <datalist>.
Tindakan ini akan memberi Anda kombinasi kolom teks dan daftar elemen <option>.
Memastikan pengguna dapat mengisi berbagai jenis data
Ada lebih banyak jenis input untuk kasus penggunaan tertentu.
Ada <input> berjenis color untuk memberi pengguna pemilih warna di browser yang didukung, dan ada juga berbagai jenis lainnya. Untuk memastikan pengguna dapat memasukkan sandi mereka, gunakan <input> dengan type="password". Setiap karakter yang dimasukkan disamarkan dengan tanda bintang ("*") atau titik ("•"), untuk memastikan sandi tidak dapat dibaca.
Apakah Anda ingin menyertakan token keamanan unik dalam data formulir?
Gunakan <input> dengan type="hidden".
Nilai <input> berjenis hidden tidak dapat dilihat atau diubah oleh pengguna.
Untuk mengizinkan pengguna mengupload dan mengirimkan file, gunakan <input> dengan type="file".
Anda juga dapat menentukan elemen kustom jika memiliki kasus penggunaan khusus, yang tidak sesuai dengan elemen atau jenis bawaan.
Membantu pengguna mengisi formulir Anda
Ada banyak elemen dan jenis formulir, tetapi mana yang harus Anda pilih?
Untuk beberapa kasus penggunaan, Anda dapat dengan mudah memilih elemen dan jenis yang sesuai, seperti <input type="date">. Untuk status pajak lainnya, ini tergantung.
Misalnya, Anda dapat menggunakan beberapa elemen <input> dengan type="checkbox" atau elemen <select>.
Pelajari lebih lanjut cara memilih antara kotak daftar dan menu drop-down.
Secara umum, pastikan untuk menguji formulir Anda dengan pengguna nyata untuk menemukan elemen dan jenis formulir terbaik.
Periksa pemahaman Anda
Uji pengetahuan Anda tentang kolom formulir
Apakah beberapa file dapat diupload dengan kontrol formulir?
<input type="files">.<input type="file" multiple>.<input type="multiple-files">.Apa perbedaan antara type="text" dan type="password"?
type="password".type="password", setiap karakter yang dimasukkan akan disamarkan dengan tanda bintang (*) atau titik (•).type="password".