Kolom formulir secara mendalam

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?

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 disesuaikan 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