HTML Form Elemanları Maskeleme
HTML de <input> etiketinde birçok maskeleme özelliği kullanılabilir. Şimdi tek tek maskeleme türlerini inceleyelim.
Bir şifre bölümü yapmak istiyorsanız ve şifrenin görünmez karakter olarak yazılmasını istiyorsanız <input> etiketinin type niteliğini password yaparak bunu sağlayabilirsiniz.
html>
<head></head>
<body>
<form>
Mail:<br>
<input type="text"><br>
Şifre:<br>
<input type="password"><br><br>
</form>
</body>
</html>
Forma girilen değerler için bir sil butonu oluşturmak istiyorsanız type niteliğine reset yapmalısınız. Eğer başlangıç değeri verilmişse (value) başlangıç değerine döner; eğer başlangıç değeri yoksa veriyi tamamen siler.
<html>
<head></head>
<body>
<form>
Adı:<br>
<input type="text" name="ad"><br>
Numarası:<br>
<input type="text" name="numara" value="21"><br><br>
<input type="submit" value="GÖNDER">
<input type="reset" value="SİL">
</form>
</body>
</html>
Eğer bir buton koyup butona tıklandığında ekranda bir yazı yazmasını istiyorsanız type niteliğine button yazmanız yeterli olacaktır.
<html>
<head></head>
<body>
<form>
<input type="button" onclick="alert('Butona bastığınız için teşekkür ederiz.')"
value="Butona Bas">
</form>
</body>
</html>
Herhangi bir renk seçim ekranı oluşturmak istiyorsanız type niteliğine color yazmanız gerekir.
<html>
<head></head>
<body>
<form>
<input type="color" >
</form>
</body>
</html>
Gün,ay,yıl şeklinde bir tarih alanı oluşturmak istiyorsanız type niteliğine date yazmanız yeterlidir.
<html>
<head></head>
<body>
<form>
<input type="date">
</form>
</body>
</html>
Eğer minimum ya da maksimum değer belirtecekseniz input etiketine max ya da min yazıp tarih belirtmeniz gerekmektedir.
<input type="date" max="2010-11-05">;
Tarihle birlikte saati de almak isterseniz type niteliğine datetime-local yazmanız yeterlidir.
<input type="datetime-local">
Mail alanı eklemek istiyorsanız type niteliğine email yazmanız yeterli olacaktır.
<html>
<head></head>
<body>
<form>
E-mail:
<input type="email">
<input type="submit" value="GÖNDER">
</form>
</body>
</html>
Girilecek alanın sadece sayı olmasını istiyorsanız type niteliğini number yapmalısınız. Eğer girilecek sayıda alt ve üst sınır olacaksa min ve maxı kullanarak değer aralığı belirtmeniz gerekir.
<html>
<head></head>
<body>
<form>
Lütfen 1 ile 51 arasında sayı giriniz:<br>
<input type="number" min="1" max="51">
<input type="submit" value="GÖNDER">
</form>
</body>
</html>
