Codelab praktik terbaik formulir pendaftaran

Sam Dutton

Pelajari cara membuat formulir pendaftaran yang aman, mudah diakses, dan lebih mudah digunakan. Formulir akhir tersedia di CodePen.

1. Menggunakan HTML yang bermakna

Pelajari cara menggunakan elemen formulir untuk mengoptimalkan fitur browser bawaan.

  1. Buat Pen baru.

  2. Salin dan tempel kode berikut ke dalam Editor HTML.

    <form action="#" method="post">
  <h1>Sign up</h1>

  <section>
    <label>Full name</label>
    <input>
  </section>

  <section>
    <label>Email</label>
    <input>
  </section>

  <section>
    <label>Password</label>
    <input>
  </section>

  <button id="sign-up">Sign up</button>
</form>

  3. Klik pratinjau langsung untuk melihat formulir HTML. Ada input untuk nama, email, dan sandi. Formulir ini hanya menggunakan CSS browser default.

Setiap input berada di bagian dan masing-masing memiliki label. Tombol pendaftaran, yang penting, adalah <button>. Nanti dalam codelab ini, Anda akan mempelajari kemampuan khusus semua elemen ini.

Tanyakan pada diri Anda pertanyaan-pertanyaan berikut:

  • Apakah gaya default terlihat OK? Apa yang akan Anda ubah agar formulir terlihat lebih baik?
  • Apakah gaya default berfungsi dengan baik? Masalah apa yang mungkin terjadi saat menggunakan formulir Anda seperti adanya? Bagaimana dengan perangkat seluler? Bagaimana dengan pembaca layar atau teknologi pendukung lainnya?
  • Siapa pengguna Anda, dan perangkat serta browser apa yang Anda targetkan?

Menguji formulir

Anda dapat memperoleh banyak hardware dan menyiapkan lab perangkat, tetapi ada cara yang lebih murah dan sederhana untuk mencoba formulir Anda di berbagai browser, platform, dan perangkat:

Buka tampilan live CodePen Anda, atau buka tampilan live kami. Coba formulir Anda di berbagai perangkat menggunakan Mode Perangkat Chrome DevTools.

Sekarang buka formulir di ponsel atau perangkat sungguhan lainnya. Apa perbedaan yang Anda lihat?

2. Tambahkan CSS untuk membuat formulir berfungsi lebih baik

Sejauh ini tidak ada yang salah dengan HTML, tetapi Anda harus memastikan formulir Anda berfungsi dengan baik untuk berbagai pengguna di perangkat seluler dan desktop.

Pada langkah ini, Anda akan menambahkan CSS untuk mempermudah penggunaan formulir. Salin dan tempel CSS ini ke dalam file css/main.css.

Klik pratinjau untuk melihat formulir pendaftaran yang telah diberi gaya.

Apakah CSS ini berfungsi untuk berbagai browser dan ukuran layar?

  • Coba sesuaikan padding, margin, dan font-size agar sesuai dengan perangkat pengujian Anda.
  • CSS-nya memprioritaskan situs seluler. Gunakan kueri media untuk menerapkan aturan CSS untuk area pandang yang lebarnya minimal 400px, dan kemudian lagi untuk area pandang yang lebarnya minimal 500px. Apakah titik henti sementara ini sudah memadai? Bagaimana cara memilih titik henti sementara untuk formulir?

3. Menambahkan atribut untuk membantu pengguna memasukkan data

Tambahkan atribut ke elemen input Anda agar browser dapat menyimpan dan mengisi otomatis nilai kolom formulir, serta memperingatkan kolom dengan data yang tidak ada atau tidak valid.

Perbarui HTML Anda sehingga kode formulir terlihat seperti berikut:

<form action="#" method="post">

  <h1>Sign up</h1>

  <section>
    <label for="name">Full name</label>
    <input id="name" name="name" autocomplete="name"
    pattern="[\p{L}\.\- ]+" required>
  </section>

  <section>
    <label for="email">Email</label>
    <input id="email" name="email" autocomplete="username"
    type="email" required>
  </section>

  <section>
    <label for="password">Password</label>
    <input id="password" name="password" autocomplete="new-password"
    type="password" minlength="8" required>
  </section>

  <button id="sign-up">Sign up</button>
</form>

Nilai type melakukan banyak hal:

  • type="password" menyamarkan teks saat dimasukkan dan memungkinkan pengelola sandi browser menyarankan sandi kuat.
  • type="email" memberikan validasi dasar dan memastikan pengguna seluler mendapatkan keyboard yang sesuai.

