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 kullanma

İş için oluşturulmuş bu öğeleri kullanın:

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

Bu öğelerin, yerleşik tarayıcı işlevselliğini etkinleştirdiğini, erişilebilirliği artırdığını ve işaretlemenize anlam kattığını göreceksiniz.

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

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 ş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ğru ancak varsayılan tarayıcı stili, özellikle mobil cihazlarda HTML'nin kötü görünmesine ve zor kullanılmasına neden oluyor.
Kaynak kodunuza dönmek için Kaynağı Görüntüle'yi tıklayın.

2. Parmaklar için tasarım

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

Aşağıdaki CSS'yi kopyalayıp style.css dosyanıza yapıştırın:
Yeni stil verilmiş oturum açma 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 çok fazla kod! Dikkat edilmesi gereken başlıca noktalar, boyutlardaki değişikliklerdir:

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

:invalid seçicisi, bir girişin geçersiz değere sahip olduğunu belirtmek için kullanılır. Bu özellik henüz kullanılamı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ünüm alanları için geçersiz kılmalar ayarlar.

Bu şekilde kendi formunuzu oluştururken sürecin bu noktasında kodunuzu masaüstü ve mobil cihazlarda gerçek cihazlarla 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şparmakla dokunma hedefi olarak kullanılabilecek kadar büyük mü?

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

Tarayıcının giriş değerlerini depolamasını ve otomatik doldurmasını sağlar. Ayrıca, yerleşik şifre yönetimi özelliklerine erişim imkanı sunar.

Form HTML'nize aşağıdaki gibi görünecek şekilde ö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 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şkilendirilmiş olmasıdır. Ekran okuyucular, etiket veya etiketle ilişkili giriş odaklandığında etiket metnini de sesli okur.
Mobil cihazda e-posta girişine odaklanı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, klavyenin üzerinde saklanan e-postaları gösterebilir. Tüm bunlar, type="email" özelliği bir <input> öğesine uygulandığı için gerçekleşir.
Ş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 girişlerin rolünü anlamasına yardımcı olur. Böylece, daha sonra otomatik doldurma için kullanılabilecek veriler depolanır.

E-posta girişini masaüstü cihazda odaklayın ve biraz metin yazın. Tam ekran'ı tıkladığınızda uygulamanızın URL'sini görebilirsiniz. Tarayıcınızda e-posta adresi sakladıysanız muhtemelen saklanan e-posta adresleri arasından seçim yapmanıza olanak tanıyan bir iletişim kutusu görürsünüz. Bu durum, e-posta girişine autocomplete="username" özelliği uygulandığı için meydana gelir.

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.

Not: E-posta girişlerinde autocomplete="username" kullanın. type="email" kullanmanız gerekse de username, modern tarayıcılardaki şifre yöneticileri tarafından tanınır. Ayrıca id="email" ve name="email" kullanmak da isteyebilirsiniz.

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

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

Davranışları platformlar arasında 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!

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

4. Şifre gösterimini açıp 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üğme eklenmesini şiddetle 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 basittir. Bu örnekte simge değil, metin kullanılıyor.

index.html, style.css ve script.js dosyalarını aşağıdaki şekilde 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>

Aşağıdaki CSS'yi style.css dosyasının en altına 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üğmesinin düz metin gibi görünmesini sağlar ve şifre bölümünün sağ üst köşesinde gösterir.

Şifre görüntülemeyi etkinleştirmek/devre dışı bırakmak 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.');
  }
}

Şifreyi göster 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ı göz önünde bulundurun: 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 testi yapmanın tam 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 beklendiği gibi çalışıyor mu?

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

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

5. Form doğrulama ekleme

Kullanıcıların form göndermeden önce verilerini doğrulamasına izin vererek ve değiştirmeleri gerekenleri göstererek verilerini doğru şekilde girmelerine yardımcı olabilirsiniz.

HTML form öğeleri ve özelliklerinde temel doğrulama için yerleşik özellikler bulunur. Ancak kullanıcılar veri girerken ve formu göndermeye çalıştıklarında daha güçlü bir doğrulama yapmak için JavaScript de kullanmanız gerekir.

Bu adımda, odak ayarlayan ve istemleri görüntüleyen yerleşik tarayıcı kullanıcı arayüzü ile ö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 sınırlamaları 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ı hakkında bilgi
Şifre girişi için aria-describedby özelliği (Ekran okuyucular, etiket metnini, giriş türünü (şifre) ve ardından açıklamayı okur.)

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

Tüm yeni tarayıcılarda form doğrulama ve JavaScript ile doğrulama desteği için yerleşik özellikler bulunur.
1. Geçersiz bir e-posta adresi girip Oturum aç'ı tıklayın. Tarayıcıda uyarı gösterilir. JavaScript gerekmez.
2. Geçerli bir e-posta adresi girin ancak şifre değeri olmadan Oturum aç'ı tıklayın. Tarayıcı, gerekli bir değeri girmediğiniz konusunda sizi uyarır ve şifre girişine odaklanır.
3. Geçersiz bir şifre girip Oturum aç'ı tıklayın. Artık neyin yanlış olduğuna bağlı olarak farklı mesajlar görüyorsunuz.
Kullanıcıların e-posta adreslerini ve şifrelerini girmelerine yardımcı olmak için farklı yöntemler deneyin. Daha iyi şifre formu alanları bazı akıllı öneriler sunar.

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

Daha fazlasını yapın

Bu codelab'de gösterilmese de şu dört önemli giriş formu özelliğine ihtiyacınız vardır:

Kullanıcıların şifrelerini kolayca sıfırlamalarını sağlayan Şifrenizi mi unuttunuz? düğmesini ekleyin.
Kullanıcılarınızın verilerini nasıl koruduğunuzu bilmeleri için hizmet şartları ve gizlilik politikası belgelerinizin bağlantısını ekleyin.
Stil ve markalamayı 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.

Oturum açma formu oluşturmak için platformlar arası tarayıcı özelliklerini kullanma Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

1. Anlamlı HTML kullanma

2. Parmaklar için tasarım

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

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

5. Form doğrulama ekleme

Daha fazlasını yapın

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