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>

Bu içeriği beğendiyseniz paylaşarak destek olabilirsiniz!


Eğitim İçeriği

Eğitim HTML Dersleri
Kategori Web Programlama
Ders Adeti 19 Ders
Dil Türkçe
Güncelleme 12/2020
  • HTML Dersleri

    HTML Dersleri Sıfırdan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 19 Ders
    Dil Türkçe
    Güncelleme 12/2020
    Derse Başla
  • Java Dersleri

    Java Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 125 Ders
    Dil Türkçe
    Güncelleme 09/2020
    Derse Başla
  • CSS Dersleri

    CSS Dersleri Başlangıçtan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 41 Ders
    Dil Türkçe
    Güncelleme 10/2021
    Derse Başla