Menggunakan fitur browser lintas platform untuk membuat formulir login

Sam Dutton

Codelab ini mengajarkan cara membuat formulir login yang aman, mudah diakses, dan mudah digunakan.

1. Gunakan HTML yang bermakna

Gunakan elemen-elemen berikut yang dibuat untuk pekerjaan:

  • <form>
  • <section>
  • <label>
  • <button>

Seperti yang Anda lihat, elemen ini mengaktifkan fungsionalitas browser bawaan, meningkatkan aksesibilitas, dan menambah makna pada markup Anda.

  1. Klik Remix untuk mengedit agar project dapat diedit.

  2. Tambahkan kode berikut ke elemen <body>:

    <form action="#" method="post">
  <h1>Sign in</h1>
  <section>
    <label>Email</label>
    <input>
  </section>
  <section>
    <label>Password</label>
    <input>
  </section>
  <button>Sign in</button>
</form>

    Berikut adalah tampilan file index.html Anda pada titik ini:

  3. Klik Lihat Aplikasi untuk melihat pratinjau formulir login. HTML yang Anda tambahkan valid dan benar, tetapi gaya visual default browser membuatnya terlihat buruk dan sulit digunakan, terutama pada perangkat seluler.

  4. Klik Lihat Sumber untuk kembali ke kode sumber Anda.

2. Desain untuk jari dan ibu jari

Sesuaikan padding, margin, dan ukuran font untuk memastikan input Anda berfungsi dengan baik di perangkat seluler.

  1. Salin CSS berikut dan tempelkan ke file style.css Anda:

  2. Klik Lihat Aplikasi untuk melihat gaya formulir login yang baru.

  3. Klik View Source untuk kembali ke file style.css Anda.

Terlalu banyak kode! Hal utama yang harus diperhatikan adalah perubahan ukuran:

  • padding dan margin ditambahkan ke input.
  • font-size berbeda untuk perangkat seluler dan desktop.

Pemilih :invalid digunakan untuk menunjukkan saat input memiliki nilai yang tidak valid. Fitur ini belum berfungsi.

Tata letak CSS mengutamakan perangkat seluler:

  • CSS default ditujukan untuk area pandang dengan lebar kurang dari 450 piksel.
  • Bagian kueri media menyetel penggantian untuk area pandang yang lebarnya minimal 450 piksel.

Saat mem-build formulir Anda sendiri seperti ini, pada tahap ini sangat penting untuk menguji kode Anda pada perangkat sebenarnya di desktop dan perangkat seluler:

  • Apakah teks input dan label dapat dibaca, terutama bagi pengguna dengan gangguan penglihatan?
  • Apakah input dan tombol Login cukup besar untuk digunakan sebagai target sentuh untuk ibu jari?

3. Menambahkan atribut input untuk mengaktifkan fitur browser bawaan

Aktifkan browser untuk menyimpan dan mengisi otomatis nilai input, serta memberikan akses ke fitur pengelolaan sandi bawaan.

  1. Tambahkan atribut ke HTML formulir Anda sehingga terlihat seperti ini:

    <form action="#" method="post">
  <h1>Sign in</h1>
  <section>        
    <label for="email">Email</label>
    <input id="email" name="email" type="email" autocomplete="username" required autofocus>
  </section>
  <section>        
    <label for="password">Password</label>
    <input id="password" name="password" type="password" autocomplete="current-password" required>
  </section>
  <button id="sign-in">Sign in</button>
