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. Menggunakan HTML yang bermakna

Gunakan elemen berikut yang dibuat untuk tugas:

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

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

  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 tahap ini:

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

  4. Klik View Source untuk kembali ke kode sumber Anda.

2. Desain untuk jari dan ibu jari

Sesuaikan padding, margin, dan ukuran font untuk memastikan bahwa 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 formulir login dengan gaya baru Anda.

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

Kodenya cukup banyak! 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. Ini belum berfungsi.

Tata letak CSSnya mengutamakan seluler:

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

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

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

3. Tambahkan 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 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 mengumumkan 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 . mungkin 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 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 yang disimpan 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 di browser lain di perangkat berbeda. Pengujian sangat mudah di berbagai platform dengan BrowserStack, yang gratis untuk project open source. Cobalah!

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

4. Menambahkan UI untuk mengaktifkan/menonaktifkan tampilan sandi

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

Kode untuk menambahkan fungsi ini sangat 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;
}

    Hal 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 logika tampilkan sandi sekarang.

    1. Lihat aplikasi Anda.

    2. Masukkan teks di kolom sandi.

    3. Klik Tampilkan sandi.

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

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

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

Beberapa situs, seperti Gmail, menggunakan ikon, bukan teks, untuk beralih tampilan sandi. Setelah menyelesaikan codelab ini, terapkan 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 Anda mengizinkan mereka memvalidasi data sebelum pengiriman formulir dan menunjukkan hal yang perlu diubah.

Elemen dan atribut formulir HTML memiliki fitur bawaan untuk validasi dasar. Namun, Anda juga harus menggunakan JavaScript untuk melakukan validasi yang lebih kuat saat pengguna memasukkan data dan saat mereka 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 untuk sandi dan input lainnya. Jangan membuat mereka menebak-nebak!

  1. Perbarui bagian sandi 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>

Versi 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 dan klik Login. Browser menampilkan peringatan—JavaScript tidak diperlukan.

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

    3. Masukkan sandi yang tidak valid, lalu klik Login. Sekarang Anda melihat pesan yang berbeda tergantung 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

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

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

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

  • Pertimbangkan gaya dan branding, serta pastikan fitur tambahan ini sesuai dengan keseluruhan situs Anda.

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