Atribut elemen HTML dapat meningkatkan <form> dan kontrol formulir Anda.
Membantu pengguna mengisi kontrol formulir
Untuk memudahkan pengguna mengisi formulir,
gunakan atribut type yang sesuai untuk elemen <input> Anda.
Browser menampilkan antarmuka pengguna yang sesuai untuk type,
seperti pemilih tanggal untuk <input> jenis date.
Browser di perangkat seluler menampilkan keyboard virtual yang disesuaikan,
seperti keypad nomor telepon untuk type="tel".
Beberapa jenis <input> juga mengubah aturan validasi untuk elemen saat formulirnya dikirimkan.
Misalnya, <input type="url"> hanya valid jika tidak kosong dan nilainya adalah URL.
Memastikan pengguna memasukkan data
Ada atribut berbeda untuk menyediakan keyboard virtual yang sesuai di perangkat sentuh.
Opsi pertama adalah menggunakan atribut type, seperti yang disebutkan di atas.
Opsi lainnya adalah atribut inputmode yang didukung di
Android dan iOS.
Berbeda dengan atribut type, atribut inputmode hanya mengubah keyboard virtual
yang disediakan, bukan perilaku elemen itu sendiri. Menggunakan inputmode adalah opsi yang bagus jika Anda ingin mempertahankan antarmuka pengguna default dan aturan validasi default <input>, tetapi masih menginginkan keyboard virtual yang dioptimalkan.
Anda dapat mengubah tombol Enter di keyboard virtual dengan atribut enterkeyhint.
Misalnya, enterkeyhint="next" atau enterkeyhint="done" mengubah label tombol menjadi ikon yang sesuai.
Hal ini membantu memperjelas bagi pengguna apa yang terjadi saat mereka mengirimkan formulir saat ini.
Memastikan pengguna dapat mengirimkan formulir
Misalnya, Anda mengisi <form>, klik tombol Submit, tetapi tidak ada yang terjadi.
Masalahnya mungkin tombol telah dinonaktifkan dengan atribut disabled.
Ini adalah pola umum untuk menonaktifkan tombol Submit hingga formulir valid.
Secara teori, hal ini terdengar masuk akal, tetapi Anda sebaiknya tidak menonaktifkan tombol Submit saat menunggu input pengguna yang lengkap dan valid. Sebagai gantinya, tandai data yang tidak valid saat dimasukkan, dan sorot kolom bermasalah kepada pengguna saat mereka mengirimkan formulir.
Namun, Anda dapat menonaktifkan tombol Kirim setelah formulir berhasil dikirim, tetapi belum diproses. Pelajari lebih lanjut tombol yang dinonaktifkan.
Membantu pengguna dengan menampilkan data yang sebelumnya mereka masukkan
Bayangkan Anda memiliki formulir checkout dengan beberapa langkah.
Bagaimana Anda memastikan nilai yang dimasukkan sebelumnya masih ada saat pengguna kembali ke langkah sebelumnya?
Gunakan atribut value untuk menampilkan nilai yang telah diselesaikan.
<label for="name">Name</label>
<input value="Hilda" name="name" id="name" type="text">
Ada beberapa cara untuk mengambil nilai kontrol formulir di JavaScript.
Anda dapat menggunakan properti value, atau Anda dapat mengakses nilai dengan getAttribute('value').
Ada satu perbedaan besar,
properti value selalu menampilkan nilai saat ini,
dan penggunaan getAttribute() akan selalu menampilkan nilai awal.
Cobalah!
Ubah teks kolom nama dan lihat konsol.
Perhatikan bagaimana properti value menampilkan teks yang saat ini terlihat,
sedangkan getAttribute('value') selalu menampilkan nilai awal.
Pelajari lebih lanjut perbedaan antara atribut DOM dan properti DOM.
Untuk elemen <input> jenis checkbox atau radio, gunakan atribut checked.
Tambahkan jika pengguna memilih opsi dan hapus sebaliknya.
Pastikan pengguna memahami format yang diharapkan
Nilai atribut placeholder merupakan petunjuk untuk jenis informasi yang diharapkan.
<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Karin">
Hal ini mungkin membingungkan pengguna, karena mungkin terlihat tidak logis mengapa kontrol formulir tampaknya sudah diisi otomatis. Selain itu, menambahkan placeholder dapat menyulitkan untuk melihat kolom formulir mana yang masih harus diisi. Selain itu, gaya default teks {i>placeholder<i} mungkin sulit dibaca.
Secara umum, berhati-hatilah saat menggunakan atribut placeholder dan jangan pernah menggunakan atribut placeholder untuk menjelaskan kontrol formulir.
Sebagai gantinya, gunakan elemen <label>.
Pelajari lebih lanjut
alasan Anda harus mempertimbangkan untuk menghindari atribut placeholder.
Cara yang lebih baik untuk memberikan petunjuk kepada pengguna tentang jenis informasi yang diharapkan adalah menggunakan elemen HTML tambahan di bawah kontrol formulir untuk menambahkan penjelasan atau contoh.
Pastikan kontrol formulir siap untuk divalidasi
Ada berbagai atribut HTML yang tersedia untuk mengaktifkan validasi bawaan.
Gunakan atribut required untuk mencegah pengiriman kolom kosong.
Validasi tambahan dapat diterapkan dengan atribut type.
Misalnya, nilai <input> yang diperlukan sebesar type="url" harus berupa URL.
Untuk memastikan pengguna memasukkan jumlah karakter minimum,
gunakan atribut minlength.
Untuk melarang nilai apa pun yang memiliki jumlah karakter melebihi batas,
gunakan atribut maxlength.
Untuk jenis input numerik seperti <input type="number">, gunakan atribut min dan max sebagai gantinya.
Cari tahu lebih lanjut tentang validasi: Bantu pengguna memasukkan data yang benar dalam formulir.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang atribut bentuk
Atribut apa yang dapat Anda gunakan untuk mengubah label tombol Enter di keyboard virtual?
enterkeyenterkeyhintenterkeytextenterkeylabelApa perbedaan antara properti value dan getAttribute('value')?
value menampilkan nilai saat ini, getAttribute('value') menampilkan nilai awal.value menampilkan nilai awal, getAttribute('value') menampilkan nilai saat ini.value menampilkan kunci dan nilai, getAttribute('value') hanya menampilkan nilai.