Codelab praktik terbaik formulir pendaftaran

Sam Dutton

Untuk mengikuti codelab ini, buka Glitch ini di tab kedua.

Codelab ini menunjukkan cara membuat formulir pendaftaran yang aman, mudah diakses, dan mudah digunakan.

Langkah 1: Gunakan HTML yang bermakna

Pada langkah ini, Anda akan mempelajari cara menggunakan elemen formulir untuk memaksimalkan fitur browser bawaan.

• Klik Remix to Edit agar project dapat diedit.

Lihat HTML untuk formulir Anda di index.html. Anda akan melihat ada input untuk nama, email, dan sandi. Masing-masing berada dalam bagian, dan masing-masing memiliki label. Tombol Daftar adalah… <button>! Nanti dalam codelab ini, Anda akan mempelajari kemampuan khusus dari semua elemen ini.

Catatan: Elemen <input> tidak memiliki tag penutup. Hal ini karena elemen tersebut adalah elemen void (kosong): elemen tersebut tidak memiliki konten apa pun. Karakter "/" di akhir elemen void bersifat opsional: <input> atau <input /> tidak masalah.

<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>

Klik Lihat Aplikasi untuk melihat pratinjau formulir pendaftaran Anda. Tampilan ini menunjukkan tampilan formulir tanpa CSS selain gaya browser default.

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

Catatan: Gaya Default Browser mencantumkan CSS default untuk elemen HTML.

Menguji formulir

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

• Gunakan Mode Perangkat Chrome DevTools untuk menyimulasikan perangkat seluler.
• Kirim URL dari komputer ke ponsel.
• Gunakan layanan seperti BrowserStack untuk menguji di berbagai perangkat dan browser.
• Coba isi formulir menggunakan alat pembaca layar seperti ekstensi Chrome ChromeVox.

Peringatan: Pengujian situs Anda di berbagai perangkat dan browser sangat penting untuk formulir, karena masalah kecil dapat menyebabkan rasio pantulan yang tinggi dan membuat pengguna menyerah untuk membuat akun atau menyelesaikan pembelian.

Klik Lihat Aplikasi untuk melihat pratinjau formulir pendaftaran Anda.

• 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?

Langkah 2: Tambahkan CSS agar formulir berfungsi lebih baik

Klik Lihat Sumber untuk kembali ke kode sumber Anda.

Sejauh ini tidak ada yang salah dengan HTML, tetapi Anda perlu memastikan formulir 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 semua CSS berikut ke file css/main.css:

Klik Lihat Aplikasi untuk melihat formulir pendaftaran bergaya Anda. Kemudian, klik Lihat Sumber untuk kembali ke css/main.css.

• Apakah CSS ini berfungsi untuk berbagai browser dan ukuran layar?

• Coba sesuaikan padding, margin, dan font-size agar sesuai dengan perangkat pengujian Anda.

• CSS mengutamakan perangkat seluler. Kueri media digunakan untuk menerapkan aturan CSS untuk area pandang yang lebarnya minimal 400px, lalu lagi untuk area pandang yang lebarnya minimal 500px. Apakah titik henti sementara ini memadai? Bagaimana cara memilih titik henti sementara untuk formulir?

Catatan: Area pandang dalam konteks ini berarti area tampilan yang tersedia untuk halaman Anda. Ponsel memiliki area pandang yang lebih kecil daripada laptop, dan jendela browser kecil di monitor desktop memiliki area pandang yang lebih kecil daripada jendela browser yang dimaksimalkan.

Langkah 3: Tambahkan atribut untuk membantu pengguna memasukkan data

Pada langkah ini, Anda akan menambahkan atribut ke elemen input untuk memungkinkan browser menyimpan dan mengisi otomatis nilai kolom formulir, serta memperingatkan kolom dengan data yang tidak ada atau tidak valid.

Perbarui file index.html Anda sehingga kode formulir terlihat seperti ini:

