2011 yılından beri hayatımızda olan HTML5 bir çok yeni etiket ile birlikte nitelikleri de web tasarımcılara kazandırdı.

Bu yazıda HTML input kullanarak sadece sayı girişine izin veren metin kutuları nasıl oluşturacağınız göstereceğiz.

Örnek 1: type="number" niteliği kullanarak sayı girişine izin verme

<!DOCTYPE html> <body>     <form>         <input type="number" required>         <input type="submit">     </form> </body> </html>

<input type="number"> ile kullanıcıdan sadece sayı girmesini istiyoruz.

Örnek 2: pattern="\d*" kullanarak sadece sayı girişine izin verme

<!DOCTYPE html> <body>     <form>         <input type="text" pattern="\d*">         <input type="submit">     </form> </body> </html>

\d* deseni input kutusuna girilen metin sadece sayı olmasını ister.

CSS ile Doğruluk Kontrolü

CSS :invalid sözde sınıfını kullanarak girilen metin doğru olup olmadığını anlık olarak kullanıcıya gösterebilirsiniz.

HTML + CSS kodu:

<!DOCTYPE html> <style>     input[type="text"]:invalid{         outline: 2px solid red;     }      input[type="text"]:valid{         outline: 2px solid green;     } </style> <body>     <form>         <input type="text" pattern="\d*">         <input type="text" pattern="\d*">         <input type="submit">     </form> </body> </html>

HTML ile kullanıcıdan TC kimlik numarası alma

<!DOCTYPE html> <style>     input[type="text"]:invalid{         outline: 2px solid red;     }      input[type="text"]:valid{         outline: 2px solid green;     } </style> <body>     <form>         <input type="text" pattern="\d{11}" placeholder="11 haneli rakam">         <input type="submit">     </form> </body> </html>