</form>

  2. Lihat aplikasi Anda lagi, lalu klik Email.

    Perhatikan bagaimana fokus berpindah ke input email. Hal ini karena label dikaitkan dengan input melalui atribut for="email". Pembaca layar juga memberitahukan teks label saat label atau input terkait label menjadi fokus.

  3. Fokuskan input email di perangkat seluler.

    Perhatikan bagaimana keyboard dioptimalkan untuk mengetik alamat email. Misalnya, karakter @ dan . dapat ditampilkan di keyboard utama, dan sistem operasi mungkin menampilkan email yang disimpan di atas keyboard. Semua ini terjadi karena atribut type="email" diterapkan ke elemen <input>.

    Keyboard email default di iOS.

  4. Ketik beberapa teks ke dalam input sandi.

    Teks disembunyikan secara default karena atribut type="password" telah diterapkan ke elemen.

  • Atribut autocomplete, name, id, dan type membantu browser memahami peran input untuk menyimpan data yang dapat digunakan nanti untuk isi otomatis.
  1. Fokuskan input email di perangkat desktop dan ketik beberapa teks. Anda dapat melihat URL aplikasi saat mengklik Layar Penuh Ikon Layar Penuh. Jika Anda menyimpan alamat email di browser, Anda mungkin melihat dialog yang memungkinkan Anda memilih dari email yang disimpan tersebut. Hal ini terjadi karena atribut autocomplete="username" diterapkan ke input email.
  • autocomplete="username" dan autocomplete="current-password" membantu browser menggunakan nilai tersimpan untuk mengisi otomatis input.

Browser yang berbeda menggunakan teknik yang berbeda untuk memahami peran input formulir dan menyediakan fitur isi otomatis untuk berbagai situs yang berbeda.

Tambahkan dan hapus atribut untuk mencobanya sendiri.

Sangat penting untuk menguji perilaku di seluruh platform. Anda harus memasukkan nilai dan mengirimkan formulir melalui browser dan perangkat lain. Sangat mudah untuk menguji berbagai platform dengan BrowserStack, yang gratis untuk project open source. Cobalah!

Berikut adalah tampilan file index.html Anda pada titik ini:

4. Menambahkan UI untuk beralih tampilan sandi

Pakar kegunaan sangat merekomendasikan penambahan ikon atau tombol yang memungkinkan pengguna melihat teks yang mereka masukkan di kolom Password. Tidak ada cara bawaan untuk melakukan hal ini, jadi Anda harus menerapkannya sendiri dengan JavaScript.

Kode untuk menambahkan fungsi ini cukup mudah. Contoh ini menggunakan teks, bukan ikon.

Perbarui file index.html, style.css, dan script.js sebagai berikut.

  1. Tambahkan tombol ke bagian sandi di file index.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>

  2. Tambahkan CSS berikut ke bagian bawah file style.css:

    button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 300;
  padding: 0;
  position: absolute;
  top: -4px;
  right: -2px;
}

    Tindakan ini membuat tombol Tampilkan sandi terlihat seperti teks biasa dan menampilkannya di pojok kanan atas bagian sandi.

  3. Tambahkan JavaScript berikut ke file script.js untuk mengalihkan tampilan sandi dan menyetel aria-label yang sesuai:

    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.');
  }
}

  4. Coba tampilkan logika sandi sekarang.

    1. Lihat aplikasi Anda.

    2. Masukkan teks di kolom sandi.

    3. Klik Tampilkan sandi.

  5. Ulangi langkah keempat pada beberapa browser di sistem operasi yang berbeda.

Pikirkan tentang desain UX: apakah pengguna akan melihat Tampilkan sandi dan memahaminya? Apakah ada cara yang lebih baik untuk menyediakan fungsi ini? Inilah saat yang tepat untuk mencoba pengujian kegunaan diskon dengan sekelompok kecil teman atau kolega.

Untuk memahami cara kerja fungsi ini bagi pembaca layar, instal Ekstensi ChromeVox Klasik dan buka formulir. Apakah nilai aria-label berfungsi sebagaimana mestinya?

Beberapa situs, seperti Gmail, menggunakan ikon, bukan teks, untuk mengaktifkan/menonaktifkan tampilan sandi. Setelah selesai menggunakan codelab ini, terapkan ini dengan gambar SVG. Desain Material menawarkan ikon berkualitas tinggi yang dapat Anda download secara gratis.

