HTML
Form yönelimi
autocomplete token'ları (email, tel, address-line1) öğrenirsin.
Form otomatik doldurma
Bir alışveriş formunu doldururken tarayıcının e-posta veya adresini önerdiğini görmüşsündür. Bu davranış autofill (otomatik doldurma) olarak bilinir. Tarayıcı, daha önce kaydettiğin bilgileri ilgili alanlara yerleştirir.
Bunun çalışması için autocomplete özniteliğini kullanırsın. Değer olarak bir token verirsin: <input type="email" autocomplete="email">. Token, alanın ne tür veri istediğini tarayıcıya söyler.
Doğru token sayesinde kullanıcı yalnızca bir tıkla formu doldurabilir. Hem hız hem doğruluk artar.
Yaygın autocomplete token'ları
Yaygın token'lar şunlardır:
email: e-posta adresitel: telefon numarasıaddress-line1: adres satırıpostal-code: posta kodugiven-name: adfamily-name: soyadcountry-name: ülke adı
Her alan için doğru token'ı seçmek, tarayıcının kayıtlı bilgiden doğru olanı önermesini sağlar. Çok genel on değeri yerine belirli bir token kullan; böylece tarayıcı alanları karıştırmaz ve kullanıcı yalnızca onaylamak zorunda kalır.
Off ve section token'ları
Bazen otomatik doldurmayı kapatmak istersin: autocomplete="off". Bu, örneğin tek seferlik bir kupon kodu alanında işe yarar; tarayıcı eski kuponları önermemiş olur.
Formu bölümlere ayırmak için section token kullanabilirsin: autocomplete="section-shipping street-address". section-shipping öneki bu alanın 'kargo' bölümüne ait olduğunu söyler; tarayıcı farklı bölümlerde aynı türden alanları karıştırmaz.
Token'ları on ile açıp off ile kapatabilirsin; ama belirli token her zaman daha nettir.
Uygulama Kargo formunu autocomplete ile yaz
Body içine bir <form> ekle. Form içine etiketli üç input koy: e-posta için <input type="email" autocomplete="email">, telefon için <input type="tel" autocomplete="tel">, adres için <input type="text" autocomplete="address-line1">. Her input'un bir <label for="..."> ile eşleşen id'si olsun.
Örnek çözümü göster
<body>
<form>
<label for="email">E-posta</label>
<input type="email" id="email" name="email" autocomplete="email">
<label for="tel">Telefon</label>
<input type="tel" id="tel" name="tel" autocomplete="tel">
<label for="adres">Adres</label>
<input type="text" id="adres" name="adres" autocomplete="address-line1">
</form>
</body>
Kendini test et
-
Hangi öznitelik tarayıcının otomatik doldurma önerisini açar?
- autocomplete
- placeholder
- required
- pattern
Cevabı göster
autocomplete — Doğru. autocomplete özniteliği tarayıcıya alanın ne tür veri istediğini söyler ve otomatik doldurmayı açar.
-
E-posta alanına autocomplete ekle
<input type="email" name="email" autocomplete="____">
Cevabı göster
<input type="email" name="email" autocomplete="email">
-
Token'ı alan türüyle eşleştir
- email
- E-posta
- tel
- Telefon
- address-line1
- Adres satırı
- postal-code
- Posta kodu
Sıradaki ders: Hidden input
