Oturum açma formu oluşturmak için platformlar arası tarayıcı özelliklerini kullanma

Kişi adı

Bu codelab'de güvenli, erişilebilir ve kullanımı kolay bir oturum açma formunun nasıl oluşturulacağını öğrenebilirsiniz.

1. Anlamlı HTML kullanın

İşiniz için oluşturulan şu öğeleri kullanın:

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

Göreceğiniz gibi bu öğeler yerleşik tarayıcı işlevselliğini etkinleştirir, erişilebilirliği iyileştirir ve işaretlemenize anlam katar.

  1. Projeyi düzenlenebilir hale getirmek için Düzenle'yi tıklayın.

  2. Aşağıdaki kodu <body> öğesine ekleyin:

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

    Bu noktada index.html dosyanız aşağıdaki gibi görünmelidir:

  3. Oturum açma formunuzu önizlemek için Uygulamayı Görüntüle'yi tıklayın. Eklediğiniz HTML geçerli ve doğru, ancak varsayılan tarayıcı stili, özellikle mobil cihazlarda çok kötü görünmesine ve kullanımının zor olmasına yol açıyor.

  4. Kaynak kodunuza dönmek için Kaynağı Görüntüle'yi tıklayın.

2. Parmaklar ve başparmaklar için tasarım yapın

Girişlerinizin mobil cihazlarda iyi çalışmasını sağlamak için dolguyu, kenar boşluklarını ve yazı tipi boyutlarını ayarlayın.

  1. Aşağıdaki CSS'yi kopyalayıp style.css dosyanıza yapıştırın:

  2. Yeni stilize edilmiş oturum açma formunuzu görmek için Uygulamayı Görüntüle'yi tıklayın.

  3. style.css dosyanıza dönmek için Kaynağı Görüntüle'yi tıklayın.

Çok fazla kod var. Dikkat edilmesi gereken temel noktalar boyutlardaki değişikliklerdir:

  • padding ve margin girişlere eklenir.
  • font-size, mobil ve masaüstü için farklıdır.

:invalid seçici, bir giriş geçersiz bir değere sahip olduğunda bunu göstermek için kullanılır. Bu özellik henüz kullanılamıyor.

CSS düzeni mobil cihazlara öncelik verir:

  • Varsayılan CSS, genişliği 450 pikselden daha az olan görüntü alanları içindir.
  • Medya sorgusu bölümü, en az 450 piksel genişliğindeki görüntü alanları için geçersiz kılmaları ayarlar.

Kendi formunuzu oluştururken bu noktada kodunuzu masaüstü ve mobil cihazlarda gerçek cihazlarda test etmeniz çok önemlidir:

  • Etiket ve giriş metni, özellikle az gören kişiler için okunabilir mi?
  • Girişler ve Oturum aç düğmesi, başparmaklar için dokunma hedefi olarak kullanılacak kadar büyük mü?

3. Yerleşik tarayıcı özelliklerini etkinleştirmek için giriş özellikleri ekleyin

