Html - Form /Input Nitelikleri

Kullanim Aciklama
value input icin ilk deger atamasi yapar
<input type="text" name="ders" value="JavaScript" />
size Giris alaninin karakter cinsinden boyutu
<input type="text" size_'30' />
maxlength Girilebilecek maksimum karakter sayisi
<input type="text" maxlength="15"/>
placeholder input alani icin yardimci/ipucu text goruntuler,focus islemiyle kaybolur
<input type="text" name="isim" placeholder="isminizi giriniz">
readonly sadece okunabilir alan,giris alani degistirilemez
<input type="text" value='css' readonly/>
disabled Giris alani devre disi
<input type="text" value='css' disabled/>
autofocus Sayfa yuklenince bu ogeye focuslan.
<input type="text" value='css' autofocus/>
multiple Farkli form elemanlarinda kullanilabilir,(select,file gibi) Birden fazla secim yapmayi saglar,Ctrl tusuna basarak test edebilirsiniz.
<input type="file" name="img" multiple>

<select name="dersler" multiple> ...
step Number tipinde bir input icin step degeri belirtilirse,step degeri kadar artarak ilerleyerek secim yaptirir.

<input type="number" name="adim" step="5"> br


Html Form autocomplete

Daha once yazdiğmiz form verilerinin hatirlanarak sonraki girislerde yardim icin gosterilip gosterilmeyecegi ile ilgilidir.(otomatik tamamlama ozelligi)
Asagida autocomplete="on" kullanimiyla formdaki elemanlar icin otomatik tamamlamaya izin verdik,fakat soyadi alani icin otomatik tamamlamayi devre disi biraktik(autocomplete="off")
<form action="#" autocomplete="on">
  Adı:<input type="text" name="fname"><br>
  Soyadı: <input type="text" name="lname" autocomplete="off"><br>
  <input type="submit" value="Gonder">
</form>


Html Form - formaction

Normalde form icinde yer alan submit butonu formu , formun action niteliginde belirtilen hedefe gonderir bunu biliyoruz,asagdaki kullanimda form icinde yer alan submit tipindeki bir butona formaction degeri atanarak bu buton tiklaninca bu formu buraya gonder demis oluyoruz.

<form action="#">
  Adı:<input type="text" name="fname"><br>
  Soyadı: <input type="text" name="lname" autocomplete="off"><br>
  <input type="submit" value="Bu sayfaya Gonder"> 
  <input type="submit" value="html index sayfasina gonder" formaction="index.php">


</form>


Html Form - formenctype

asagidaki formda 2 adet submit butonu yer aliyor birtanesi varsayilan enctype degeriyle yani(application/x-www-form-urlencoded) formu sunucuya gonderiyor digeri multipart/form-data degeriyle formu post ediyor,

sunucuya bir dosyanin normal form bilgisiyle beraber geldigini enctype="multipart/form-data" ile soyleriz.
<form action="#" method="post">
  isim: <input type="text" name="isim"><br>
  soyad: <input type="text" name="soyad"><br>
  <input type="submit" value="Varsayilan sekilde gonder">
  <input type="submit" formenctype="multipart/form-data"
  value="multipart/form-data enctype degeriyle gonder">
</form>


Html Form - formmethod

Bu kullanimda ise Formun gonderilme bicimine etki yapabiliriz.(get yada post)

<form action="#" method="get">
 isim: <input type="text" name="isim" /><br>
 soyad: <input type="text" name="soyad" /><br>
  <input type="submit" value="Gonder" />
  <input type="submit" formmethod="post" value="Post ile gonder" />
</form>
yukardaki orneklerde oldugu gibi burda da 2.submit butonu oncekini devredısı bırakır,hatta bu butonda formaction degeride kullanarak formu varsayilan degerden farkli hedefe gonderebiliriz.

Html Form - formtarget

Form gonderildikten sonra alinan cevabin nerde goruntulenecegini ayarlayabiliriz.
<form action="#" method="get">
 isim: <input type="text" name="isim" /><br>
 soyad: <input type="text" name="soyad" /><br>
  <input type="submit" value="Gonder" />
  <input type="submit" formtarget="_blank" value="cevabi yeni pencerede goruntule">
</form>


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