HTML input sadece harf girme

HTML input kullanarak sayı, mail vs bir çok veriyi giriyoruz. Bazen bu veriler girilirken sınırlandırılması gerekir. Bu yazıda sadece harf girişine izin veren HTML input örneğini göreceksiniz.

Bu girişi yaparken doğrulunu :valid CSS özelliğini de kullanarak kontrol edeceğiz.

HTML Kodu:


<!DOCTYPE html>
<style>
    input[type="text"]:valid{
        outline:2px solid green;
    }

    input[type="text"]:invalid{
        outline:2px solid red;
    }
</style>
<body>
    <form>
        <input type="text" pattern="[A-Za-z]*" title="Sadece Harf girin">
        <input type="submit">
    </form>
</body>
</html>

<!DOCTYPE html>

<style>

input[type="text"]:valid{

outline:2px solid green;

}

input[type="text"]:invalid{

outline:2px solid red;

}

</style>

<body>

<form>

</form>

</body>

</html>

Çıktı:

Yukarıdaki kodlar çalıştırıldığında input kutusuna harf dışında bir değer girildiğinde form gönderilmeyecektir.

Bunu paylaş:

Şunlar da Hoşunuza Gidebilir

Yorum yap X