Tarayıcının giriş değerlerini saklayıp otomatik doldurmasını sağlayın ve yerleşik şifre yönetimi özelliklerine erişim sağlayın.

  1. Form HTML'nize aşağıdaki gibi özellikler ekleyin:

    <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. Uygulamanızı tekrar görüntüleyin ve ardından E-posta'yı tıklayın.

    Odağın e-posta girişine nasıl taşındığına dikkat edin. Bunun nedeni, etiketin for="email" özelliği aracılığıyla girişle ilişkilendirilmesidir. Ekran okuyucular, etikete veya etiketin ilişkili girişine odaklanıldığında etiket metnini duyurur.

  3. Mobil cihazda e-posta girişini odaklayın.

    Klavyenin e-posta adresi yazmak için nasıl optimize edildiğine dikkat edin. Örneğin, @ ve . karakterleri birincil klavyede gösterilebilir ve işletim sistemi, saklanan e-postaları klavyenin üzerinde gösterebilir. Tüm bunların nedeni, type="email" özelliğinin bir <input> öğesine uygulanmasıdır.

    iOS&#39;teki varsayılan e-posta klavyesi.

  4. Şifre girişine bir metin yazın.

    type="password" özelliği öğeye uygulandığından metin varsayılan olarak gizlenir.

  • autocomplete, name, id ve type özellikleri, tarayıcıların daha sonra otomatik doldurma için kullanılabilecek verileri depolamak üzere girişlerin rolünü anlamasına yardımcı olur.
  1. Bir masaüstü cihazda e-posta girişine odaklanın ve bir metin yazın. Tam ekran simgesini Tam Ekran simgesi tıkladığınızda uygulamanızın URL'sini görebilirsiniz. Tarayıcınızda depoladığınız e-posta adresleri varsa büyük olasılıkla söz konusu e-postalardan seçim yapmanızı sağlayan bir iletişim kutusu görürsünüz. Bunun nedeni, e-posta girişine autocomplete="username" özelliğinin uygulanmasıdır.
  • autocomplete="username" ve autocomplete="current-password", tarayıcıların girişleri otomatik olarak doldurmak için kayıtlı değerleri kullanmasına yardımcı olur.

Farklı tarayıcılar form girişlerinin rolünü belirlemek ve bir dizi farklı web sitesi için otomatik doldurma özelliği sağlamak üzere farklı teknikler kullanır.

Özelliği kendiniz denemek için özellik ekleyip kaldırın.

Farklı platformlardaki davranışları test etmek son derece önemlidir. Değerler girmeniz ve formu, farklı cihazlardaki farklı tarayıcılarda göndermeniz gerekir. Açık kaynak projeler için ücretsiz olan BrowserStack sayesinde çeşitli platformlarda kolayca test yapabilirsiniz. Deneyin.

Bu noktada index.html dosyanız aşağıdaki gibi görünmelidir:

4. Şifre görüntülemeyi açıp kapatmak için kullanıcı arayüzü ekleyin

Kullanılabilirlik uzmanları, kullanıcıların Şifre alanına girdikleri metni görmelerine olanak tanıyan bir simge veya düğme eklenmesini kesinlikle öneriyor. Bunu yapmanın yerleşik bir yolu yoktur. Dolayısıyla, JavaScript ile kendiniz uygulamanız gerekir.

Bu işlevi eklemek için gereken kod oldukça basittir. Bu örnekte simge değil metin kullanılmıştır.

index.html, style.css ve script.js dosyalarını aşağıdaki gibi güncelleyin.

  1. index.html dosyasındaki şifre bölümüne bir açma/kapatma düğmesi ekleyin:

    <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. style.css dosyasının en altına aşağıdaki CSS'yi ekleyin:

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

    Bu işlem, Şifreyi göster düğmesini düz metin olarak gösterir ve şifre bölümünün sağ üst köşesinde gösterir.

  3. Şifre görüntüsünü açıp kapatmak ve uygun aria-label değerini ayarlamak için script.js dosyasına aşağıdaki JavaScript'i ekleyin:

    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. Şifre gösterme mantığını hemen deneyin.

    1. Uygulamanızı görüntüleyin.

    2. Şifre alanına bir şeyler girin.

    3. Şifreyi göster'i tıklayın.

  5. Farklı işletim sistemlerindeki birden fazla tarayıcıda dördüncü adımı tekrarlayın.

Kullanıcı deneyimi tasarımını düşünün: Kullanıcılar Şifreyi göster'i fark edip anlayacak mı? Bu işlevi sağlamanın daha iyi bir yolu var mı? Bu, küçük bir arkadaş veya iş arkadaşı grubuyla indirimli kullanılabilirlik testini denemek için iyi bir andır.

Bu işlevin ekran okuyucularla nasıl çalıştığını anlamak için ChromeVox Classic Uzantısı'nı yükleyin ve formda gezinin. aria-label değerleri amaçlandığı şekilde çalışıyor mu?

