HTML FORMLAR - INPUT TİPLERİ

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.. ,