Kolom formulir secara mendalam

Kolom formulir apa yang dapat saya gunakan?

Untuk memberikan pengalaman pengguna terbaik, pastikan untuk menggunakan elemen dan elemen type yang paling sesuai untuk data yang dimasukkan pengguna.

Membantu pengguna mengisi teks

Untuk memberi pengguna kolom formulir guna menyisipkan teks, gunakan elemen <input>. Ini adalah pilihan terbaik untuk satu kata dan teks 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 mendapatkan keyboard virtual yang disesuaikan, sehingga memastikan mereka dapat memasukkan nomor telepon dengan lebih cepat dan lebih mudah.

Untuk alamat email, gunakan type="email". Sekali lagi, keyboard virtual yang diadaptasi akan ditampilkan. Gunakan atribut required untuk membuat kolom formulir wajib diisi. Saat formulir dikirim, browser akan memeriksa apakah input memiliki nilai dan valid: dalam hal ini, apakah alamat email tersebut diformat dengan baik.

Pelajari lebih lanjut berbagai jenis input. Alat 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 mungkin, gunakan type="checkbox". Apakah Anda ingin menawarkan beberapa opsi? Bergantung pada kasus penggunaan Anda, ada berbagai alternatif. Pertama, mari kita lihat kemungkinan solusi 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 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> dari jenis checkbox.

Anda juga dapat menggunakan <input> dalam kombinasi 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> jenis 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 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, tanpa elemen atau jenis bawaan yang sesuai.

Membantu pengguna mengisi formulir Anda

Ada banyak elemen dan jenis formulir, tetapi mana yang sebaiknya Anda pilih?

Untuk beberapa kasus penggunaan, memilih elemen dan jenis yang sesuai, seperti <input type="date">, sangatlah mudah. Untuk status pajak lainnya, hal ini bergantung pada situasinya. Misalnya, Anda dapat menggunakan beberapa elemen <input> dengan elemen type="checkbox" atau <select>. Pelajari lebih lanjut cara memilih antara kotak daftar dan menu drop-down.

Secara umum, pastikan untuk menguji formulir Anda dengan pengguna sungguhan untuk menemukan elemen dan jenis formulir terbaik.

Memeriksa pemahaman Anda

Uji pengetahuan Anda tentang kolom formulir

Apakah Anda dapat mengupload beberapa file dengan kontrol formulir?

Ya, menggunakan <input type="files">.
Coba lagi.
Ya, menggunakan <input type="file" multiple>.
🎉
Tidak.
Coba lagi.
Ya, menggunakan <input type="multiple-files">.
Coba lagi.

Apa perbedaan antara type="text" dan type="password"?

Tidak ada perbedaan.
Coba lagi.
Keyboard virtual yang diadaptasi untuk memasukkan sandi ditampilkan untuk type="password".
Coba lagi.
Saat menggunakan type="password", setiap karakter yang dimasukkan akan disamarkan dengan tanda bintang (*) atau titik ().
🎉
Antarmuka kustom untuk memasukkan sandi ditampilkan untuk type="password".
Coba lagi.

Resource