Html - Form Input Tipleri

Bu derste <input> ogesinin farkli tiplerini inceleyecegiz,onceki derstede bahsettigimiz gibi bu(<input>) oge <form> etiketi icine yerlestirilir ve kullanicinin veri girecegi alanlari tanimlar.asagda bircok input tipi topluca gosterilmistir

input['type']=text
input['type']=password
input['type']=button
input['type']=submit
input['type']=reset
input['type']=checkbox
input['type']=radio
input['type']=hidden
input['type']=search
input['type']=tel
input['type']=url
input['type']=email
input['type']=datetime
input['type']=date
input['type']=month
input['type']=week
input['type']=time
input['type']=datetime-local
input['type']=number
input['type']=range
input['type']=color

Html - Form Input Type Text

Genel kullanim bicimi asagdaki gibidir,Text giris alani tanimlar.

<input type='text' name='isim'/>
ORNEK FORM:
<form>
  Isim:<br>
  <input type="text" name="isim"><br>
  Soyad:<br>
  <input type="text" name="soyad">
</form>
Isim:

Soyad:

Html - Form Input Type Password

Genel kullanim bicimi asagdaki gibidir,Sifre giris alani tanimlar,girilen karakterler ekranda gorunmez.

<input type='password' name='sifre'/>
ORNEK FORM:
<form>
  Isim:<br>
  <input type="text" name="isim"><br>
  Sifre:<br>
  <input type="password" name="sifre">
</form>
Isim:

Sifre:

Html-Form Input Type Button

Bir buton olusturmaya yarar,asagda butonlar icin kucuk javascript olaylari da eklendi.
<form action="#">
	<input type="button" name="buton_ismi1" value="Butonu Tikla" onclick="alert('Buton Tiklandi!');" />

	<input type="button" name="buton_ismi2" value="Imleci Buraya Getir" onmouseover="alert('Imlec butonun ustune geldi');" />
</form>

Html - Input Type Hidden

isimden de anlasilacagi uzere bu input bir isme ve degere sahip olmasina ragmen formda gorunmeyecek(kaynak kodda gorunur).fakat form gonderildiginde sahip oldugu degeri tasiyacak.
Buna gerek duyulur mu? Evet duyulur,bazen programci kendisine yardimci olacak bazi bilgileri burda sayfalar arasinda tasiyabilir.
 <input type="hidden" name="isim" value="deger">

Html - Form Input Type Submit

