Praktik terbaik formulir login

Gunakan fitur browser lintas platform untuk membuat formulir login yang aman, dapat 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 internet yang buruk, menggunakan perangkat seluler, yang sedang terburu-buru, atau sedang stres. Formulir login yang tidak didesain dengan baik akan menghasilkan rasio pantulan yang tinggi. Setiap pantulan dapat berarti pengguna yang hilang dan tidak puas—bukan hanya peluang login yang terlewat.

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

Checklist

• Gunakan elemen HTML yang bermakna: <form>, <input>, <label>, dan <button>.
• Beri label pada setiap input dengan <label>.
• Gunakan atribut elemen untuk mengakses fitur browser bawaan: type, name, autocomplete, required.
• Memberikan input name dan id mengatribusikan nilai stabil yang tidak berubah antara pemuatan halaman atau deployment situs.
• Tempatkan login di elemen <form>-nya sendiri.
• Pastikan 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 gandakan input.
• Desain formulir agar keyboard seluler tidak menyamarkan input atau tombol.
• Pastikan formulir dapat digunakan di perangkat seluler: gunakan teks yang dapat dibaca, dan pastikan input serta tombol cukup besar untuk berfungsi sebagai target sentuh.
• Pertahankan branding dan gaya di halaman pendaftaran dan login Anda.
• Lakukan pengujian di lapangan serta lab: buat analisis halaman, analisis interaksi, dan pengukuran performa yang berfokus pada pengguna ke dalam alur pendaftaran dan login Anda.
• Uji di berbagai browser dan perangkat: perilaku formulir sangat bervariasi di berbagai platform.

Menggunakan HTML yang bermakna

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

Gunakan <form>

Anda mungkin tergoda untuk menggabungkan input dalam <div> dan menangani pengiriman data input hanya dengan JavaScript. Secara umum, sebaiknya gunakan elemen <form> lama biasa. 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 tetap dapat berfungsi meskipun JavaScript gagal.

Gunakan <label>

Untuk memberi label pada input, gunakan <label>.

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

Ada dua alasan:

• Ketukan atau klik 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 menjadi fokus.

Jangan menggunakan placeholder sebagai label input. Orang dapat lupa untuk apa input tersebut setelah mereka mulai memasukkan teks, terutama jika perhatian mereka terganggu ("Apakah saya memasukkan alamat email, nomor telepon, atau ID akun?"). Ada banyak potensi masalah lainnya terkait placeholder: lihat Jangan Menggunakan Atribut Placeholder dan Placeholder di Kolom Formulir Berbahaya jika Anda tidak yakin.

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

Buka Glitch label-position di perangkat seluler untuk melihatnya sendiri.

Gunakan <button>

Gunakan <button> untuk tombol. Elemen tombol menyediakan perilaku yang mudah diakses dan fungsi pengiriman formulir bawaan, serta dapat dengan mudah ditata gayanya. Tidak ada gunanya menggunakan <div> atau beberapa elemen lain yang berpura-pura menjadi tombol.

Pastikan tombol kirim menunjukkan fungsinya. Contohnya mencakup Buat akun atau Login, bukan Submit atau Start.

Pastikan pengiriman formulir berhasil

Bantu pengelola sandi memahami bahwa formulir telah dikirimkan. Ada dua cara untuk melakukannya:

• Buka halaman lain.
• Emulasikan navigasi dengan History.pushState() atau History.replaceState(), dan hapus formulir sandi.

Dengan permintaan XMLHttpRequest atau fetch, pastikan keberhasilan login dilaporkan dalam respons dan ditangani dengan mengeluarkan formulir dari DOM serta menunjukkan keberhasilan kepada pengguna.

Pertimbangkan untuk menonaktifkan tombol Login setelah pengguna mengetuk atau mengkliknya. Banyak pengguna mengklik tombol beberapa kali bahkan di situs yang cepat dan responsif. Hal tersebut akan memperlambat interaksi dan menambah beban server.

