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

Sam Dutton

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

1. Anlamlı HTML kullanın

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

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

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

  1. Projeyi düzenlenebilir hale getirmek için Remiks'i tıklayarak düzenleyin.

  2. <body> öğesine aşağıdaki kodu 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>

    index.html dosyanız bu noktada 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 tehlikeli ve kullanımının zor görünmesine neden oluyor.

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

2. Parmaklar ve parmaklar için tasarım

Girişlerinizin mobil cihazlarda iyi çalışmasını sağlamak için dolgu, kenar boşlukları 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! Dikkat edilmesi gereken başlıca noktalar, boyutlarda yapılan değişikliklerdir:

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

:invalid seçici, bir girişte geçersiz değer olduğunu belirtmek için kullanılır. Bu işlev henüz çalışmıyor.

CSS düzeni mobil önceliklidir:

  • Varsayılan CSS, genişliği 450 pikselden 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.

Bunun gibi kendi formunuzu oluştururken, kodunuzu masaüstü ve mobil cihazlardaki gerçek cihazlarda test etmeniz bu noktada ç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ılabilecek 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 depolamasını ve otomatik doldurmasını sağlayın, yerleşik şifre yönetimi özelliklerine erişim sağlayın.

  1. Özellikleri form HTML'nize şu şekilde 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 gönder'i 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, etiket veya etiket ile ilişkili girişe odaklanıldığında etiket metnini de duyurur.

  3. E-posta girişini mobil cihazda odaklayın.

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

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

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

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

  • autocomplete, name, id ve type özellikleri, tarayıcıların girişlerin rolünü anlamasına yardımcı olur. Böylece, daha sonra otomatik doldurma için kullanılabilen verileri depolayabilirsiniz.
  1. Masaüstü cihazda e-posta girişine odaklanın ve metin yazın. Tam ekran Tam ekran simgesi simgesini tıkladığınızda uygulamanızın URL'sini görebilirsiniz. Tarayıcınızda depoladığınız e-posta adresleri varsa muhtemelen saklanan bu e-postalar arasından seçim yapmanızı sağlayan bir iletişim kutusu görürsünüz. Bunun nedeni, autocomplete="username" özelliğinin e-posta girişine uygulanmasıdır.
  • autocomplete="username" ve autocomplete="current-password", tarayıcıların girişleri otomatik olarak doldurmak için depolanan değerleri kullanmasına yardımcı olur.

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

Bunu kendiniz denemek için özellik ekleyip kaldırın.

Platformlardaki davranışları test etmek son derece önemlidir. Değerleri girmeniz ve formu farklı cihazlarda farklı tarayıcılarda göndermeniz gerekir. Açık kaynaklı projeler için ücretsiz olan BrowserStack ile çeşitli platformlarda kolayca test yapabilirsiniz. Deneyin.

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

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

Kullanılabilirlik uzmanları, kullanıcıların Şifre alanına girdikleri metni görmelerini sağlayan bir simge veya düğmenin eklenmesini kesinlikle önerir. Bunu yapmanın yerleşik bir yolu olmadığından, bunu 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ında ş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 alt kısmı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 gibi gösterir ve şifre bölümünün sağ üst köşesinde gösterir.

  3. Şifre görünümünü açıp kapatmak ve uygun aria-label ayarını yapmak 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. Şimdi şifre gösterme mantığını deneyin.

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

    2. Şifre alanına metin girin.

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

  5. Dördüncü adımı farklı işletim sistemlerinde birden çok tarayıcıda tekrarlayın.

Kullanıcı deneyimi tasarımını düşünün: Kullanıcılar Şifreyi göster seçeneğini görüp anlayacak mı? Bu işlevi sağlamanın daha iyi bir yolu var mı? Bu, küçük bir arkadaş grubu veya iş arkadaşıyla indirimli kullanılabilirlik testlerini denemek için iyi bir zaman.

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

Gmail gibi bazı web siteleri, şifre ekranını açmak/kapatmak için metin yerine simgeler kullanır. Bu codelab'deki adımları tamamladığınızda bunu SVG resimlerle uygulayın. Materyal Tasarım, ücretsiz olarak indirebileceğiniz yüksek kaliteli simgeler sunar.

Kodunuzun bu noktada şöyle görünmesi gerekir:

5. Form doğrulaması ekleyin

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

HTML form öğeleri ve özellikleri, temel doğrulama için yerleşik özelliklere sahiptir, ancak kullanıcılar verileri girerken ve formu göndermeyi denerken daha sağlam doğrulama yapmak için JavaScript'i 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 Constraint Validation API'yi (geniş çapta desteklenmektedir) kullanır.

Kullanıcılara şifreler ve diğer girişlerle ilgili kısıtlamaları açıklayın. Onları tahmin yürütmek zorunda kalmayı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 yeniliklere iki yeni özellik eklenir:

  • Şifre kısıtlamalarıyla ilgili bilgiler
  • Ş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 alt kısmına aşağıdaki CSS'yi ekleyin:

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

  2. Aşağıdaki JavaScript'i script.js dosyasına 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.

    Son tarayıcıların tümünde form doğrulaması ve JavaScript ile doğrulama desteği için yerleşik özellikler bulunmaktadır.

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

    2. Geçerli bir e-posta adresi girin, ancak 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 şifre girişine odaklanır.

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

  4. Kullanıcıların e-posta adresi ve şifre girmelerine yardımcı olmak için farklı yöntemler deneyin. Daha iyi şifre formu alanları bazı akıllı öneriler sunar.

    Kodunuzun bu noktada şöyle görünmesi gerekir:

Daha ileri git

Bunlar codelab'de gösterilmese de şu dört önemli oturum açma formu özelliğine ihtiyacınız vardır:

  • Kullanıcıların şifrelerini sıfırlamasını kolaylaştıran Şifrenizi mi unuttunuz? düğmesini ekleyin.

  • Kullanıcılarınızın, verilerini nasıl koruduğunuzu öğrenmeleri için hizmet şartlarınıza ve gizlilik politikası dokümanlarınıza bağlantı verin.

  • Stil ve marka özelliklerini 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 verilerini ekleyin.