Membuat formulir pendaftaran yang mengikuti praktik terbaik

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

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

Cara menerapkan

Berikut adalah panduan paling penting untuk membuat formulir pendaftaran yang efektif.

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 Buat akun atau Daftar, 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 pendaftaran

Untuk setiap langkah menuju pendaftaran, gunakan judul halaman dan nilai tombol deskriptif yang memperjelas apa yang perlu dilakukan sekarang, dan apa 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 ulang data pendaftaran

Pastikan untuk menambahkan nilai autocomplete yang sesuai dalam formulir pendaftaran.

Hal ini memungkinkan browser membantu pengguna dengan menyimpan detail pendaftaran secara aman dan memasukkan data formulir dengan benar. Tanpa pelengkapan otomatis, pengguna mungkin lebih cenderung menyimpan catatan fisik detail pendaftaran, atau menyimpan data pendaftaran 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. Untuk sandi, gunakan atribut pattern untuk menerapkan persyaratan kekuatan dan memberikan pesan error yang jelas saat validasi gagal. Tambahkan atribut required ke kolom wajib diisi untuk mencegah pengiriman kosong.

Tempatkan pendaftaran 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 pendaftaran 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 Daftar

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

Jika memungkinkan, hindari hal ini dengan hanya menampilkan input email (atau telepon) dan sandi serta tombol Daftar di bagian atas halaman pendaftaran 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="new-password" untuk sandi baru

WAJIB: Untuk formulir pendaftaran, gunakan autocomplete="new-password".

<!-- new-password prevents password managers from auto-filling an existing password into this field -->
<input type="password" id="new-password" name="new-password" autocomplete="new-password" required>

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

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

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.

Menawarkan login pihak ketiga

Banyak pengguna lebih memilih untuk login ke situs menggunakan formulir pendaftaran alamat email dan sandi. Namun, Anda juga harus mengizinkan pengguna login menggunakan penyedia identitas pihak ketiga, yang juga dikenal sebagai login gabungan.

Pendekatan ini memiliki beberapa manfaat. Untuk pengguna yang membuat akun menggunakan login gabungan, Anda tidak perlu meminta, mengomunikasikan, atau menyimpan sandi.

Anda juga dapat mengakses informasi profil terverifikasi tambahan dari login gabungan, seperti alamat email—yang berarti pengguna tidak perlu memasukkan data tersebut dan Anda tidak perlu melakukan verifikasi sendiri. Login gabungan juga dapat mempermudah pengguna saat mereka mendapatkan perangkat baru.

Berhati-hatilah dengan nama pengguna

Jangan memaksa pengguna untuk membuat nama pengguna kecuali (atau sampai) Anda membutuhkannya. Memungkinkan pengguna mendaftar dan login hanya dengan alamat email (atau nomor telepon) dan sandi—atau login gabungan jika mereka mau. Jangan paksa mereka untuk memilih dan mengingat nama pengguna.

Jika situs Anda memerlukan nama pengguna, jangan menerapkan aturan yang tidak masuk akal, dan jangan menghentikan pengguna memperbarui nama pengguna mereka. Di backend, Anda harus membuat ID unik untuk setiap akun pengguna, bukan ID berdasarkan data pribadi seperti nama pengguna.

Pastikan juga untuk menggunakan autocomplete="username" untuk nama pengguna.

Strategi penggantian

Isi otomatis adalah progressive enhancement. Di browser yang tidak mendukung isi otomatis, pengguna hanya perlu memasukkan kredensial pendaftaran 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.