Sebaliknya, jangan nonaktifkan pengiriman formulir yang menunggu input pengguna. Misalnya, jangan menonaktifkan tombol Login jika pengguna belum memasukkan PIN pelanggan. Pengguna mungkin melewatkan sesuatu dalam formulir, lalu mencoba mengetuk tombol Login berulang kali (dinonaktifkan) dan menganggap tombol tersebut tidak berfungsi. Setidaknya, jika Anda harus menonaktifkan pengiriman formulir, jelaskan kepada pengguna apa yang tidak ada saat mereka mengklik tombol yang dinonaktifkan.

Jangan gandakan input

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

Memaksimalkan atribut elemen

Di sinilah keajaiban benar-benar terjadi! Browser memiliki beberapa fitur bawaan yang berguna yang menggunakan atribut elemen input.

Menjaga kerahasiaan sandi, tetapi izinkan pengguna untuk melihatnya jika mereka menginginkannya

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

Anda harus menambahkan tombol Tampilkan sandi agar pengguna dapat memeriksa teks yang telah dimasukkan, dan jangan lupa untuk menambahkan link Lupa sandi. Lihat Mengaktifkan tampilan sandi.

Berikan keyboard yang tepat kepada pengguna seluler

Gunakan <input type="email"> untuk memberikan keyboard yang sesuai kepada pengguna seluler dan mengaktifkan validasi alamat email bawaan dari browser... JavaScript tidak diperlukan.

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. Semua Hal yang Ingin Anda Ketahui Tentang inputmode memiliki detail selengkapnya.

Mencegah keyboard seluler menghalangi tombol Login

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

Jika memungkinkan, hindari hal ini dengan hanya menampilkan input email/telepon dan sandi serta tombol Login di bagian atas halaman login Anda. Masukkan konten lainnya di bawah.

Menguji di berbagai perangkat

Anda harus melakukan pengujian di berbagai perangkat untuk target audiens Anda, dan menyesuaikannya. BrowserStack memungkinkan pengujian gratis untuk project open source di berbagai perangkat dan browser sungguhan.

Pertimbangkan untuk menggunakan dua halaman

Beberapa situs (termasuk Amazon dan eBay) menghindari masalah ini dengan meminta email/telepon dan sandi di dua halaman. Pendekatan ini juga menyederhanakan pengalaman: pengguna hanya ditugaskan untuk melakukan satu hal dalam satu waktu.

Idealnya, hal ini harus diterapkan dengan satu <form>. Gunakan JavaScript untuk awalnya hanya menampilkan input email, lalu menyembunyikannya dan menampilkan input sandi. Jika Anda harus memaksa pengguna membuka halaman baru antara memasukkan email dan sandi, formulir di halaman kedua harus memiliki elemen input tersembunyi beserta nilai email agar pengelola sandi dapat menyimpan nilai yang benar. Gaya Formulir Sandi yang Dipahami Chromium memberikan contoh kode.

Membantu pengguna agar tidak memasukkan data lagi

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

Ada dua bagian untuk 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 memerlukan input agar memiliki nilai name atau id yang stabil (tidak dibuat secara acak pada setiap pemuatan halaman atau deployment situs), dan berada dalam <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 dan id yang sesuai untuk membantu browser membedakan sandi yang baru dan saat ini.

Gunakan autocomplete="new-password" dan id="new-password" untuk sandi baru

• Gunakan autocomplete="new-password" dan id="new-password" untuk input sandi di formulir pendaftaran, atau sandi baru dalam formulir ubah sandi.

Gunakan autocomplete="current-password" dan id="current-password" untuk sandi yang sudah ada

• Gunakan autocomplete="current-password" dan id="current-password" untuk input sandi dalam formulir login, atau input untuk sandi lama pengguna dalam formulir ubah sandi. Tindakan ini akan memberi tahu browser bahwa Anda ingin menggunakan sandi saat ini yang telah disimpan untuk situs.

Untuk formulir pendaftaran:

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

Untuk login:

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

Mendukung pengelola sandi

Browser yang berbeda menangani fitur isi otomatis email dan saran sandi dengan sedikit berbeda, tetapi efeknya hampir sama. Misalnya, pada Safari 11 dan yang lebih baru di desktop, pengelola sandi akan ditampilkan, lalu autentikasi biometrik (sidik jari atau pengenalan wajah) akan digunakan jika tersedia.