Genel kullanim bicimi asagdaki gibidir,icinde bulundugu formu belirtilen dosyaya gonderir.(form'un action niteliginde belirtilen dosyaya)

<input type='submit' value='Formu Gonder'/>
ORNEK FORM:
<form action="../test/form_kontrol.php">
  Isim:<br>
  <input type="text" name="isim"><br>
  Sifre:<br>
  <input type="password" name="sifre"> <br>
  <input type="submit" value="Formu Gonder"/>
</form>
Isim:

Sifre:

Html - Form Input Type Reset

Form ogelerini varsayilan ilk degerlerine getirir.
<form action="#" >
  Isim:<br>
  <input type="text" name="isim" value="isim" /><br>
  Sifre:<br>
  <input type="password" name="sifre">
  <br><br>
  <input type="submit" value="Formu Gonder"/>
  <input type="reset" value="Resetle"/>

</form>
Isim:

Sifre:


Html - Form Input Type Radio

Belirlenen seceneklerden sadece birinin secilmesine imkan tanir. (Test sorulari gibi.)
<form>
En Cok Sevdiginiz Ders?<br>
<input type="radio" name="ders" id="d1" value="tarih"/>Tarih<br />
<input type="radio" name="ders" id="d2" value="sosyal"/>Sosyal<br />
<input type="radio" name="ders" id="d3" value="fen"/>Fen<br />
<input type="radio" name="ders" id="d4" value="matematik"  checked="checked" />Matematik<br />
</form>
En Cok Sevdiginiz Ders?
Tarih
Sosyal
Fen
Matematik

Html- Form Input Type checkbox

Onay Kutulari
Radio dugmelerinin aksine seceneklerden birden fazlasini isaretleyebiliriz.
<form>
			<br>Hangilerini Seviyorsunuz!<br/>
			<input type="checkbox" name="program1" value="PHP"/>PHP<br />
			<input type="checkbox" name="program2" value="ASP"/>ASP<br />
			<input type="checkbox" name="program3" value="JAVA"/>JAVA<br />
			<input type="checkbox" name="program4" value="LINUX"/>Linux<br />
			<input type="checkbox" name="program5" value="Photoshop"/>Photoshop<br />
</form>

Hangilerini Seviyorsunuz!
PHP
ASP
JAVA
Linux
Photoshop

Html - Form Input Type Number

number Belirlenen aralikta sayisal veri girme olanagi sunar.(destek varsa)

Dogum Yiliniz? <br>
<input type="number" name="dogumtarihi" min="1923" max="2017">
<input type="submit" value="Gonder">
Dogum Yiliniz?


Giris Kisitlamalari,bazilari html5 ile geldi
  • disabled Girdi alanini pasif yapar.
  • max Olabilecek enbüyük deger
  • min Olabilecek enkucuk deger
  • maxlength Maksimum karakter sayisi
  • readonly Girdi alani sadece okunabilir
  • pattern Bu girdi alaninin denetimini yapacak düzenli ifade
  • value Varsayilan deger
  • required Doldurulmasi zorunlu alan
  • step ornekteki gibi , adim araligi
  • size Girdi alaninin genisligi(karakter sayisi esas alinir)

Html -Form Input Type Color

Gorsel olarak Renk secebilme olanagi sunar.(destek varsa)
<form action="#">
  Bir Renk Seciniz: <br>
  <input type="color" name="renk" value="#ff00cc">

  <input type="submit" value="gonder">
</form>
Bir Renk Seciniz:

Html -Form Input Type Date

Tarih secme islemi saglar(destek varsa)

 Dogum Tarihi: <br>
  <input type="date" name="tarih">
Dogum Tarihi:

Html - Form Input Type Range

istenilen aralikta bir deger secme olanagi saglar(destek varsa), ortalama bir konum secmek icin kullanilabilecegi gibi ek islemlerle tam degerlerde sectirilebilir.asagdaki ornek yapilan secimi gostermek icin output kullaniyor.
<form oninput="sonuc.value=secim.value">
  <input type="range" name="secim" min="1990" max="2016" step="2">
  Secim:<output name="sonuc"  for="secim"></output>
</form>
Secim:

Html - Form Input Type Month

Ay ve yil secme olanagi saglar.(destek varsa)
<form>
  Ay ve Yil seciniz <br>
  <input type="month" name="tarih">
</form>
Ay ve Yil seciniz

Html - Form Input Type Week

Yil ve haftanin numarasini iceren tarih secimi yaptirir.(destek varsa)
<form>
  Ay ve Yil seciniz <br>
  <input type="month" name="tarih">
</form>

Html - Form Input Type Time

Zaman secimi yaptirir.(destek varsa)
<form>
  <input type="time" name="zaman">
</form>

Html - Form Input Type datetime-local

datetime-local tarih ve zaman giris imkani sunar(destek varsa)
<form>
  <input type="datetime-local" name="tarih_zaman">
</form>

Html - Form Input Type Email

Bir e-posta adresi girme imkani sunar(destek varsa)

asagdaki ornekte uygun olmayan email girilip form gonderilmek istenirse bir uyari belirecektir
<form action="#">
  <input type="email" name="email">
   <input type="submit" value="Kaydet">
</form>

Arama islemi icin text tipine benzer giris alani sunar


<form>
  <input type="search" name="aranacak_kelime">
</form>

Html - Form Input Type Url

Url giris alani sunar(Mutlak URL)



Bu derse ait gorus ve onerilerinizi yada farkettigniz hatalari Lutfen bana bildirin!
birbyte.net@gmail.com