Merhaba...
Formlarda en çok kullanılan giriş metodlarından biri olan INPUT elemanı bir çok farklı tipte kullanılıyor. Input etiketleri kapanmazlar ve türüne bağlı olarak bir çok parametre alırlar. İnputların tipleri TYPE parametresi ile belirtilir.
INPUT TİPLERİ LİSTESİ
HTML ile kullanılan input tipleri , HTML5 ile beraber birazda semantik amaçlarla daha fazla arttırıldı. Önceki sürümlerden beridir kullanılanları GENEL, sonradan kullanılmauya başlanan input tiplerinide DİĞER diye ayırdım..
GENEL
- text : düz metin kutusu
- password : şifre metin kutusu
- submit : formu gönderme butonu
- reset : formu temizleme butonu
- checkbox : onay kutusu
- file : Dosya Ekleme butonu
- hidden : Gizli metin kutusu
DİĞER
- number : sayı metin kutusu
- email: email metin kutusu
- tel : telefon metin kutusu
- date: tarih seçici metin kutusu
- datetime-local: tarih ve saat seçici metin kutusu
- color : renk seçici metin kutusu
- image : Resmin onay butonu olmasını sağlar
- month : Ay ve Yıl seçici metin kutusu
- range: Scroll ile değer seçici
- search: Arama metin kutusu
- time: Saat ve Dakika seçici metin kutusu
- week: Hafta ve Yıl seçici metin kutusu
- url: URL (Link) seçici metin kutusu
Bu derste input tiplerin asıl işlevleri üzerinde duracağım. Alabilecekleri ek özellikler ve parametreler için
HTML FORMLAR - INPUT PARAMETRELERİ dersine bakabilirsiniz.
İnput tiplerini tek tek inceleyelim...
INPUT type TEXT
TEXT tipi ile input düz bir metin kutusu olur ve en çok kullanlan input tipidir. Kullanıcıdan düz , tek satırlık kısa bilgiler almak için kullanılır ; ad , soyad , okul vs gibi.. Type parametresi ile text özelliğinin verilmesi gerekir..
<input type="text" />
<form>
Adınız :<br>
<input type="text" name="ad">
</form>
Metin kutuları ile ilgili parametreler için HTML FORMLAR - INPUT PARAMTRELERİ dersine bakabilirsiniz.
INPUT type PASSWORD
PASSWORD tipi ile input yine düz bir metin kutusu olur ancak içerisine yazılan karakterler **** işaretlerine çevrilir. Şifre girişlerinde kullanılır.. Type parametresi ile password özelliğinin verilmesi gerekir..
<input type="password" />
<form>
Şifre:<br>
<input type="password" name="sifre">
</form>
INPUT type SUBMIT
SUBMİT tipi ile input, butona dönüşür ve tıklandığında formun gönderilmesini sağlar. Veri girişi sağlamayan tiptir. Dolayısı ile name parametresi almaz. HTML 5 ile gelen <button type="submit"> etiketide formun gönderilmesini sağlar. Buton üzerinde görünecek yazı value="" parametresi ile belirlenir. Type parametresi ile submit özelliğinin verilmesi gerekir..
<input type="submit" />
<form>
Kullanıcı Adı:<br>
<input type="text" name="k_adi"> <br><br>
Şifre :<br>
<input type="password" name="sifre"> <br> <br>
<input type="submit" value="GİRİŞ">
</form>
Yukarıdaki buton tıklandığında form gönderilecektir. Ancak form action boş olduğundan sayfa yenilenecektir.
INPUT type RESET
RESET tipi ile input, yine butona dönüşür ve tıklandığında formdaki verileri temizler. Veri girişi sağlamayan tiptir. Dolayısı ile name parametresi almaz. HTML 5 ile gelen <button type="reset"> etiketide formun gtemizlenmesini sağlar. Buton üzerinde görünecek yazı yine value="" parametresi ile belirlenir. Type parametresi ile reset özelliğinin verilmesi gerekir..
<input type="reset" />
<form>
Kullanıcı Adı:<br>
<input type="text" name="k_adi"> <br><br>
Şifre :<br>
<input type="password" name="sifre"> <br> <br>
<input type="reset" value="TEMİZLE">
</form>
Yukarıdaki buton tıklandığında formdaki veriler silinir.
INPUT type CHECKBOX
Form içerisinde onay kutuları (checkbox) eklemk için kullanılır. Seçenekler arasında birden fazla seçim olabilecek durumlarda yada form sonunda herhngi bir yazıyı,anlaşmayı onaylamak için kullanılabilir.
<input type="checkbox" />
<form>
Bildiğiniz Programlama Dilleri :<br> <br>
<input type="checkbox" name="html" id="html" value="html">
<label for="html">HTML</label><br>
<input type="checkbox" name="css" id="css" value="html">
<label for="css">CSS</label><br>
<input type="checkbox" name="javascript" id="javascript" value="html">
<label for="javascript">JAVASCRIPT</label><br>
</form>
Yukarıda diller checkbox'lar ile işaretlenebilir. Label etiketi kullandığımız için yazılara tıkladığımızda ilgili checkbox işaretlenecektir. Form gönderildiğinde , sunucuya işaretli checkbox'ların value değeri gönderilmiş olur.
INPUT type RADIO
Form içerisinde radyo butonları eklemek için kullanılır. Seçenekler arasında sadece tek seçim yapılması gereken durumlarda kullanılabilir. Öerneğin BAY - BAYAN seçimi gibi.. Radio butonların name'lerinin aynı olması gerekir.
<input type="radio" />
<form>
Cinsiyetiniz :<br> <br>
<input type="radio" name="cinsiyet" id="bay" value="bay">
<label for="bay">BAY</label><br>
<input type="radio" name="cinsiyet" id="bayan" value="bayan">
<label for="bayan">BAYAN</label><br>
</form>
Yukarıda cinsiyet için eklenen 2 radyo butonun name parametrelerinin aynı olduğuna (CİNSİYET) dikakt edin.. Dolayısıyla sadece bir seçenek seçilebilir olur. Ayrıca Label etiketi kullandığımız için yazılara tıkladığımızda ilgili radio buton işaretlenecektir. Form gönderildiğinde , sunucuya işaretli radio butonun value değeri gönderilir.
INPUT type FILE
Dosya seçmek için kullanılır. FILE parametresi veri olarak dosya tanımlar. Tıklandığında , dosya seçebilmek için Klasör Gezgini açılır. Form içerisinde kullanıldığında , dosyanın formla beraber gönderilebilmesi için form'un method özelliğinin POST , enctype özelliğinin multipart/form-data olarak seçilmesi gerekir!!
<input type="file" />
<form action="#" method="POST" enctype="multipart/form-data">
Resim :<br>
<input type="file" name="resim">
</form>
Yukarıdaki Dosya Seç butonu tıklandığında, dosya seçmek için Klasör penceresi açılacaktır...
MULTIPLE İLE ÇOKLU DOSYA SEÇME
Fıle butonuna tıklandığında açılan klasör penceresinde sadece bir tane dosya seçilebilir. Ancak input içine multiple özelliği eklersek , bu kez çoklu dosya seçimine izin verecekir...
<input type="file" />
<form action="#" method="POST" enctype="multipart/form-data" >
Resimler :<br>
<input type="file" name="resimler" multiple>
</form>
Yukarıdaki Dosya butonu tıklandığında, açılan Klasör penceresinde brden fazla dosya seçebilirsiniz..
INPUT type HIDDEN
Ekranda görünmeyen metin kutularıdır. Genellikle veri tabanı işlemelrinde yada sayfa haberleşmesinde gönderilmek üzere bilgiler içerir. Her ne kadar ekranda görünmesede sayfanın kaynak kodlarına bakıdığında görünür. Örneğin 125 bilgisini , kullanıcıya göstermeden form onaylandığında göndermek istersek bunu hidden input ile yapabiliriz..
<input type="hidden" />
<form>
Gizli Input:<br>
<input type="hidden" name="bilgi" value="125">
</form>
Yukarıda hidden input ekranda görünmedi. Ancak "gizli input" yazısı üzerinde sağ tıklayıp incele derseniz, yazının hemen altında input elemanını göreceksiniz..
INPUT type NUMBER
NUMBERtipi ile input düz bir metin kutusu olur ancak içerisine sadece sayılar yazılabilir. Saece sayısal içerikli girişler için kullanılır.. Type parametresi ile number özelliğinin verilmesi gerekir. Logoraritmada "e" harfi bir sayı olduğundannumber veri girişi "e" harfinide kabul edecektir.
<input type="number" />
<form>
Yaşınız :<br>
<input type="number" name="yas">
</form>
Yukarıdaki "yaş" alanına harf yazmayı denerseniz , yazmadığını göreceksiniz. Ayrıca kutunun sağında çıkan oklarla sayıları arttırıp azaltabilirsiniz..
INPUT type EMAIL
Mail adres girişleri için kullanılır. Form gönderildiğinde mail geçerliliği otomatik olarak kontrol edilir. Ancak 100% doğruluk vermez.
<input type="email" />
<form>
Mail Adrediniz:<br>
<input type="email" name="email"> <br><br>
<input type="submit" value="GÖNDER">
</form>
Yukarıdaki "Mail Adresiniz" alanına "@" işareti olmadan mail adresi yazıp GÖNDER butonuna tıkladığınızda , mail geçersiz uyarısı alacaksınız.. ,
INPUT type TEL
Telefon numarası girişleri için kullanılır. Telefon numarası biçimi PATTERN parametresi ile belrlenir. biçimi için pattern aşağıdaki gibi olur.
PATTERN
Pattern parametresi telefon numarası biçiminin nasıl oalcağını belirler. Telefon numarası hanelerine göre ; arada boşluk bırakılarak yada çizgi konularak , her hanede hangi rakamların kaç tane yazılması gerektiğini belirler..
Örneğin 0506 242 02 40 şeklindeki bir numara biçiminde 4 hane olur. ( **** *** ** ** )
Tüm haneler 0-9 arası rakam alır. Yazılabilecek rakamlar köşeli parantez içerisinde belirtilir. ..[ 0-9 ]
Hanelerin kaç rakamdan oluşacağı ise süslü parantez ile belritilr:
1. hane 4 : { 4 }
2. hane 3 : { 3 }
3. Hane 2 : { 2 }
4. hane 2 : { 2 }
Dolayısıyla bu numara biçimi için pattern ; pattern="[0-9]{4}-[0-9]{3}-[0-9]{2}-[0-9]{2}" şeklinde olur.
<input type="tel" />
<form>
Telefon Numaranız (0xxx xxx xx xx): <br>
<input type="tel" name="tel" pattern="[0-9]{4} [0-9]{3} [0-9]{2} [0-9]{2}">
<input type="submit" value="GÖNDER">
</form>
Yukarıdaki "Telefon Numaranız :" apattern ile belirtilen biçim dışında br numara yazıp GÖNDER butonuna tıkladığınızda , istenen biçim eşleştirin uyarısı alacaksınız.. Kullancıının istenilen biçimi bilebilmesi için placeholder ile metin kutusuna ilk değerde girilebilir. Input parametreleri dersinde placeholder kullanımına bakabilirsiniz..
INPUT type DATE
Tarih girişi ve tarih seçmek için kullanılır. Tarayıcı desteğine göre kutunun sağında takvim açılmasını sağlar. Örneğin doğum tarihi seçelim..
<input type="date" />
<form>
Doğum Tarihiniz:<br>
<input type="date" name="d_tarih">
<input type="submit" value="GÖNDER">
</form>
Yukarıdaki "Doğum Tarihiniz:" alanına doğrudan tarih yazabileceğiniz gibi , sağdaki takvim işaretine tıklayarak , açılan takvimden tarih seçebilirsiniz. Ayrıca Min ve Max parametreleriyle seçimi iki tarih arasında kısıtlayabilirsiniz. Örneğin 20 Haziran 1982 ile 20 Haziran 2024 arasında bir işe giriş tarihi seçelim... Min ve Max değrleri yazılırken YIL - AY - GÜN şeklinde yazılmalıdır :
min="1982-06-20" , max="2024-06-20" gibi...
<form>
İşe gİrişTarihiniz:<br>
<input type="date" name="d_tarih" min="1982-06-20" max="2024-06-20">
<input type="submit" value="GÖNDER">
</form>
Yukarıdaki örnekte , seçilen tarih belirlenen tarihler arasında değilse, form onaylandığında tarih uyarısı verir ve form gönderilmez..
INPUT type DATETIME-LOCAL
Date girişinden farklı olarak , tarih ile beraber saat seçiminide sağlar. Tarayıcı desteğine göre kutunun sağında takvim ve saat açılmasını sağlar. Örneğin doğum zamanı seçelim..
<input type="datetime-local" />
<form>
Doğum Zamanı:<br>
<input type="datetime-local" name="d_tarih">
</form>
Yukarıdaki "Doğum Zamanı" alanına doğrudan tarih ve saat yazabileceğiniz gibi , sağdaki takvim işaretine tıklayarak , açılan takvimden tarih ve saat seçebilirsiniz.
INPUT type COLOR
Renk seçmek için "color" tinput tipini kullanıyoruz..
<input type="number" />
<form>
Favori Renginiz:<br>
<input type="color" name="renk">
</form>
Yukarıdaki "renk" alanını tıkladığınızda , renk seçebilmeniz için bir renk paleti görünecektir..
INPUT type IMAGE
IMAGE giriş tipi , bir resmin formu göndermek için onay butonu (submit) olmasını sağlar. Bunun için input etiketi içerisinde tıpkı IMG etiketinde kullandığımız parametreleri yazarız ; src , width, height, alt vs...
<input type="image" />
<form>
Kullanıcı Adınız:<br>
<input type="text" name="k_adi"> <br><br>
<input type="image" src="resim/ok.png" width="50" heght="20" alt="resim" title="GÖNDER">
</form>
Yukarıda OK işaretine tıklandığında , form gönderilecekt.r. ANcak action boş olduğu için ,sayfa yenilenir...
INPUT type MONTH
AY ve YIL seçmeyi sağlar...Tarayıcı desteğine göre kutunun sağında ay ve yıl bilgilerinin açılmasını sağlar.
<input type="month" />
<form>
İşe Başlama:<br>
<input type="month" name="ise_baslama">
</form>
Yukarıda ay ve yılı seçmek için AŞAĞI ve YUKARI ok tuşlarını kullanabilir yada sağdaki takvim işaretine tıklayarak seçebilirsiniz...
INPUT type RANGE
Range aralık demektir.. Range tipi inputlar basit bir scroll (kaydırma) çubuğu ile beliri bir aralıkta sayı seçmemizi sağlar. İlk ve son derğerleri ile artım miktarı belirlenebilir.
min: minimum sayı (varsayılan=0)
max: maksimum sayı (varsayılan=100)
step : her kaydırmada artış miltarı (varsayılan=1)
<input type="range" />
<form>
Ses Seviyesi:<br>
<input type="range" name="ses" min="0" max="50" step="5">
</form>
Range ile oluşan scroll seviye çubuğu, yön tuşları ilede ayarlanabilir. Fom gönderildiğinde , o anki range değeri gönderirlir.
INPUT type SEARCH
Arama kutusu oluşturur .Aslında düz metin kutusundan farkı yoktur. Ancak sayfada hangi input alanının arama için kullanıldığının belirlenmesi için tercih edilir.
<input type="search" />
<form>
<input type="search" name="arama">
<input type="submit" value="ARA">
</form>
INPUT type TIME
Saat ve dakika seçmemizi sağlar. Kutu üzerinde doğrudan yazılabileceği gibi , kutunun sağındaki saat simgesiyle açılan seçiciden de seçilebilir.
<input type="time" />
<form>
Saat :<br>
<input type="time" name="saat">
</form>
INPUT type WEEK
Hafta ve yıl seçmemizi sağlar. Kutu üzerinde doğrudan yazılabileceği gibi , kutunun sağındaki saat simgesiyle açılan seçiciden de seçilebilir. Firefox , Safari ve IE 11'de desteklenmez..
<input type="week" />
<form>
Hafta:<br>
<input type="week" name="hafta">
</form>
INPUT type URL
URL içermesi gereken alanlar için kullanılır. Form gönderildiğinde url geçerliliği otomatik olarak kontrol edilir.
<input type="url" />
<form>
Web Siteniz:<br>
<input type="url" name="website"> <br><br>
<input type="submit" value="GÖNDER">
</form>
Yukarıdaki "Mail Adresiniz" alanına "@" işareti olmadan mail adresi yazıp GÖNDER butonuna tıkladığınızda , mail geçersiz uyarısı alacaksınız.. ,
ANDROID STUDIO - YEMEK TARİFLERİ MOBİL U...
PHP/MYSQL - Mini E-Ticaret Sitesi (Fener...