Chrome di desktop menampilkan saran email, menampilkan pengelola sandi, dan mengisi otomatis sandi.

Sandi browser dan sistem isi otomatis tidak sederhana. Algoritma untuk menebak, menyimpan, dan menampilkan nilai tidak standar, dan bervariasi dari platform ke platform. Misalnya, seperti yang ditunjukkan oleh Hidde de Vries: "Pengelola sandi Firefox melengkapi heuristiknya dengan sistem resep".

Isi Otomatis: Hal yang perlu diketahui developer web, tetapi tidak memiliki informasi lengkap tentang penggunaan name dan autocomplete. Spesifikasi HTML mencantumkan semua 59 kemungkinan nilai.

Aktifkan browser untuk menyarankan sandi kuat

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

Berikut adalah cara Safari melakukannya di desktop.

(Saran sandi unik yang kuat telah tersedia di Safari sejak versi 12.0.)

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

Membantu menyimpan pengguna dari input yang hilang secara tidak sengaja

Tambahkan atribut required ke kolom email dan sandi. Browser modern otomatis meminta dan menetapkan fokus untuk data yang hilang. JavaScript tidak diperlukan!

Desain untuk jari dan ibu jari

Ukuran browser default untuk hampir semua hal yang berkaitan dengan elemen dan tombol terlalu kecil, terutama di perangkat seluler. Hal ini mungkin tampak sepele, namun ini adalah masalah umum pada formulir login di banyak situs.

Pastikan ukuran input dan tombol cukup besar

Ukuran dan padding default untuk input dan tombol terlalu kecil di desktop, dan bahkan lebih buruk di perangkat seluler.

Menurut panduan aksesibilitas Android, ukuran target yang direkomendasikan untuk objek layar sentuh adalah 7–10 mm. Panduan antarmuka Apple menyarankan 48x48 piksel, dan W3C menyarankan setidaknya 44x44 piksel CSS. Oleh karena itu, tambahkan (setidaknya) padding sekitar 15 px ke elemen input dan tombol untuk perangkat seluler, dan sekitar 10 px di desktop. Cobalah ini dengan perangkat seluler sungguhan dan jari atau ibu jari sungguhan. Anda harus dapat mengetuk setiap input dan tombol Anda dengan nyaman.

Target Ketuk tidak memiliki ukuran yang tepat Audit Lighthouse dapat membantu Anda mengotomatiskan proses deteksi elemen input yang terlalu kecil.

Desain untuk ibu jari

Telusuri target sentuh dan Anda akan melihat banyak gambar jari telunjuk. Namun, di dunia nyata, banyak orang menggunakan ibu jari untuk berinteraksi dengan ponsel. Jempol lebih besar dari jari telunjuk, dan kontrolnya kurang akurat. Semua itu adalah alasan untuk target sentuh yang berukuran memadai.

Buat teks cukup besar

Seperti ukuran dan padding, ukuran font browser default untuk elemen dan tombol input terlalu kecil, terutama di perangkat seluler.

Browser pada platform yang berbeda mengubah ukuran font dengan cara yang berbeda, sehingga sulit untuk menentukan ukuran font tertentu yang berfungsi dengan baik di mana saja. Survei singkat pada situs populer menunjukkan ukuran 13–16 piksel di desktop: pencocokan ukuran fisik tersebut adalah nilai minimum yang baik untuk teks di perangkat seluler.

Ini berarti Anda perlu menggunakan ukuran piksel yang lebih besar di perangkat seluler: 16px di Chrome untuk desktop cukup mudah dibaca, tetapi meskipun dengan penglihatan yang baik, teks 16px di Chrome untuk Android akan sulit dibaca. Anda dapat menetapkan ukuran piksel font yang berbeda untuk ukuran area pandang yang berbeda menggunakan kueri media. 20px cukup praktis di perangkat seluler—tetapi Anda harus mengujinya dengan teman atau kolega yang memiliki gangguan penglihatan.

