Ders_34 HTML Input Elemanının Tipleri (Input Type)

HTML Input Tipleri (Input Type)

Bu bölüm, <input> elemanına atayabileceğimiz type özelliklerini içerir.

<input type="text"> Text Kutusu

Tek satırlık bir metin kutusu oluşturur. Örneğe dikkat edelim:

<form>
Ad:<br>
<input type="text" name="ad">
<br>
Soyad:<br>
<input type="text" name="soyad">
</form>

Bu kod sayfamızda şöyle görünecektir:

Ad:

Soyad:

<input type="password"> Şifre Kutusu

Bir şifre alanı oluşturur. Örneğe dikkat edelim:

<form>
Kullanıcı Adı:<br>
<input type="text" name="ad">
<br>
Şifre:<br>
<input type="pasword" name="sifre">
</form>

Çıktısı:

Şifre kutucuğunda, girilen karakterler, güvenlik için maskelenecektir.

<input type="submit"> Elemanı - Gönder Tuşu

<input type="submit"> elamanı; formumuzu, gerekli yere göndermek için tıklanacak bir gönder tuşu oluşturur.

Formlar, genellikle, bir server sayfasına giderler. Bu sayfada, formların içerdikleri bilgilerin işlenmesi için bir script vardır.

Örneğe dikkat edelim:

<form action="bir_sayfa.php">
Ad:<br>
<input type="text" name="ad" value="Lütfen adınızı girin">
<br>
Soyad:<br>
<input type="text" name="soyad" value="Lütfen soyadınızı girin">
<br><br>
<input type="submit" value="Gönder">
</form>

Bu formun sayfamızdaki görünümü şöyle olacaktır:

<input type="radio"> Elemanı - Radyo Butonu

<input type="radio"> elemanı, bir radyo butonu tanımlar.

Bu butonlar, kullanıcılara, birden fazla seçenek arasından birini seçmek için izin verir. Örneğe dikkat edelim:

<form>
<input type="radio" name="cinsiyet" value="erkek" checked>Male
<br>
<input type="radio" name="cinsiyet" value="kadın">Female
</form>

Yukarıdaki formun çıktısı şöyle olacaktır:

erkek
kadın

value="botonun_değeri" özelliğine atadığımız değer, botunun yanında gösterilecek ifadedir.

<input type="checkbox"> Seçim Kutucukları

Birden fazla seçenekten, hiç birini ya da birden fazlasını seçebilmek için seçenekler oluşturur.

Örneğe dikkat edelim:

<form>
<input type="checkbox" name="arac1" value="Bisiklet"> Bisikletim var
<br>
<input type="checkbox" name="arac2" value="Araba"> Arabam var
</form>

Çıktısı:

Bisikletim var
Arabam var

<input type="submit"> Gönder Tuşu

<button> elemanı, tıklanabilir bir düğme oluşturur.

onclick özelliğine atadığımız değer ile, bu düğmeye tıklandığında, yapılmasını istediğimiz olayı belirtiriz. Örneğe dikkat edelim:

<button type="button" onclick="alert('Hepiniz hoş geldiniz!')">Buraya tıklayın!</button>

Bu form elemanı şöyle bir düğme oluşturacaktır:

HTML5 Input Tipleri (input type)

HTML5 birçok yeni input tipi getirmiştir:

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

Bu özellikler, eski tarayıcılarda tanınmaz, text olarak gösteririlirler.

<input type="number"> Numara Kutusu

<input type="number"> elemanı, içine sadece sayı yazabileceğimiz bir kutucuk oluşturur. İstersek, girilebilecek sayıların alt ve üst sınırını da biz belirleyebiliriz. Örneğe dikkat edelim:

<form>
Sayı giriniz (1 ve 5 arasında):
<input type="number" name="sayi" min="1" max="5">

Çıktısı:

Bir input elemanına, aşağıdaki değerleri ekleyerek, bir takım kısıtlamalar getirebiliriz.

Özellik	Anlamı
disabled	görünmeyen bir input alanı oluşturur
max	bir input alanı için maximum değer oluşturur.
maxlength	input alanın maximum kaç karakteri göstereceğini belirler
min	input alanın minimum kaç karakteri göstereceğini belirler
pattern	girilen input değerine karşılık gelen sabit bir tanım oluşturur.
readonly	input alanına değiştirilemez bir metin ekler
required	doldurulması zorunlu bir input bölgesi oluşturur.
size	input bölgesinin kaç karakter genişliğinde olacağını belirler
step	input bölgesindeki sayıların kaçın katı olması gerektiğini belirler
value	bir input bölgesinin varsayılan değerini atar

Input kısıtlamaları ile ilgili, bir sonraki derste daha detaylı bilgi bulabilirsiniz.

Örneğe dikkat edelim:

<form>
Sayı:
<input type="number" name="notlar" min="0" max="100" step="10" value="30">
</form>

