HTML Dersleri 18 - Formlar Input Türleri

Merhaba değerli Kodlama Vakti okuyucuları , geçen dersimizde Form Elemanları adlı yazımızda  HTML’de Form Elemanlarının kullanımını ve özelliklerini öğrenmiştik. Önceki dersimizi incelemediyseniz HTML Dersleri 17 - Form Elemanları linkine tıklayarak ulaşabilirsiniz. 

Bu dersimizde HTML Formlarda input etiketine ait türlere gözatacağız. Önceki derslerimizde hatırlayacağınız üzere "input" etiketinin "type" parametresine yazdığımız tür ile "input" etiketini özelleştirebiliyorduk. Şimdi gelin bunlara daha derinden bakalım ;

Text (Metin)

HTML "input" etiketinin type parametresine "text" yazdığımız zaman tek satırlık bir metin giriş alanını tanımlar.

<form>
  <label for="ad">Adınız :</label><br>
  <input type="text" id="ad" name="ad"><br>
  <label for="soyad">Soyadınız :</label><br>
  <input type="text" id="soyad" name="soyad">
</form>

Password (Şifre)

HTML "input" etiketinin type parametresine "password" yazdığımız zaman tek satırlık bir şifre giriş alanını tanımlar.

<form>
  <label for="kullaniciAdi">Kullanıcı Adı :</label><br>
  <input type="text" id="kullaniciAdi" name="kullaniciAdi"><br>
  <label for="sifre">Şifreniz:</label><br>
  <input type="password" id="sifre" name="sifre">
</form>

Submit (Gönder)

HTML "input" etiketinin type parametresine "submit" yazdığımız zaman form verilerini form işleyiciye göndermek için buton oluşturur.

<form action="/aksiyon.php">
   <label for="ad">Adınız :</label><br>
  <input type="text" id="ad" name="ad"><br>
  <label for="soyad">Soyadınız :</label><br>
  <input type="text" id="soyad" name="soyad">
  <input type="submit" value="Gönder">
</form>

Reset (Sıfırlama)

HTML "input" etiketinin type parametresine "reset" yazdığımız zaman tüm form değerlerini varsayılan değerlerine sıfırlayacak bir buton oluşturur.

<form action="/aksiyon.php">
   <label for="ad">Adınız :</label><br>
  <input type="text" id="ad" name="ad"><br>
  <label for="soyad">Soyadınız :</label><br>
  <input type="text" id="soyad" name="soyad">
  <input type="submit" value="Gönder">
   <input type="reset">
</form>

Radio (Radyo Düğmesi ) ve Checkbox (Onay Kutuları)

HTML'de radyo düğmelerini ve onay kutularını önceki derslerimizde işlemiştik , tekrar incelemek için HTML Dersleri 16 – Formlar tıklayınız.

Color (Renkler)

HTML "input" etiketinin type parametresine "color" yazdığımız zaman bir renk içermesi gereken metin alanı oluşturur.Tarayıcı desteklemesine bağlı olarak, metin alanında bir renk seçici görünebilir.

<form>
  <label for="favorim">Lütfen favori renginizi seçiniz:</label>
  <input type="color" id="favorim" name="favorim">
</form>

Date (Tarih)

HTML "input" etiketinin type parametresine "date" yazdığımız zaman tarih seçilen bir metin alanı oluşturur.Tarayıcı desteklemesine bağlı olarak, metin alanında bir tarih seçim alanı görünebilir.

<form>
  <label for="tarih">Doğum Tarihini:</label>
  <input type="date" id="tarih" name="tarih">
</form>

File (Dosya Seçimi)

HTML "input" etiketinin type parametresine "file" yazdığımız zaman dosya yüklemeleri için "Gözat" düğmesi oluşturur ve kullanıcının dosya yüklemesini sağlar.

<form>
  <label for="dosya">Dosya Seçiniz :</label>
  <input type="file" id="dosya" name="dosya">
</form>

Number (Sayı)

HTML "input" etiketinin type parametresine "number" yazdığımız zaman metin alanından sadece sayı girmesini sağlarız ve başka türde karakter girilemez."min" ve "max" parametreleri kullanılarak , kullanıcıdan bu değer aralığında bir sayı girmesini sağlayabiliriz.

<form>
  <label for="adet">Adet (1 ve 5 arasında giriniz):</label>
  <input type="number" id="adet" name="adet" min="1" max="5">
</form>