Dokumen tidak menggunakan ukuran font yang dapat dibaca Audit Lighthouse dapat membantu Anda mengotomatiskan proses deteksi teks yang terlalu kecil.

Sediakan cukup ruang di antara input

Tambahkan margin yang cukup agar input berfungsi dengan baik sebagai target sentuh. Dengan kata lain, bidik sekitar selebar jari dari margin.

Pastikan input Anda terlihat jelas

Gaya batas default untuk input membuatnya sulit dilihat. Elemen ini hampir tidak terlihat pada beberapa platform seperti Chrome untuk Android.

Selain padding, tambahkan batas: pada latar belakang putih, aturan umum yang baik adalah menggunakan #ccc atau yang lebih gelap.

Menggunakan fitur browser bawaan untuk memperingatkan nilai input yang tidak valid

Browser memiliki fitur bawaan untuk melakukan validasi formulir dasar untuk input dengan atribut type. Browser akan memberikan peringatan saat Anda mengirimkan formulir dengan nilai yang tidak valid, dan menetapkan fokus pada input yang bermasalah.

Anda dapat menggunakan pemilih CSS :invalid untuk menandai data yang tidak valid. Gunakan :not(:placeholder-shown) untuk menghindari pemilihan input tanpa konten.

input[type=email]:not(:placeholder-shown):invalid {
  color: red;
  outline-color: red;
}

Coba berbagai cara untuk menandai input dengan nilai yang tidak valid.

Gunakan JavaScript jika diperlukan

Aktifkan/nonaktifkan tampilan sandi

Anda harus menambahkan tombol Tampilkan sandi untuk memungkinkan pengguna memeriksa teks yang telah dimasukkan. Gangguan kegunaan saat pengguna tidak dapat melihat teks yang mereka masukkan. Saat ini, belum ada cara bawaan untuk melakukan hal ini, meskipun ada rencana untuk implementasi. Sebagai gantinya, Anda harus menggunakan JavaScript.

Kode berikut menggunakan tombol teks untuk menambahkan fungsi Tampilkan sandi.

HTML:

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="current-password" required>
</section>

Inilah CSS untuk membuat tombol terlihat seperti teks biasa:

button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  /* Media query isn't shown here. */
  font-size: var(--mobile-font-size);
  font-weight: 300;
  padding: 0;
  /* Display at the top right of the container */
  position: absolute;
  top: 0;
  right: 0;
}

Dan JavaScript untuk menampilkan sandi:

const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');

togglePasswordButton.addEventListener('click', togglePassword);

function togglePassword() {
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    togglePasswordButton.textContent = 'Hide password';
    togglePasswordButton.setAttribute('aria-label',
      'Hide password.');
  } else {
    passwordInput.type = 'password';
    togglePasswordButton.textContent = 'Show password';
    togglePasswordButton.setAttribute('aria-label',
      'Show password as plain text. ' +
      'Warning: this will display your password on the screen.');
  }
}

Berikut hasil akhirnya:

Buat input sandi mudah diakses

Gunakan aria-describedby untuk menguraikan aturan sandi dengan memberinya ID elemen yang menjelaskan batasan. {i>Screen reader<i} menyediakan teks label, jenis input (sandi), dan kemudian deskripsi.

<input type="password" aria-describedby="password-constraints" …>
<div id="password-constraints">Eight or more characters with a mix of letters, numbers and symbols.</div>

Saat menambahkan fungsi Tampilkan sandi, pastikan Anda menyertakan aria-label untuk memperingatkan bahwa sandi akan ditampilkan. Jika tidak, pengguna dapat secara tidak sengaja mengungkapkan sandi.

<button id="toggle-password"
        aria-label="Show password as plain text.
                    Warning: this will display your password on the screen.">
  Show password
</button>

Anda dapat melihat cara kerja kedua fitur ARIA di Glitch berikut:

Membuat Formulir yang Dapat Diakses memiliki tips lainnya untuk membantu membuat formulir mudah diakses.

Memvalidasi secara real time dan sebelum pengiriman

