Membuat formulir login yang mengikuti praktik terbaik

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

Jika pengguna perlu login ke situs Anda, desain formulir login yang baik sangatlah penting. Hal ini terutama berlaku bagi orang yang memiliki koneksi buruk, menggunakan perangkat seluler, sedang terburu-buru, atau sedang stres. Formulir login yang dirancang dengan buruk akan menghasilkan rasio pantulan yang tinggi. Setiap rasio pantulan dapat berarti kehilangan pelanggan dan pengguna yang tidak puas, bukan hanya kehilangan peluang login.

Cara menerapkan

Berikut adalah panduan paling penting untuk membuat formulir login yang berhasil.

Menggunakan HTML yang bermakna dan valid

Manfaatkan elemen dan atribut yang dibuat untuk membuat formulir:

• <form>, <input>, <label>, dan <button>
• type, autocomplete, dan inputmode

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.

Setiap elemen <input>, <select>, dan <textarea> HARUS memiliki atribut autocomplete yang sesuai, untuk meningkatkan aksesibilitas dan membantu pengguna menghindari memasukkan ulang data.

Input nama pengguna dan email berisi ID, bukan prosa. Tambahkan spellcheck="false" agar browser tidak menulis ulang URL tersebut menjadi sesuatu yang tidak cocok dengan akun. autocorrect dan autocapitalize selalu dinonaktifkan untuk input type="email", tetapi diperlukan untuk nama pengguna non-email.

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. Gunakan label yang jelas dan mudah dikenali. Misalnya, gunakan Login, bukan Lanjutkan atau Kirim.

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.

Menampilkan progres login

Untuk setiap langkah menuju login, gunakan judul halaman dan nilai tombol deskriptif yang memperjelas tindakan yang perlu dilakukan sekarang, dan langkah berikutnya.

Gunakan atribut enterkeyhint pada input formulir untuk menetapkan label tombol enter keyboard seluler. Misalnya, gunakan enterkeyhint="previous" dan enterkeyhint="next" dalam formulir multi-halaman, enterkeyhint="done" untuk input akhir dalam formulir, dan enterkeyhint="search" untuk input penelusuran.

Membantu pengguna agar tidak perlu memasukkan kembali data login

Pastikan untuk menambahkan nilai autocomplete yang sesuai dalam formulir login.

Hal ini memungkinkan browser membantu pengguna dengan menyimpan detail login dengan aman dan memasukkan data formulir dengan benar. Tanpa isi otomatis, pengguna mungkin lebih cenderung menyimpan catatan fisik detail login, atau menyimpan data login secara tidak aman di perangkat mereka.

Validasi dengan cermat

Validasi entri data secara real-time dan sebelum pengiriman formulir. Gunakan type="email" untuk input email — browser akan memvalidasi format secara otomatis. Tambahkan atribut required ke kolom wajib diisi untuk mencegah pengiriman kosong.

Tempatkan login di elemen <form>-nya sendiri

Selalu gunakan elemen <form> saat Anda meminta pengguna memasukkan data

Jangan gabungkan input dalam <div> dan tangani pengiriman data input murni dengan JavaScript. Sebaiknya gunakan elemen <form>. Hal ini membuat situs Anda dapat diakses oleh pembaca layar dan perangkat pendukung lainnya, mengaktifkan berbagai fitur browser bawaan, mempermudah pembuatan login fungsional dasar untuk browser lama, dan masih dapat berfungsi meskipun JavaScript gagal.

Jangan menggandakan input

Beberapa situs memaksa pengguna memasukkan email atau sandi dua kali. Hal ini mungkin mengurangi error bagi beberapa pengguna, tetapi menyebabkan pekerjaan tambahan bagi semua pengguna, dan meningkatkan rasio pengabaian. Meminta dua kali juga tidak masuk akal jika browser mengisi otomatis alamat email atau menyarankan sandi kuat. Sebaiknya izinkan pengguna mengonfirmasi alamat email mereka (Anda harus melakukannya) dan permudah mereka untuk mereset sandi jika perlu.

Menjaga kerahasiaan sandi, tetapi memungkinkan pengguna melihatnya jika mereka mau

Input sandi harus memiliki type="password" untuk menyembunyikan teks sandi dan membantu browser memahami bahwa input tersebut ditujukan untuk sandi. (Perhatikan bahwa browser menggunakan berbagai teknik untuk memahami peran input dan memutuskan apakah akan menawarkan untuk menyimpan sandi atau tidak.)

Anda harus menambahkan tombol Tampilkan sandi agar pengguna dapat memeriksa teks yang telah mereka masukkan—dan jangan lupa untuk menambahkan link Lupa sandi.

Memberikan keyboard yang tepat kepada pengguna seluler

