Praktik terbaik formulir login

Gunakan fitur browser lintas platform untuk membuat formulir login yang aman, dapat diakses, dan mudah digunakan.

Sam Dutton

Jika pengguna perlu login ke situs Anda, desain formulir login yang baik sangat penting. Hal ini terutama berlaku bagi orang yang menggunakan koneksi buruk, di perangkat seluler, sedang terburu-buru, atau sedang stres. Formulir login yang dirancang dengan buruk akan mendapatkan rasio pantulan yang tinggi. Setiap pentalan dapat berarti pengguna yang hilang dan tidak puas—bukan hanya peluang login yang terlewatkan.

Berikut adalah contoh formulir login sederhana yang menunjukkan semua praktik terbaik:

Checklist

• Gunakan elemen HTML yang bermakna: <form>, <input>, <label>, dan <button>.
• Beri label setiap input dengan <label>.
• Gunakan atribut elemen untuk mengakses fitur browser bawaan: type, name, autocomplete, required.
• Berikan nilai stabil pada atribut input name dan id yang tidak berubah di antara pemuatan halaman atau deployment situs.
• Letakkan proses login dalam elemen <form> sendiri.
• Memastikan pengiriman formulir berhasil.
• Gunakan autocomplete="new-password" dan id="new-password" untuk input sandi dalam formulir pendaftaran, dan untuk sandi baru dalam formulir reset sandi.
• Gunakan autocomplete="current-password" dan id="current-password" untuk input sandi login.
• Menyediakan fungsi Tampilkan sandi.
• Gunakan aria-label dan aria-describedby untuk input sandi.
• Jangan menggandakan input.
• Desain formulir agar keyboard seluler tidak menutupi input atau tombol.
• Pastikan formulir dapat digunakan di perangkat seluler: gunakan teks yang mudah dibaca, dan pastikan input dan tombol cukup besar untuk berfungsi sebagai target sentuh.
• Pertahankan branding dan gaya di halaman pendaftaran dan login Anda.
• Lakukan pengujian di lapangan dan di lab: bangun analisis halaman, analisis interaksi, dan pengukuran performa berpusat pengguna ke dalam alur pendaftaran dan login Anda.
• Uji di seluruh browser dan perangkat: perilaku formulir sangat bervariasi di seluruh platform.

Menggunakan HTML yang bermakna

Gunakan elemen yang dibuat untuk tugas: <form>, <label>, dan <button>. Hal ini memungkinkan fungsi browser bawaan, meningkatkan aksesibilitas, dan menambahkan makna pada markup Anda.

Gunakan <form>

Anda mungkin tergoda untuk membungkus input dalam <div> dan menangani pengiriman data input hanya dengan JavaScript. Sebaiknya gunakan elemen <form> biasa. Hal ini membuat situs Anda dapat diakses oleh pembaca layar dan perangkat bantu lainnya, mengaktifkan berbagai fitur browser bawaan, menyederhanakan pembuatan login fungsional dasar untuk browser lama, dan tetap dapat berfungsi meskipun JavaScript gagal.

Gunakan <label>

Untuk memberi label pada input, gunakan <label>.

<label for="email">Email</label>
<input id="email" …>

Dua alasan:

• Ketukan atau klik pada label akan memindahkan fokus ke inputnya. Kaitkan label dengan input menggunakan atribut for label dengan name atau id input.
• Pembaca layar mengucapkan teks label saat label atau input label mendapatkan fokus.

Jangan gunakan placeholder sebagai label input. Orang cenderung lupa tujuan input setelah mereka mulai memasukkan teks, terutama jika mereka terganggu ("Apakah saya memasukkan alamat email, nomor telepon, atau ID akun?"). Ada banyak potensi masalah lain terkait penampung: lihat Jangan Gunakan Atribut Penampung dan Penampung di Kolom Formulir Berbahaya jika Anda tidak yakin.

Sebaiknya letakkan label di atas input Anda. Hal ini memungkinkan desain yang konsisten di seluruh perangkat seluler dan desktop dan, menurut riset AI Google, memungkinkan pemindaian yang lebih cepat oleh pengguna. Anda mendapatkan label dan input lebar penuh, dan Anda tidak perlu menyesuaikan lebar label dan input agar sesuai dengan teks label.