Di pratinjau, klik label Email. Apa yang terjadi? Fokus berpindah ke input email karena label memiliki nilai for yang cocok dengan id input email. Label dan input lainnya berfungsi dengan cara yang sama. Pembaca layar juga mengucapkan teks label saat label (atau input terkait label) mendapatkan fokus.

Coba kirimkan formulir dengan kolom kosong. Browser tidak akan mengirimkan formulir, dan akan meminta untuk melengkapi data yang belum diisi dan menetapkan fokus. Hal ini karena kita menambahkan atribut require ke semua input.

Sekarang coba kirimkan dengan sandi yang kurang dari delapan karakter. Browser memperingatkan bahwa sandi tidak cukup panjang dan menetapkan fokus pada input sandi karena atribut minlength="8". Hal yang sama berlaku untuk pattern (digunakan untuk input nama) dan batasan validasi lainnya. Browser melakukan semua ini secara otomatis, tanpa memerlukan kode tambahan.

Menggunakan nilai autocomplete name untuk input Nama lengkap masuk akal, tetapi bagaimana dengan input lainnya?

  • autocomplete="username" untuk input Email berarti pengelola sandi browser akan menyimpan alamat email sebagai 'nama' untuk pengguna ini (nama pengguna!) bersama dengan sandi.
  • autocomplete="new-password" untuk Password adalah petunjuk bagi pengelola sandi bahwa pengelola sandi harus menawarkan untuk menyimpan nilai ini sebagai sandi untuk situs saat ini. Anda kemudian dapat menggunakan autocomplete="current-password" untuk mengaktifkan pengisian otomatis di formulir login. Ingat, ini adalah formulir pendaftaran.

4. Membantu pengguna memasukkan sandi yang aman

Apakah Anda melihat ada yang salah dengan input sandi? Ada dua masalah:

  • Tidak ada cara untuk mengetahui apakah ada batasan pada nilai sandi.
  • Anda tidak dapat melihat sandi untuk memeriksa apakah Anda memasukkannya dengan benar.

Jangan membuat pengguna menebak. Perbarui bagian sandi index.html dengan kode berikut:

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button"
  aria-label="Show password as plain text. Warning: this displays your password on the screen.">
  Show password</button>
  <input id="password" name="password" type="password" minlength="8"
  autocomplete="new-password" aria-describedby="password-constraints" required>
  <div id="password-constraints">Eight or more characters.</div>
</section>

Hal ini menambahkan fitur baru untuk membantu pengguna memasukkan sandi:

  • Tombol (sebenarnya hanya teks) untuk mengalihkan tampilan sandi. (Fungsi tombol akan ditambahkan dengan JavaScript.)
  • Atribut aria-label untuk tombol pengalih sandi.
  • Atribut aria-describedby untuk input sandi. Pembaca layar membaca teks label, jenis input (sandi), lalu deskripsi.

Untuk mengaktifkan tombol ganti sandi dan menampilkan informasi kepada pengguna tentang batasan sandi, salin JavaScript, lalu tempelkan ke editor JavaScript.

  • Apakah ikon lebih baik daripada teks untuk mengaktifkan/menonaktifkan tampilan sandi? Coba Pengujian Kegunaan Diskon dengan sekelompok kecil teman atau kolega.

  • Untuk merasakan cara kerja pembaca layar dengan formulir, instal ekstensi ChromeVox dan jelajahi formulir. Dapatkah Anda mengisi formulir hanya menggunakan ChromeVox? Jika tidak, apa yang akan Anda ubah?

Lanjutkan

Codelab ini tidak mencakup beberapa fitur penting:

  • Memeriksa sandi yang telah dibobol. Anda tidak boleh mengizinkan sandi yang telah dibobol. Anda dapat (dan sebaiknya) menggunakan layanan pemeriksaan sandi untuk mendeteksi sandi yang telah dibobol.

  • Tautkan ke dokumen Persyaratan Layanan dan kebijakan privasi Anda. Jelaskan kepada pengguna cara Anda melindungi data mereka.

  • Perbarui gaya dan merek formulir Anda untuk memastikan formulir tersebut cocok dengan bagian lain situs Anda. Hal ini membantu pengguna merasa nyaman bahwa mereka berada di tempat yang tepat saat memasukkan nama dan alamat, terutama saat melakukan pembayaran.

  • Tambahkan analytics dan Real User Monitoring. Aktifkan performa dan kegunaan desain formulir Anda untuk diuji dan dipantau oleh pengguna nyata.