Gunakan <input type="email"> untuk memberi pengguna seluler keyboard yang sesuai dan mengaktifkan validasi alamat email bawaan dasar oleh browser… tidak memerlukan JavaScript.

Jika Anda perlu menggunakan nomor telepon, bukan alamat email, <input type="tel"> akan mengaktifkan keypad telepon di perangkat seluler. Anda juga dapat menggunakan atribut inputmode jika diperlukan: inputmode="numeric" ideal untuk nomor PIN.

Mencegah keyboard seluler menghalangi tombol Login

Jika Anda tidak berhati-hati, keyboard seluler dapat menutupi formulir atau, lebih buruk lagi, menghalangi sebagian tombol Login. Pengguna mungkin menyerah sebelum menyadari apa yang terjadi.

Jika memungkinkan, hindari hal ini dengan hanya menampilkan input email (atau ponsel) dan sandi serta tombol Login di bagian atas halaman login Anda. Letakkan konten lain di bawahnya.

Membantu pengguna agar tidak perlu memasukkan ulang data

Anda dapat membantu browser menyimpan data dengan benar dan mengisi otomatis input, sehingga pengguna tidak perlu mengingat untuk memasukkan nilai email dan sandi. Hal ini sangat penting di perangkat seluler, dan sangat penting untuk input email, yang memiliki rasio pengabaian tinggi. Ada dua bagian untuk hal ini:

1. Atribut autocomplete, name, id, dan type membantu browser memahami peran input untuk menyimpan data yang nantinya dapat digunakan untuk isi otomatis. Agar data dapat disimpan untuk isi otomatis, browser modern juga mengharuskan input memiliki nilai name atau id yang stabil (tidak dibuat secara acak pada setiap pemuatan halaman atau deployment situs), dan berada dalam elemen <form> dengan tombol submit.
2. Atribut autocomplete membantu browser mengisi otomatis input dengan benar menggunakan data yang disimpan.

Untuk input email, gunakan autocomplete="username", karena username dikenali oleh pengelola sandi di browser modern—meskipun Anda harus menggunakan type="email" dan Anda mungkin ingin menggunakan id="email" dan name="email". Untuk input sandi, gunakan nilai autocomplete yang sesuai untuk membantu browser membedakan antara sandi baru dan sandi saat ini.

Gunakan autocomplete="current-password" untuk sandi yang ada

WAJIB: Gunakan autocomplete="current-password" untuk input sandi dalam formulir login. Tindakan ini memberi tahu browser bahwa Anda ingin browser menggunakan sandi saat ini yang telah disimpan untuk situs tersebut.

Untuk formulir login:

<input type="password" autocomplete="current-password" id="current-password" …>

Mengaktifkan browser untuk menyarankan sandi kuat

Browser modern menggunakan heuristik untuk memutuskan kapan harus menampilkan UI pengelola sandi dan menyarankan sandi yang kuat.

Dengan generator sandi bawaan browser, pengguna dan developer tidak perlu mencari tahu apa itu "sandi kuat". Karena browser dapat menyimpan sandi dengan aman dan mengisinya otomatis sesuai kebutuhan, pengguna tidak perlu mengingat atau memasukkan sandi. Mendorong pengguna untuk memanfaatkan generator sandi bawaan browser juga berarti mereka lebih cenderung menggunakan sandi yang unik dan kuat di situs Anda, dan cenderung tidak menggunakan kembali sandi yang dapat disusupi di tempat lain.

Membantu mencegah pengguna melewatkan input secara tidak sengaja

WAJIB: Tambahkan atribut required ke kolom email dan sandi. Browser modern otomatis menampilkan dialog dan menetapkan fokus untuk data yang tidak ada.

<input type="email" id="email" name="email" autocomplete="username" required>
<input type="password" id="password" name="password" autocomplete="current-password" required>

Mengizinkan penempelan sandi

Beberapa situs tidak mengizinkan teks ditempelkan ke input sandi.

Tidak mengizinkan penempelan sandi akan mengganggu pengguna, mendorong penggunaan sandi yang mudah diingat (sehingga mungkin lebih mudah dibobol), dan, menurut organisasi seperti National Cyber Security Centre di Inggris Raya, justru dapat mengurangi keamanan. Pengguna hanya akan menyadari bahwa penempelan tidak diizinkan setelah mereka mencoba menempelkan sandi, sehingga melarang penempelan sandi tidak akan menghindari kerentanan papan klip.

Strategi penggantian

Isi otomatis adalah progressive enhancement. Di browser yang tidak mendukung isi otomatis, pengguna hanya perlu memasukkan kredensial login mereka secara manual. Batasan HTML semantik (seperti type, inputmode, dan required) akan tetap berfungsi dengan semestinya untuk memvalidasi input pengguna dan menyediakan keyboard virtual yang benar.