Gmail gibi bazı web sitelerinde, şifre görüntülemeyi açıp kapatmak için metin yerine simgeler kullanılır. Bu codelab'i tamamladığınızda bunu SVG resimleriyle uygulayın. Materyal Tasarım, ücretsiz olarak indirebileceğiniz yüksek kaliteli simgeler sunar.

Bu noktada kodunuz aşağıdaki gibi görünmelidir:

5. Form doğrulaması ekle

Form gönderilmeden önce verilerini doğrulamalarına ve neleri değiştirmeleri gerektiğini göstermelerine izin vererek kullanıcıların verilerini doğru bir şekilde girmelerine yardımcı olabilirsiniz.

HTML form öğeleri ve özellikleri, temel doğrulama için yerleşik özelliklere sahiptir, ancak kullanıcılar veri girerken ve formu göndermeyi denediklerinde daha sağlam doğrulama yapmak için JavaScript'i de kullanmanız gerekir.

Bu adımda, odağı ayarlayan ve istemleri görüntüleyen yerleşik tarayıcı kullanıcı arayüzüyle özel doğrulama eklemek için Kısıtlama Doğrulama API'si (geniş ölçekte desteklenir) kullanılmaktadır.

Kullanıcılara şifreler ve diğer girişlerle ilgili kısıtlamaları bildirin. Kullanıcıları tahmin yürütmek zorunda bırakmayın.

  1. index.html dosyasının şifre bölümünü güncelleyin:

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

Bu güncellemeyle birlikte iki yeni özellik eklenmiştir:

  • Şifre kısıtlamaları hakkında bilgi
  • Şifre girişi için bir aria-describedby özelliği (Ekran okuyucular etiket metnini, giriş türünü (şifre) ve ardından açıklamayı okur.)

  1. style.css dosyasının en altına aşağıdaki CSS'yi ekleyin:

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

  2. script.js dosyasına aşağıdaki JavaScript'i ekleyin:

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

    Yeni tarayıcıların tümü, form doğrulama ve JavaScript ile doğrulamayı destekleyen yerleşik özelliklere sahiptir.

    1. Geçersiz bir e-posta adresi girip Oturum aç'ı tıklayın. Tarayıcı bir uyarı görüntüler. JavaScript gerekmez!

    2. Geçerli bir e-posta adresi girin, ardından şifre değeri olmadan Oturum aç'ı tıklayın. Tarayıcı, gerekli bir değeri kaçırdığınız konusunda uyarır ve odağı şifre girişine ayarlar.

    3. Geçersiz bir şifre girip Oturum aç'ı tıklayın. Artık sorunun ne olduğuna bağlı olarak farklı mesajlar görüyorsunuz.

  4. Kullanıcıların e-posta adreslerini ve şifreleri girmelerine yardımcı olmak için farklı yöntemler deneyin. Daha iyi şifre form alanları, bazı zekice öneriler sağlar.

    Bu noktada kodunuz aşağıdaki gibi görünmelidir:

Daha fazla bilgi edinin

Bu codelab'de gösterilmelerine rağmen yine de şu dört önemli oturum açma formu özelliğine ihtiyacınız vardır:

  • Kullanıcıların şifrelerini kolayca sıfırlamalarını sağlayan bir düğme olan Şifrenizi mi unuttunuz? seçeneğini ekleyin.

  • Kullanıcılarınızın verilerini nasıl koruduğunuzu bilebilmesi için hizmet şartları ve gizlilik politikası belgelerinizin bağlantılarını verin.

  • Stili ve marka bilinci oluşturmayı göz önünde bulundurun ve bu ek özelliklerin, web sitenizin geri kalanıyla eşleştiğinden emin olun.

  • Form tasarımınızın performansını ve kullanılabilirliğini test edip izleyebilmek için Analytics ve RUM'u ekleyin.