Input type seçimi mobil klavyeyi nasıl etkiler?

Mehmet · Dün 21:58 da

Input type seçimi mobil klavyeyi nasıl etkiler?

Mobil cihazlarda input alanının type değeri, tarayıcıya hangi klavyenin ve hangi yardımcı tuşların daha uygun olduğunu bildirir. Örneğin type="email" e-posta klavyesinde @ işaretini, type="url" ise adres yazmayı kolaylaştıran tuşları öne çıkarabilir. Ancak görünen klavye işletim sistemi, tarayıcı, cihaz ve klavye uygulamasına göre değişir; type seçimi belirli bir klavye düzenini garanti etmez.

Ayrıca type yalnızca klavyeyi değiştirmez. Tarayıcının yerleşik doğrulamasını, mobildeki otomatik tamamlama davranışını ve bazı alanlarda kontrolün görünümünü de etkiler. Bu nedenle değeri, alanın beklediği gerçek veri türüne göre seçmek gerekir.

Hangi type ne zaman seçilmeli?

Aşağıdaki seçim, alanın amacına göre yapılmalıdır. Kullanıcıdan sayı bekleniyor diye her zaman number kullanmak doğru değildir; telefon numarası matematiksel bir sayı değildir.

Alan amacı	Önerilen type	Muhtemel klavye etkisi	Önemli not
Serbest metin	`text`	Standart metin klavyesi	Varsayılan seçimdir
E-posta adresi	`email`	`@` ve alan adı yazımı kolaylaşabilir	E-posta biçimi için yerleşik doğrulama sağlar
Telefon numarası	`tel`	Telefon tuş takımı veya sayısal düzen açılabilir	Numarayı matematiksel değer olarak işlemez
Sayısal miktar	`number`	Sayısal klavye açılabilir	Ondalık, aralık ve artırma-azaltma davranışları tarayıcıya göre değişebilir
Web adresi	`url`	Adres yazmaya uygun tuşlar sunulabilir	Tam URL doğrulaması için sunucu da kontrol etmelidir
Arama sorgusu	`search`	Arama veya gönderme tuşu gösterilebilir	Görsel ve klavye ayrıntıları cihaza bağlıdır

Tablodaki klavye etkileri yalnızca yönlendiricidir. Aynı type değeri farklı cihazlarda farklı simge, düzen veya gönderme tuşu gösterebilir. Kullanıcının gerçekten istediği veri türü ile klavye kolaylığı çelişiyorsa, veri doğruluğunu koruyan türü tercih edin.

Uygulanabilir en küçük örnek

Aşağıdaki ön yüz örneği, yaygın alanlar için uygun türleri kullanır. /kaydet sunucu yolu ayrıca uygulanmalıdır; dosyayı açmak tek başına verileri kaydetmez:

Kod:

<style>input, select, textarea, button, details { border-radius: 4px; }</style>
<form action="/kaydet" method="post">
  <label for="email">E-posta</label>
  <input id="email" name="email" type="email" autocomplete="email" required>

  <label for="phone">Telefon</label>
  <input id="phone" name="phone" type="tel" autocomplete="tel">

  <label for="amount">Miktar</label>
  <input id="amount" name="amount" type="number" min="0" step="1" inputmode="numeric">

  <label for="site">Web sitesi</label>
  <input id="site" name="site" type="url" autocomplete="url">

  <button type="submit">Gönder</button>
</form>

Uygularken şu sırayı izleyin:

Alan etiketini ve beklenen veriyi belirleyin: e-posta için email, telefon için tel, ölçülebilir miktar için number seçin.
Her alana benzersiz id ve anlamlı name verin; label öğesini for ile bağlayın.
Örneği bir gerçek mobil cihazda açıp her alanı seçin. E-posta alanında @, telefon alanında sayısal düzen veya sayısal alanda uygun giriş kolaylığı görmeniz beklenir; bunlar cihazın klavyesine bağlıdır.
Bir alan beklenmeyen klavye açıyorsa önce type değerinin veri amacıyla uyumunu kontrol edin. Gerekirse klavye ipucu için inputmode ekleyin; fakat bunu yanlış veri türünü gizlemek için kullanmayın.
Form gönderimini sunucuda da doğrulayın. Tarayıcının yerleşik doğrulaması kullanıcıya kolaylık sağlar, ancak tek başına güvenilir veri doğrulama katmanı değildir.

type ile inputmode farkı

type alanın anlamını ve tarayıcı davranışını tanımlar. inputmode ise tarayıcıya tercih edilen sanal klavye türü hakkında ek ipucu verir. Örneğin yalnızca rakamlardan oluşan, matematiksel işlem yapılmayan bir üyelik kodu için type="text" inputmode="numeric" düşünülebilir. Böylece değer metin olarak kalır; baştaki sıfırların kaybolması veya sayı aralığı kısıtları gibi number davranışları devreye girmez.

Telefon, kart numarası, posta kodu ve doğrulama kodları genellikle sayı gibi görünse de tanımlayıcıdır. Bu alanlarda tel veya amaca uygun text kullanmak daha güvenlidir. Sayısal miktar, yaş veya ölçüm gibi aritmetik yapılacak değerlerde ise number ve uygun min, max ve step değerleri kullanılabilir.

Sık yapılan hatalar

Telefon numarasına number vermek: Artı işareti, boşluklar ve ülke kodu biçimleri sorun çıkarabilir.
Her alanı text yapmak: Mobil klavye kolaylıkları ve yerleşik doğrulama kaybedilir.
Sadece klavyeye güvenmek: Kullanıcı fiziksel klavye, farklı bir dil klavyesi veya otomatik doldurma kullanabilir.
Yer tutucuyu etiket sanmak: Placeholder silindiğinde alanın amacı anlaşılmaz; görünür label kullanın.
Yalnız tarayıcı doğrulaması yapmak: Gönderilen veriyi sunucuda da biçim, izin ve iş kuralı açısından kontrol edin.

Sık sorulan sorular

Klavye düzenini tüm telefonlarda aynı yapabilir miyim?

Hayır. type ve inputmode yalnızca öneride bulunur. İşletim sistemi, tarayıcı ve kullanıcının seçtiği klavye uygulaması son görünümü belirler.

Sayı girişi için type="number" her zaman en iyi seçenek midir?

Hayır. Aritmetik yapılacak miktarlar için uygundur; telefon, posta kodu, kart veya başında sıfır bulunabilen kodlar için genellikle uygun değildir. Bu değerleri metin olarak saklamak ve gerektiğinde inputmode ile klavye ipucu vermek daha doğru olabilir.

Input type seçimi mobil klavyeyi nasıl etkiler?

Mehmet