HTML5 ile Sadece Sayı, Rakam Girilen Input Yapmak

HTML5’in getirdiği yenilikleri kullanarak sadece sayısal değerlerin girildiği bir input alanı oluşturacağız. Input alanına sadece rakam girilebilecek, rakam dışındaki karakter yazımlarına izin verilmeyecek. HTML5 sayesinde tek satırda bu işlemi yapabiliyoruz. Javascript veya jQuery ile uğraşmak istemiyorsanız bu yöntemi uygulayabilirsiniz. Bu işlemi yaparken pattern özelliği ile Regular Expression’lardan yararlanacağız.

Örnek 1)

Bu örnekle input alanına sadece sayı girilmesini sağlayacağız. pattern özelliğinde Reguler Expression kullanarak sadece sayı girilmesine izin veriyoruz. \d rakamlar için kullanılır. required ile input'un boş bırakılmasını engelliyoruz.

Not: Eğer tek rakam girilsin istiyorsanız \d , birden fazla rakam girilsin istiyorsanız \d* kullanmalısınız.

<input type="text" pattern="\d" title="Bu input'a sadece sayısal değer girilebilir" required>

Örnek 2)

Bu örnekle input alanına sadece 11 haneli sayı girilmesini sağlayacağız. TC No alanı gibi düşünebilirsiniz. Yine pattern özelliğinde Reguler Expression kullanarak sadece sayı girilmesine izin veriyoruz. \d rakamlar için kullanılır, {11} ise 11 haneli olacağını gösterir. required ile input'un boş bırakılmasını engelliyoruz.

<input type="text" pattern="\d{11}" title="Bu input'a sadece 11 karakterli sayısal değer girilebilir" required>