Berikut adalah tampilan kode Anda pada tahap ini:

5. Tambahkan validasi formulir

Anda dapat membantu pengguna memasukkan data dengan benar jika mengizinkan mereka memvalidasi data sebelum pengiriman formulir dan menunjukkan hal yang perlu diubah.

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

Langkah ini menggunakan Constraint Validation API (yang didukung secara luas) untuk menambahkan validasi kustom dengan UI browser bawaan yang menetapkan fokus dan menampilkan perintah.

Beri tahu pengguna batasan sandi dan input lainnya. Jangan membuat mereka menebak-nebak!

  1. Perbarui bagian sandi dari file index.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" aria-describedby="password-constraints" required>
  <div id="password-constraints">At least eight characters, with at least one lowercase and one uppercase letter.</div>
</section>

Langkah ini menambahkan dua fitur baru:

  • Informasi tentang batasan sandi
  • Atribut aria-describedby untuk input sandi (Pembaca layar membaca teks label, jenis input (sandi), lalu deskripsi.)

  1. Tambahkan CSS berikut ke bagian bawah file style.css:

    div#password-constraints {
  margin: 5px 0 0 0;
  font-size: 16px;
}

  2. Tambahkan JavaScript berikut ke file script.js:

    passwordInput.addEventListener('input', resetCustomValidity); 
function resetCustomValidity() {
  passwordInput.setCustomValidity('');
}

// A production site would use more stringent password testing. 
function validatePassword() {
  let message= '';
  if (!/.{8,}/.test(passwordInput.value)) {
    message = 'At least eight characters. ';
  }
  if (!/.*[A-Z].*/.test(passwordInput.value)) {
    message += 'At least one uppercase letter. ';
  }
  if (!/.*[a-z].*/.test(passwordInput.value)) {
    message += 'At least one lowercase letter.';
  }
  passwordInput.setCustomValidity(message);
}

const form = document.querySelector('form');
const signinButton = document.querySelector('button#sign-in');

form.addEventListener('submit', handleFormSubmission);                       

function handleFormSubmission(event) {
  event.preventDefault();
  validatePassword();
  form.reportValidity();
  if (form.checkValidity() === false) {
  } else {
    // On a production site do form submission.
    alert('Logging in!')
    signinButton.disabled = 'true';
  }
}

  3. Cobalah!

    Semua browser terbaru memiliki fitur bawaan untuk validasi formulir dan mendukung validasi dengan JavaScript.

    1. Masukkan alamat email yang tidak valid, lalu klik Login. Browser akan menampilkan peringatan—tidak memerlukan JavaScript!

    2. Masukkan alamat email yang valid, lalu klik Login tanpa nilai sandi. Browser akan memperingatkan bahwa Anda melewatkan nilai yang diperlukan dan menetapkan fokus pada input sandi.

    3. Masukkan sandi yang tidak valid, lalu klik Login. Sekarang Anda akan melihat berbagai pesan, bergantung pada apa yang salah.

  4. Coba berbagai cara untuk membantu pengguna memasukkan alamat email dan sandi. Kolom formulir sandi yang lebih baik menawarkan beberapa saran cerdas.

    Berikut adalah tampilan kode Anda pada tahap ini:

Melangkah lebih jauh

Fitur tersebut tidak ditampilkan dalam codelab ini, tetapi Anda masih memerlukan empat fitur formulir login yang penting ini:

  • Tambahkan Lupa sandi?, sebuah tombol yang memudahkan pengguna mereset sandi mereka.

  • Tautkan ke dokumen persyaratan layanan dan kebijakan privasi Anda sehingga pengguna tahu cara Anda mengamankan data mereka.

  • Pertimbangkan gaya dan {i>branding<i}, serta pastikan fitur tambahan ini cocok dengan bagian situs web Anda yang lain.

  • Tambahkan Analytics dan RUM agar Anda dapat menguji dan memantau performa dan kegunaan desain formulir.