Kolom formulir apa yang dapat saya gunakan?
Untuk memberikan pengalaman pengguna sebaik mungkin,
pastikan untuk menggunakan elemen dan elemen type yang paling sesuai untuk data yang dimasukkan pengguna.
Membantu pengguna mengisi teks
Untuk memberi pengguna kolom formulir untuk menyisipkan teks, gunakan elemen <input>.
Opsi ini merupakan pilihan terbaik untuk satu kata dan teks pendek.
Untuk teks yang lebih panjang, gunakan elemen <textarea>.
Ini memungkinkan beberapa baris teks,
dan memudahkan pengguna untuk 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 perangkat seluler mendapatkan keyboard virtual yang disesuaikan,
sehingga memastikan mereka dapat memasukkan nomor telepon lebih cepat dan lebih mudah.
Untuk alamat email, gunakan type="email".
Sekali lagi, keyboard virtual yang disesuaikan ditampilkan.
Gunakan atribut required untuk menjadikan kolom formulir wajib diisi.
Saat formulir dikirimkan, browser akan memeriksa apakah input tersebut memiliki nilai dan valid: dalam hal ini, bahwa input tersebut adalah alamat email yang diformat dengan baik.
Pelajari lebih lanjut berbagai jenis input. Modul 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 satu opsi yang tersedia, gunakan type="checkbox".
Apakah Anda ingin menawarkan beberapa opsi?
Ada berbagai alternatif, tergantung pada kasus penggunaan Anda.
Pertama, mari kita lihat solusi yang mungkin jika pengguna hanya dapat 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 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 beberapa opsi?
Gunakan elemen <select> dengan atribut multiple atau beberapa elemen <input> jenis checkbox.
Anda juga dapat menggunakan <input> yang dikombinasikan dengan elemen <datalist>.
Kode ini 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> 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 sandi tidak dapat dibaca.
Apakah Anda ingin menyertakan token keamanan unik dalam data formulir?
Gunakan <input> dengan type="hidden".
Nilai <input> dari 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 memiliki kasus penggunaan khusus, ketika tidak ada elemen atau jenis bawaan yang cocok.
Membantu pengguna mengisi formulir Anda
Ada banyak elemen dan jenis formulir, tetapi mana yang harus Anda pilih?
Untuk beberapa kasus penggunaan, Anda dapat memilih elemen dan jenis yang sesuai dengan mudah,
seperti <input type="date">. Bagi orang lain, itu tergantung.
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 Anda menguji formulir dengan pengguna sungguhan untuk menemukan elemen dan jenis formulir yang terbaik.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang kolom 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".