Yukarıda, notlar adında, 0-100 arası değerler girilebilecek ve girilen sayıların 10'un katı olması gerektiği bir form elemanı oluşturulmuştur.

Sayı:

<input type="date"> Tarih Kutusu

İçersine bir tarih girilebilen bir kutucuk oluşturur.

Örnek:

<form>
Doğum günüm:
<input type="date" name="dgunu">
</form>

Çıktısı:

Doğum günüm:

max ve min özelliklerine atadığımız değerler ile, date tipine bir takım kısıtlamalar getirebiliriz.

Tarayıcınıza bağlı olarak, input alanında, bir tarih şablonu görünmelidir.

Örnek:

<form>

1980-01-01 den önce bir tarih gir:

2000-01-01 den sonra bir tarih gir:

</form>

Çıktısı:

1980-01-01 den önce bir tarih gir:

2000-01-01 den sonra bir tarih gir:

<input type="color"> Renk Kutusu

Bir renk seçimi yaptırmak için kullanılan bir elemandır.

Tarayıcınıza bağlı olarak, input alanında, bir renk şablonu görünmelidir.

Örnek:

<form>
Bir renk seçin:
<input type="color" name="renk">

Çıktısı:

<input type="range"> Sınırlı Bölge Kutusu

Belli bir aralıkta bir veri girilebilecek, input bölgeleri oluşturur.

Tarayıcınıza bağlı olarak, input alanında, bir kayan kontrol çubuğu görünmelidir.

Örnek:

<form>

Notlar:
<input type="range" name="points" min="0" max="10">

</form>

Çıktısııı:

Notlar:

Bu input tipinde; min, max, step, value özellikleri de kullanılabilir.

<input type="month"> Ay ve Yıl Kutusu

Bu tip, kullanıcının bir ay ve yıl seçmesine olanak tanır.

Tarayıcınıza bağlı olarak, input alanında, bir tarih seçicisi oluşmalıdır.

Örnek:

<form>
Doğum tarihi (ay ve yıl olarak):
<input type="month" name="dogum">
</form>

Çıktısı:

Not: type="month" özelliği Internet Explorer tarafından desteklenmez.

<input type="week"> Hafta Kutusu

Bu tip, kullanıcının bir hafta ve yıl seçmesine olanak tanır.

Tarayıcınıza bağlı olarak, input alanında, bir hafta ve yıl seçicisi oluşmalıdır.

Örnek:

<form>
Bir hafta seçiniz:
<input type="week" name="hafta_yil">

Çıktısı:

Note: type="week" zelliği Internet Explorer tarafından desteklenmez.

<input type="time"> Saat Kutusu

Bu tip, kullanıcının, zaman diliminden bağımsız bir saat seçmesine olanak tanır.

Tarayıcınıza bağlı olarak, input alanında, bir saat seçicisi oluşmalıdır.

Örnek:

<form>
Bir saat seçin:
<input type="time" name="saat">

Çıktısı:

Not: type="time" özelliği; Firefox or Internet Explorer tarafından desteklenmez.

<input type="datetime-local"> Yerel Saat Kutusu

Bu input tipi, yerel bir tarih ve saat seçmeyi sağlar.

Tarayıcınıza bağlı olarak, input alanında, bir tarih seçicisi oluşmalıdır.

Örnek:

<form>
Doğum günü (tarih ve saat):
<input type="datetime-local" name="bdaytime">

Çıktısı:

Not: type="time" özelliği; Firefox or Internet Explorer tarafından desteklenmez.

<input type="email"> Mail Adresi Kutusu

Bu input tipi, kullanıcalardan e-mail adreslerini alabilmek için bir kutucuk oluşturur.

Örnek:

form>
E-mail:
<input type="email" name="email">

Çıktısı:

E-mail:

Not: type="email" özelliği, Internet Explorer9 ve öncesi tarafından desteklenmez.

<input type="search"> Arama Kutusu

type="search" özelliği, bir arama çubuğu oluşturur. Bu çubuk, bir tip text bölgesi gibi davranır.

Örnek:

<form>
Google araması:
<input type="search" name="googlesearch">

Çıktısı:

Google araması:

<input type="tel"> Telefon Numarası Kutusu

Telefon nurmarası girmek için bir kutucuk oluşturur.

Not: Sadece safari 8 tarayıcısı tarafından desteklenir.

Örnek:

<form>
Telefon:
<input type="tel" name="telno">

Çıktısı:

Telefon:

<input type="url"> URL Kutusu

Bir url adresi oluşurmak için kullanılan bir kutucuktur.

Tarayıcınıza bağlı olarak, input alanına girilen url adresi otomatikman doğrulanır.

Örnek:

<form>
Anasayfanızı girin:
<input type="url" name="anasayfa">

Çıktısı:

Anasayfanızı girin:

Not: type="url" özelliği, Internet Explorer9 ve öncesi tarafından desteklenmez.

sonraki ders için tıklayınız

DERSİMİZ KOD - HTML