Kolom formulir apa yang dapat saya gunakan?
Untuk memberikan
pengalaman pengguna yang terbaik,
pastikan untuk menggunakan elemen dan elemen type yang paling sesuai untuk data yang dimasukkan pengguna.
Bantu pengguna mengisi teks
Guna menyediakan kolom formulir untuk menyisipkan teks kepada pengguna, gunakan elemen <input>.
Pilihan ini adalah pilihan terbaik untuk kata tunggal dan teks pendek.
Untuk teks yang lebih panjang, gunakan elemen <textarea>.
Cara ini memungkinkan
beberapa baris teks,
dan memudahkan pengguna melihat teks yang mereka masukkan, karena elemen dapat di-scroll dan dapat 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 perangkat seluler mendapatkan
keyboard di layar yang disesuaikan,
memastikan mereka dapat memasukkan nomor telepon
dengan lebih cepat dan lebih mudah.
Untuk alamat email, gunakan type="email".
Sekali lagi, keyboard virtual yang disesuaikan ditampilkan.
Gunakan atribut required untuk membuat kolom formulir menjadi wajib.
Saat formulir dikirimkan, browser akan memeriksa apakah input tersebut memiliki nilai dan valid: dalam hal ini,
bahwa ini adalah alamat email yang diformat dengan baik.
Pelajari berbagai jenis input lebih lanjut. 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 khusus untuk memilih tanggal dalam bentuk pemilih tanggal.
Membantu pengguna memilih opsi
Untuk memastikan pengguna dapat memilih atau membatalkan pilihan satu opsi yang tersedia, gunakan type="checkbox".
Apakah Anda ingin menawarkan beberapa opsi?
Ada berbagai alternatif bergantung pada kasus penggunaan Anda.
Pertama, mari lihat solusi yang memungkinkan jika pengguna hanya dapat memilih satu opsi.
Anda dapat menggunakan beberapa elemen <input> dengan type="radio" dan nilai name yang sama. Pengguna akan melihat semua opsi sekaligus, tetapi hanya dapat memilih satu.
Opsi lainnya adalah menggunakan elemen <select>.
Pengguna dapat men-scroll daftar opsi yang tersedia dan memilih salah satu.
Untuk beberapa kasus penggunaan, seperti memilih rentang angka,
<input> dari jenis range mungkin merupakan opsi yang bagus.
Apakah Anda perlu menawarkan kemampuan untuk memilih lebih dari satu opsi?
Gunakan elemen <select> dengan atribut multiple atau beberapa elemen <input> dari jenis checkbox.
Anda juga dapat menggunakan <input> yang dikombinasikan dengan elemen <datalist>.
Tindakan ini memberi Anda kombinasi kolom teks dan daftar elemen <option>.
Pastikan pengguna dapat mengisi berbagai jenis data
Ada lebih banyak jenis input untuk kasus penggunaan tertentu.
Ada <input> dari jenis color untuk memberi pengguna pemilih warna di browser yang didukung.
dan ada berbagai jenis lainnya. Untuk memastikan pengguna dapat memasukkan sandi mereka, gunakan <input>
dengan type="password". Setiap karakter yang dimasukkan akan disamarkan dengan tanda bintang ("*") atau titik ("•"),
untuk memastikan {i>
password<i} tidak dapat dibaca.
Apakah Anda ingin menyertakan token keamanan unik dalam data formulir?
Gunakan <input> dengan type="hidden".
Nilai <input> jenis hidden tidak dapat dilihat atau diubah oleh pengguna.
Agar pengguna dapat mengupload dan mengirimkan file, gunakan <input> dengan type="file".
Anda juga dapat menentukan elemen kustom jika ada kasus penggunaan khusus, di mana tidak ada elemen atau jenis bawaan yang cocok.
Membantu pengguna mengisi formulir
Ada banyak elemen dan jenis formulir, tetapi manakah yang harus Anda pilih?
Untuk beberapa kasus penggunaan, Anda dapat
memilih elemen dan jenis yang sesuai,
misalnya <input type="date">. Sedangkan untuk yang lainnya, tergantung pada {i>dog walker<i}.
Misalnya, Anda dapat menggunakan beberapa elemen <input> dengan elemen type="checkbox" atau <select>.
Pelajari lebih lanjut cara memilih antara kotak daftar dan daftar dropdown.
Secara umum, pastikan untuk uji formulir Anda dengan pengguna sungguhan untuk menemukan elemen dan jenis formulir terbaik.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang {i>field<i} formulir
Apakah mungkin untuk mengupload beberapa file 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".