Bu sayfa, Cloud Translation API ile çevrilmiştir.

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 formu oluşturmayı öğreneceksiniz.

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şlevlerini etkinleştirir, erişilebilirliği iyileştirir ve işaretlemenize anlam katar.

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

<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 şu şekilde görünmelidir:

Oturum açma formunuzu önizlemek için Uygulamayı Görüntüle'yi tıklayın. Eklediğiniz HTML geçerli ve doğrudur ancak varsayılan tarayıcı stili, özellikle mobil cihazlarda kötü görünmesine ve kullanılmasını zorlaştırmasına neden oluyor.
Kaynak kodunuza dönmek için Kaynak Kodu Görüntüle'yi tıklayın.

2. Parmaklar ve parmaklar için tasarım

Girişlerinizin mobil cihazlarda düzgün çalıştığından emin olmak için dolgu, kenar boşlukları ve yazı tipi boyutlarını ayarlayın.

Aşağıdaki CSS'yi kopyalayıp style.css dosyanıza yapıştırın:
Yeni stilize giriş formunuzu görmek için Uygulamayı Görüntüle'yi tıklayın.
style.css dosyanıza dönmek için Kaynağı Görüntüle'yi tıklayın.

Bu oldukça 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şin geçersiz bir değere sahip olduğunu belirtmek için kullanılır. Bu henüz çalışmıyor.

CSS düzeni mobil önceliklidir:

Varsayılan CSS, 450 pikselden daha az genişlikteki 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ılma ayarları yapar.

Bu şekilde kendi formunuzu oluştururken, sürecin bu aşamasında kodunuzu masaüstü ve mobil cihazlarda gerçek cihazlarda test etmek çok önemlidir:

Etiket ve giriş metni, özellikle az gören kişiler için okunaklı mı?
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 depolayıp otomatik olarak doldurmasını sağlar ve yerleşik şifre yönetimi özelliklerine erişim sağlar.

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>

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ığını fark edin. Bunun nedeni, etiketin for="email" özelliği aracılığıyla girişle ilişkilendirilmesidir. Ekran okuyucular, etiket veya etiketin ilişkili girişi odaklandığında etiket metnini de sesli olarak okur.
E-posta girişini mobil cihazda odaklayın.

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

Öğeye type="password" özelliği uygulandığı için metin varsayılan olarak gizlenmiştir.

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.

Masaüstü cihazda e-posta girişine odaklanın ve metin yazın. Tam ekran'ı tıkladığınızda uygulamanızın URL'sini görebilirsiniz. Tarayıcınızda e-posta adresleri depoladıysanız depolanan e-postalardan 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 kayıtlı değerleri kullanmasına yardımcı olur.

Not: E-posta girişleri için autocomplete="username" kullanın. Çünkü username modern tarayıcılarda şifre yöneticileri tarafından tanındığından, type="email" kullanmanız gerekir, ayrıca id="email" ve name="email" kullanın.

Farklı tarayıcılar, form girişlerinin rolünü belirlemek ve çeşitli web siteleri için otomatik doldurma özelliği sunmak üzere farklı teknikler kullanır.

Bunu kendiniz denemek için özellikler ekleyin ve kaldırın.

Platformlardaki davranışları test etmek son derece önemlidir. Değerleri girip formu farklı cihazlardaki farklı tarayıcılarda göndermeniz gerekir. Açık kaynak projeler için ücretsiz olan BrowserStack ile çeşitli platformlarda test yapmak kolaydır. Deneyin!

index.html dosyanız bu noktada şu şekilde görünmelidir:

4. Şifre görüntülemeyi açma/kapatma için kullanıcı arayüzü ekleme

Kullanılabilirlik uzmanları, kullanıcıların Şifre alanına girdikleri metni görmelerini sağlayan bir simge veya düğme eklemeyi önemle tavsiye eder. Bunu yapmanın yerleşik bir yolu yoktur. Bu nedenle, JavaScript ile kendiniz uygulamanız gerekir.

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

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

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>

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örüntüler.

Şifre görüntülemeyi değiştirmek 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.');
  }
}

Şifre gösterme mantığını hemen deneyin.
1. Uygulamanızı görüntüleyin.
2. Şifre alanına bir metin girin.
3. Şifreyi göster'i tıklayın.
Dördüncü adımı farklı işletim sistemlerindeki birden fazla tarayıcıda tekrarlayın.

Kullanıcı deneyimi tasarımını düşünün: Kullanıcılar Şifreyi göster seçeneğini fark edecek ve 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 okuyucular için nasıl çalıştığını anlamak üzere ChromeVox Klasik Uzantısı'nı yükleyin ve formda gezinin. aria-label değerleri beklendiği gibi çalışıyor mu?

Gmail gibi bazı web siteleri, şifre ekranını açmak/kapatmak için metin yerine simgeler kullanı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 şu şekilde görünmelidir:

5. Form doğrulaması ekleme

Form göndermeden önce kullanıcıların verilerini doğrulamasına izin vererek ve neleri değiştirmeleri gerektiğini göstererek kullanıcıların verilerini doğru şekilde girmesine 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öndermeye çalışırken daha güçlü doğrulama yapmak için JavaScript'i de kullanmanız gerekir.

Bu adımda, yerleşik tarayıcı kullanıcı arayüzüyle odaklanmayı ayarlayan ve istemler gösteren özel doğrulama eklemek için Constraint Validation API (yaygın olarak desteklenir) kullanılır.

Kullanıcılara şifrelerle ve diğer girişlerle ilgili kısıtlamaları bildirin. Kullanıcıların tahmin etmesine izin vermeyin.

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

Ş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.)

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

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

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 JavaScript'in gerekli olmadığına dair bir uyarı gösterilir.
2. Geçerli bir e-posta adresi girin, ancak şifre değeri girmeden Oturum aç'ı tıklayın. Tarayıcı, gerekli bir değeri atladığınız konusunda sizi 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.
Kullanıcıların e-posta adresleri ve şifreler girmelerine yardımcı olmak için farklı yöntemler deneyin. Daha iyi şifre formu alanları, bazı akıllıca öneriler sunar.

Bu noktada kodunuz şu şekilde görünmelidir:

Daha fazla bilgi

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ı ve gizlilik politikası dokümanlarınızın bağlantılarını paylaşın.
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'u ekleyin.