Elemen dan atribut formulir HTML memiliki fitur bawaan untuk validasi dasar, tetapi Anda juga harus menggunakan JavaScript untuk melakukan validasi yang lebih andal saat pengguna memasukkan data dan saat mereka mencoba mengirimkan formulir.

Langkah 5 dari codelab formulir login menggunakan Constraint Validation API (yang didukung secara luas) untuk menambahkan validasi kustom menggunakan UI browser bawaan untuk menetapkan fokus dan menampilkan perintah.

Cari tahu lebih lanjut: Gunakan JavaScript untuk validasi real-time yang lebih kompleks.

Analisis dan RUM

"Hal yang tidak dapat Anda ukur, Anda tidak dapat meningkatkannya" terutama berlaku untuk formulir pendaftaran dan login. Anda harus menetapkan sasaran, mengukur keberhasilan, meningkatkan kualitas situs, dan melakukan pengulangan.

Pengujian kegunaan diskon dapat berguna untuk mencoba perubahan, tetapi Anda memerlukan data di dunia nyata untuk benar-benar memahami cara pengguna menggunakan formulir pendaftaran dan login Anda:

• Analisis halaman: kunjungan halaman pendaftaran dan login, rasio pantulan, dan keluar.
• Analisis interaksi: funnel sasaran (di mana pengguna meninggalkan alur login atau login?) dan peristiwa (tindakan apa yang dilakukan pengguna saat berinteraksi dengan formulir Anda?)
• Performa situs: metrik yang berfokus pada pengguna (apakah formulir pendaftaran dan login Anda lambat karena alasan tertentu dan, jika ya, apa penyebabnya?).

Anda juga dapat mempertimbangkan untuk menerapkan pengujian A/B untuk mencoba berbagai pendekatan untuk pendaftaran dan login, serta peluncuran bertahap untuk memvalidasi perubahan pada sebagian pengguna sebelum merilis perubahan ke semua pengguna.

Pedoman umum

UI dan UX yang didesain dengan baik dapat mengurangi pengabaian formulir login:

• Jangan buat pengguna mencari-cari login! Letakkan link ke formulir login di bagian atas halaman, menggunakan kata-kata yang mudah dipahami seperti Login, Buat Akun, atau Daftar.
• Tetap fokus! Formulir pendaftaran bukanlah tempat untuk mengalihkan perhatian orang dengan penawaran dan fitur situs lainnya.
• Meminimalkan kerumitan pendaftaran. Kumpulkan data pengguna lainnya (seperti alamat atau detail kartu kredit) hanya saat pengguna melihat manfaat yang jelas dari penyediaan data tersebut.
• Sebelum pengguna memulai formulir pendaftaran, jelaskan apa itu proposisi nilai. Apa manfaat login bagi mereka? Berikan insentif konkret kepada pengguna untuk menyelesaikan pendaftaran.
• Jika memungkinkan, izinkan pengguna untuk mengidentifikasi diri mereka dengan nomor ponsel, bukan alamat email, karena beberapa pengguna mungkin tidak menggunakan email.
• Permudah pengguna untuk mereset sandi mereka, dan perjelas link Lupa sandi?.
• Link ke dokumen persyaratan layanan dan kebijakan privasi Anda: jelaskan kepada pengguna sejak awal tentang cara Anda mengamankan data mereka.
• Sertakan logo dan nama perusahaan atau organisasi Anda pada halaman pendaftaran dan login, serta pastikan bahasa, font, dan gaya cocok dengan bagian lainnya di situs Anda. Beberapa formulir tidak terasa seperti berada di situs yang sama dengan konten lainnya, terutama jika memiliki URL yang sangat berbeda.

Terus belajar

• Buat Formulir yang Mengagumkan
• Praktik Terbaik untuk Desain Formulir Seluler
• Kontrol formulir yang lebih mumpuni
• Membuat Formulir yang Dapat Diakses
• Menyederhanakan Alur Login Menggunakan Credential Management API
• Memverifikasi nomor telepon di web dengan WebOTP API

Foto oleh Meghan Schiereck di Unsplash.