HTML5 Input Tipleri - Yusuf SEZER

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
• email
• 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.