<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 memiliki banyak fungsi: * type="password" menyamarkan teks saat dimasukkan dan memungkinkan pengelola sandi browser menyarankan sandi yang kuat. * type="email" memberikan validasi dasar dan memastikan pengguna seluler mendapatkan keyboard yang sesuai. Coba sekarang juga.

Klik Lihat Aplikasi, lalu 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. Anda dapat mencobanya menggunakan ekstensi ChromeVox.

Coba kirim formulir dengan kolom kosong. Browser tidak akan mengirimkan formulir, dan akan meminta untuk menyelesaikan data yang tidak ada dan menetapkan fokus. Hal ini karena Anda menambahkan atribut require ke semua input. Sekarang coba kirimkan dengan {i>password<i} yang memiliki 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 sudah masuk akal, tetapi bagaimana dengan input lainnya? * autocomplete="username" untuk input Email berarti pengelola sandi browser akan menyimpan alamat email sebagai 'nama' pengguna ini (nama pengguna) untuk dijadikan sandi. * autocomplete="new-password" untuk Password adalah petunjuk bagi pengelola sandi yang harus ditawarkan untuk menyimpan nilai ini sebagai sandi untuk situs saat ini. Kemudian, Anda dapat menggunakan autocomplete="current-password" untuk mengaktifkan isi otomatis di formulir login (ingat, ini adalah formulir pendaftaran).

Catatan: Praktik terbaik formulir login memiliki lebih banyak tips untuk meningkatkan desain, tata letak, dan aksesibilitas formulir.

Langkah 4: Bantu pengguna memasukkan sandi yang aman

Dengan formulir tersebut, apakah Anda melihat ada yang salah dengan {i>input<i} {i>password<i}?

Ada dua masalah: * Tidak ada cara untuk mengetahui apakah ada batasan pada nilai sandi. * Anda tidak dapat melihat sandi untuk memeriksa apakah Anda sudah memasukkannya dengan benar.

Jangan buat 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 will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="new-password" 
         minlength="8" aria-describedby="password-constraints" required>
  <div id="password-constraints">Eight or more characters.</div>
</section>

Tindakan ini akan 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 beralih sandi.
• Atribut aria-describedby untuk input sandi. Pembaca layar membaca teks label, jenis input (sandi), lalu deskripsi.

Untuk mengaktifkan tombol tombol sandi dan menampilkan informasi kepada pengguna tentang batasan sandi, salin semua JavaScript di bawah dan tempelkan ke file js/main.js Anda sendiri.

(CSS sudah diterapkan dari langkah 2. Lihat gaya dan posisi tombol pengalihan sandi.)

• Apakah ikon akan berfungsi lebih baik daripada teks untuk mengalihkan tampilan sandi? Coba Pengujian Kegunaan Diskon dengan sekelompok kecil teman atau kolega.

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

Berikut adalah tampilan formulir Anda pada tahap ini:

Lebih lanjut

Codelab ini tidak membahas beberapa fitur penting:

• Memeriksa sandi yang telah dibobol. Anda tidak boleh mengizinkan sandi yang telah dibobol. Anda dapat (dan harus) menggunakan layanan pemeriksaan sandi untuk mendeteksi sandi yang telah dibobol. Anda dapat menggunakan layanan yang ada atau menjalankannya sendiri di server Anda sendiri. Cobalah! Tambahkan pemeriksaan sandi ke formulir Anda.

• Link ke dokumen Persyaratan Layanan dan kebijakan privasi Anda: jelaskan kepada pengguna cara Anda melindungi data mereka.

• Gaya dan branding: pastikan keduanya cocok dengan situs Anda yang lain. Saat memasukkan nama dan alamat serta melakukan pembayaran, pengguna harus merasa nyaman, percaya bahwa mereka masih berada di tempat yang tepat.

• Analytics dan Real User Monitoring: memungkinkan performa dan kegunaan desain formulir Anda diuji dan dipantau untuk pengguna sungguhan.