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 kegunaan khusus semua elemen ini.
<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. Ini menunjukkan tampilan formulir tanpa CSS selain gaya browser default.
- Apakah gaya default terlihat bagus? Apa yang ingin Anda ubah agar formulir terlihat lebih baik?
- Apakah gaya default berfungsi? Masalah apa yang mungkin ditemui saat menggunakan formulir Anda? Apa di perangkat seluler? Bagaimana dengan pembaca layar atau teknologi pendukung lainnya?
- Siapa pengguna Anda, serta perangkat dan browser apa yang Anda targetkan?
Menguji formulir Anda
Anda bisa memperoleh banyak perangkat keras dan menyiapkan device lab, tetapi ada cara yang lebih murah dan sederhana untuk mencoba formulir Anda di berbagai browser, platform, dan perangkat:
- Menggunakan Mode Perangkat Chrome DevTools untuk melakukan simulasi perangkat seluler.
- Kirim URL dari komputer ke ponsel Anda.
- Gunakan layanan seperti BrowserStack untuk melakukan pengujian pada rentang perangkat dan browser.
- Cobalah formulirnya menggunakan alat pembaca layar seperti ekstensi Chrome ChromeVox.
Klik Lihat Aplikasi untuk melihat pratinjau formulir pendaftaran.
- Coba formulir Anda di perangkat lain menggunakan Mode Perangkat Chrome DevTools.
- Sekarang buka formulir di ponsel atau perangkat sebenarnya lainnya. Perbedaan apa yang Anda lihat?
Langkah 2: Tambahkan CSS untuk membuat 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 rentang pengguna di perangkat seluler dan {i>desktop<i}.
Pada langkah ini, Anda akan menambahkan CSS agar formulir lebih mudah digunakan.
Salin dan tempel semua CSS berikut ke file css/main.css
:
Klik Lihat Aplikasi untuk melihat formulir pendaftaran yang telah disesuaikan dengan gaya Anda. Lalu, klik View Source untuk kembali ke
css/main.css
.
Apakah CSS ini berfungsi untuk berbagai browser dan ukuran layar?
Coba sesuaikan
padding
,margin
, danfont-size
agar sesuai dengan perangkat pengujian Anda.CSS-nya mengutamakan perangkat seluler. Kueri media digunakan untuk menerapkan aturan CSS untuk area pandang yang lebarnya minimal
400px
, lalu sekali lagi untuk area pandang yang lebarnya minimal500px
. Apakah titik henti sementara memadai? Bagaimana seharusnya Anda memilih titik henti sementara untuk formulir?
Langkah 3: Tambahkan atribut untuk membantu pengguna memasukkan data
Pada langkah ini, Anda akan menambahkan atribut ke elemen input agar browser dapat menyimpan dan mengisi otomatis nilai {i>field<i} formulir, dan memberikan peringatan untuk {i>field<i} dengan data yang hilang 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"
mengaburkan teks saat dimasukkan dan mengaktifkan metode
pengelola sandi untuk menyarankan sandi yang kuat.
* type="email"
memberikan validasi dasar dan memastikan pengguna seluler mendapatkan keyboard yang sesuai. Coba
keluar!
Klik Lihat Aplikasi, lalu klik label Email. Apa yang terjadi? Fokus akan berpindah ke email
input karena label memiliki nilai for
yang cocok dengan id
input email. Label lainnya dan
{i>input<i} bekerja dengan
cara yang sama. Pembaca layar juga mengucapkan teks label
ketika label (atau teks label
yang terkait) menjadi fokus. Anda dapat mencobanya menggunakan ekstensi ChromeVox.
Coba kirimkan formulir dengan kolom kosong. Browser tidak akan mengirimkan
formulir, dan browser meminta untuk
untuk melengkapi data yang hilang
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 menyetel fokus pada input sandi karena minlength="8"
. Hal yang sama berlaku untuk pattern
(digunakan untuk input nama) dan grup lainnya
batasan validasi.
Browser melakukan semua ini secara otomatis, tanpa memerlukan kode tambahan.
Menggunakan nilai autocomplete
name
untuk input Nama lengkap dapat digunakan, tetapi bagaimana dengan
input lainnya?
* autocomplete="username"
untuk input Email berarti pengelola sandi browser akan menyimpan
gunakan alamat email sebagai 'nama' untuk pengguna ini (nama pengguna) untuk
digunakan dengan sandi.
* autocomplete="new-password"
untuk Password adalah petunjuk bagi pengelola sandi agar
menawarkan untuk menyimpan nilai ini
sebagai {i>password<i} untuk situs saat ini. Anda kemudian dapat menggunakan
autocomplete="current-password"
untuk mengaktifkan isi otomatis di formulir login (ingat, ini adalah
formulir pendaftaran).
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 kendala pada nilai sandi. * Anda tidak dapat melihat sandi untuk memeriksa apakah sandi Anda benar.
Jangan membuat pengguna menebak-nebak!
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 beralih tampilan sandi. ( fungsi tombol ini akan ditambahkan dengan JavaScript.)
- Atribut
aria-label
untuk tombol beralih sandi. - Atribut
aria-describedby
untuk input sandi. Pembaca layar membaca teks label, tipe input ({i>password<i}), dan kemudian deskripsi.
Untuk mengaktifkan tombol beralih 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 digunakan dari langkah 2. Lihatlah, untuk mengetahui bagaimana tombol beralih {i>password<i} diberi gaya dan diposisikan.)
Apakah ikon akan berfungsi lebih baik daripada teks untuk aktifkan/nonaktifkan 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 jauh
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 menemukan sandi yang telah dibobol. Anda dapat menggunakan layanan yang ada atau menjalankannya sendiri di server Anda sendiri. Cobalah! Tambahkan sandi memeriksa formulir Anda.
Link ke dokumen Persyaratan Layanan dan kebijakan privasi: jelaskan kepada pengguna bagaimana Anda melindungi data mereka.
Gaya dan branding: pastikan keduanya cocok dengan elemen lain di situs Anda. Saat memasukkan nama dan alamat dan melakukan pembayaran, pengguna harus merasa nyaman, percaya bahwa mereka tetap berada di tempat yang tepat.
Pemantauan Analisis dan Pengguna Nyata: memungkinkan performa dan kegunaan desain formulir Anda untuk diuji dan dipantau untuk pengguna sungguhan.