Buat formulir yang memudahkan pengguna memasukkan data alamat di desktop dan perangkat seluler. Pastikan formulir memanfaatkan fitur browser bawaan untuk isi otomatis, validasi, dan batasan entri data.
Cara menerapkan
Berikut adalah panduan paling penting untuk membuat formulir alamat yang berhasil.
Menggunakan HTML yang bermakna dan valid
Manfaatkan elemen dan atribut yang dibuat untuk membuat formulir:
<form>,<input>,<label>, dan<button>type,autocomplete, daninputmode
Elemen ini mengaktifkan fungsi browser bawaan, meningkatkan aksesibilitas, dan menambahkan makna pada markup.
Menggunakan elemen <label> untuk memberi label pada kolom formulir untuk entri data
Untuk memberi label pada <input>, <select>, atau <textarea>, gunakan <label>. Kaitkan label dengan input dengan memberikan nilai yang sama pada atribut for label dengan id input.
Memanfaatkan atribut HTML secara maksimal
Permudah pengguna memasukkan data, dengan menggunakan atribut <type> elemen <input> yang sesuai untuk menyediakan keyboard yang tepat di perangkat seluler dan mengaktifkan validasi bawaan dasar oleh browser.
Selalu gunakan type="email" untuk alamat email dan type="tel" untuk nomor telepon.
<!-- type="email"/"tel" gives mobile users the right keyboard and enables built-in validation -->
<input type="email" id="email" name="email" autocomplete="email" required>
<input type="tel" id="phone" name="phone" autocomplete="tel">
Setiap elemen <input>, <select>, dan <textarea> HARUS memiliki atribut autocomplete yang sesuai, untuk meningkatkan aksesibilitas dan membantu pengguna menghindari memasukkan ulang data.
Membuat tombol yang bermanfaat
Gunakan <button> untuk tombol. Anda juga dapat menggunakan <input type="submit">, tetapi jangan gunakan div atau elemen acak lainnya yang berfungsi sebagai tombol. Elemen tombol memberikan perilaku yang mudah diakses, fungsi pengiriman formulir bawaan, dan dapat diberi gaya dengan mudah.
Beri setiap tombol kirim formulir nilai yang menjelaskan fungsinya. Untuk setiap langkah menuju checkout, gunakan pesan ajakan (CTA) deskriptif yang menunjukkan progres dan memperjelas langkah berikutnya. Misalnya, beri label tombol kirim pada formulir alamat pengiriman Anda Lanjutkan ke Pembayaran, bukan Lanjutkan atau Simpan.
Gunakan satu input nama jika memungkinkan
Izinkan pengguna memasukkan nama mereka menggunakan satu input, kecuali jika Anda memiliki alasan yang kuat untuk menyimpan nama depan, nama keluarga, gelar, atau bagian nama lainnya secara terpisah. Menggunakan satu input nama membuat formulir tidak terlalu rumit, memungkinkan potong dan tempel, serta membuat isi otomatis lebih sederhana.
Izinkan nama internasional. Untuk validasi, hindari penggunaan ekspresi reguler yang hanya cocok dengan karakter Latin. Opsi Hanya Latin mengecualikan pengguna dengan nama atau alamat yang menyertakan karakter yang tidak ada dalam alfabet Latin. Sebagai gantinya, izinkan pencocokan huruf Unicode—dan pastikan backend Anda mendukung Unicode dengan aman sebagai input dan output. Unicode dalam ekspresi reguler didukung dengan baik oleh browser modern.
Memungkinkan berbagai format alamat
Saat membuat formulir alamat, perhatikan berbagai format alamat, bahkan dalam satu negara. Jangan membuat asumsi tentang alamat "normal".
Gunakan satu elemen <textarea> untuk alamat, jika memungkinkan.
<!-- textarea handles multi-line international address formats that split inputs can't accommodate -->
<textarea id="address" name="address" autocomplete="street-address" required></textarea>
Ini adalah opsi yang paling fleksibel untuk berbagai format alamat lokal dan internasional.
Jika model data Anda memerlukan baris alamat terpisah, gunakan satu <input> per baris dengan token autocomplete address-line1, address-line2 (dan, jika diperlukan, address-line3) agar isi otomatis tetap berfungsi. Jangan memisahkan alamat di beberapa input yang tidak memiliki token ini, dan hanya jadikan baris pertama sebagai wajib diisi.
<!-- Alternative: one input per line, each with its own autocomplete token -->
<input type="text" id="address-line1" name="address-line1" autocomplete="address-line1" required>
<input type="text" id="address-line2" name="address-line2" autocomplete="address-line2">
Membantu mencegah pengguna melewatkan kolom data secara tidak sengaja
Tambahkan atribut required ke kolom wajib diisi.
<input type="text" id="city" name="city" autocomplete="address-level2" required>
Strategi penggantian
Isi otomatis adalah progressive enhancement. Di browser yang tidak mendukung isi otomatis, pengguna hanya perlu memasukkan detail alamat mereka secara manual. Batasan HTML semantik (seperti type, inputmode, dan required) akan tetap berfungsi dengan baik sebagai validasi formulir standar.