HTML5 input Tipleri
Farklı tür veri girişleri için kullanılan input tipleri ve HTML5 ile birlikte gelen yeni input tipleri ile ilgili bilgiler yer alıyor.
HTML input text
<input type=”text” /> tek satırlık veri giriş alanı tanımlar.
<form>
Adı:<br />
<input type="text" name="adi" /><br />
Soyadı:<br />
<input type="text" name="soyadi" />
</form>Veri giriş alanı varsayılan uzunluğu 20 karakterdir.
HTML input password
<input type=”password” /> şifre girişi alanı tanımlar.
<form>
Kullanıcı adı:<br />
<input type="text" name="kullanici" /><br />
Kullanıcı şifresi:<br />
<input type="password" name="sifre" />
</form>Şifre giriş alanına yazılan her karakter yıldız veya daire olarak maskelenir.
HTML input submit
<input type=”submit” /> form verilerini sunucuya göndermek için düğme-buton tanımlar.
Gönder düğmesine basıldığında verinin nereye gideceği <form> etiketi action özelliği ile belirlenir.
<form action="iletisim.php">
Adı:<br />
<input type="text" name="adi" /><br />
Soyadı:<br />
<input type="text" name="soyadi" /><br /><br />
<input type="submit" value="Gönder" />
</form>Gönderme düğmesinin value değerine boş bırakıldığı veya unutulduğunda varsayılan değeri alacaktır.
<form action="iletisim.php">
Adı:<br />
<input type="text" name="adi" /><br />
Soyadı:<br />
<input type="text" name="soyadi" /><br /><br />
<input type="submit" />
</form>HTML input reset
<input type=”reset” /> tıklandığında tüm değerleri varsayılan yapan sıfırlama düğmesi-butonu tanımlar.
<form action="iletisim.php">
Adı:<br />
<input type="text" name="adi" value="Yusuf" /><br />
Soyadı:<br />
<input type="text" name="soyadi" /><br /><br />
<input type="submit" value="Gönder" />
<input type="reset" />
</form>Veri giriş alanlarına herhangi bir veri girdikten sonra sıfırlama düğmesi-butonuna tıklanırsa form verileri varsayılan değerleri alır.
HTML input radio
<input type=”radio” /> seçim kutusu tanımlar.
Birden fazla seçme kutusunda sadece bir tane seçim yapılabilir.
Bundan dolayı checked özelliğini sadece bir seçme kutusunda kullanın.
<form>
<input type="radio" name="meyve" value="elma" checked="checked" /> Elma<br />
<input type="radio" name="meyve" value="armut" /> Armmut<br />
<input type="radio" name="meyve" value="portakal" /> Portakal
</form>HTML input checkbox
<input type=”checkbox” /> onay kutusu tanımlar.
Onay kutusu seçeneği seçmeyebilir veya birden fazla onay kutusu seçeneği seçebilirsiniz.
<form>
<input type="checkbox" name="bisiklet" value="bisiklet" /> Bisikletim var<br>
<input type="checkbox" name="araba" value="araba" /> Arabam var
</form>HTML input button
<input type=”button” /> düğme-buton tanımlar.
<input type="button" onclick="alert('Merhaba!')" value="Buraya tıkla!" />HTML5 input Tipleri
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
HTML5 desteği olmayan tarayıcılar yeni input tiplerini <input type=”text” /> gibi görüntüler.
HTML5 input number
<input type=”number” /> sayı girişi tanımlar.
Sayı giriş aralığı min ve max özelliği ile ayarlanabilir.
Aşağıdaki örnekte 18 ve 65 arasındaki sayıları girebileceğimiz sayı girişi tanımlar.
<form>
Yaşınız (18 ve 65 arasında):
<input type="number" name="yas" min="18" max="65" />
</form>HTML input değeri sınırlama
HTML5 input girişinde daha fazla kısıtlama yapma imkanı getirmiştir.
| Özellik | Açıklama |
|---|---|
| disabled | Veri girişini devre dışı bırakır |
| max (HTML5) | Veri girişi yapılacak en büyük(maximum) veriyi belirler |
| maxlength | Veri girişi karakter sayısını belirler |
| min (HTML5) | Veri girişi yapılacak en küçük(minimum) veriyi belirler |
| pattern (HTML5) | Veri girişi için düzenli ifade(kural) belirler |
| readonly | Veri giriş alanı sadece okunur(değiştirilemez) olduğunu belirtir |
| required (HTML5) | Veri girişi alanına girişin zorunlu olduğunu belirtir |
| size | Veri girişinde gösterilecek karakter sayısını belirler |
| step (HTML5) | Veri girişinde sayıların artış miktarını belirler |
| value | Veri girişi alanının varsayılan değerini belirler |
input özellikleri yazımı okuyarak input değeri sınırlama ile ilgili detaylı bilgi alabilirsin.
Aşağıdaki örnek sayı giriş alanına 0 ve 100 arasında değer girilebilir. Sayı girişindeki artış ve azalış miktarı 10, varsayılan değer ise 30’dur.
<form>
Sayı:
<input type="number" name="sayi" min="0" max="100" step="10" value="30" />
</form>HTML5 input date
<input type=”date” /> tarih giriş alanı tanımlar.
Tarayıcı desteğine bağlı olarak tarih seçici giriş alanında gösterilir.
<form>
Doğum Tarihi:
<input type="date" name="dogumtarihi" />
</form>Tarih aralığını seçme sınırı getirilebilir.
Aşağıdaki örnekte sadece 1950 ile 2000 tarihleri arasındaki girişleri kabul etmektedir.
<form>
Doğum Tarihi:
<input type="date" name="dogumtarihi" min="1950-01-01" max="2000-01-01" />
</form>HTML5 input color
<input type=”color” /> renk giriş alanı tanımlar.
Tarayıcı desteğine bağlı olarak renk seçici giriş alanında gösterilir.
<form>
Favori Renginiz:
<input type="color" name="favorirenk" />
</form>HTML5 input range
<input type=”range” /> max ve min özelliği aralığında değer seçimi alanı tanımlar.
Tarayıcı desteğine bağlı olarak kaydırma kontrolü giriş alanında gösterilir.
<form oninput="sonuc.value=deger.value">
<input type="range" name="deger" min="0" max="50" value="10" />
<output name="sonuc"></output>
</form>Değer aralığı belirlemek için min, max özellikleri kullanılabilir.
HTML5 input month
<input type=”month” /> ay ve yıl seçme alanı tanımlar.
Tarayıcı desteğine bağlı olarak tarih seçici giriş alanında gösterilir.
<form>
Doğum Tarihi (ay ve yıl):
<input type="month" name="dogumtarihi" />
</form>HTML5 input week
<input type=”week” /> yıl içi hafta seçme alanı tanımlar.
Tarayıcı desteğine bağlı olarak tarih seçici giriş alanında gösterilir.
<form>
Hafta Seçin:
<input type="week" name="hafta" />
</form>HTML5 input time
<input type=”time” /> saat ve dakika seçme alanı tanımlar.
Tarayıcı desteğine bağlı olarak saat ve dakika seçici giriş alanında gösterilir.
<form>
Saat / Dakika Seçin:
<input type="time" name="saatdakika" />
</form>HTML5 input datetime-local
<input type=”datetime-local” /> tarih, saat ve dakika seçme alanı tanımlar.
Tarayıcı desteğine bağlı olarak tarih, saat ve dakika seçici giriş alanında gösterilir.
<form>
Tarih, Saat ve Dakika :
<input type="datetime-local" name="tarihsaatdakika" />
</form>HTML5 input email
<input type=”email” /> e-posta adresi giriş alanı tanımlar.
Tarayıcı desteğine bağlı olarak e-posta girişi kontrol edilir.
<form>
E-posta:
<input type="email" name="eposta" />
</form>HTML5 input search
<input type=”search” /> arama alanı tanımlar.
<form>
Arama Yap :
<input type="search" name="arama" />
</form>HTML5 input tel
<input type=”tel” /> telefon numarası giriş alanı tanımlar.
<form>
Telefon:
<input type="tel" name="telefon" />
</form>HTML5 input url
<input type=”url” /> URL giriş alanı tanımlar.
Tarayıcı desteğine bağlı olarak URL girişi kontrol edilir.
<form>
Website Adresiniz:
<input type="url" name="website" />
</form>
HTML5 Derslerine buradan ulaşabilirsiniz…
Hayırlı günler dilerim.