Html - Formlar Giris

<form> kullanicidan veri almak icin kullanacagimiz html etiketidir. Herhangi bir siteye giris yaparken genelde kullanici adi ve sifre kullaniriz,iste sitelerin bu alanlari formlar icin klasik bir ornektir. Asagida ki form ornegini incelermisiniz?

Kullanici Adi:

Sifre:
<form>
	Kullanici Adi: <br><input type="text" name="isim" id="isim" /><br>
	Sifre:<br><input type="password" name="sifre" id="sifre" />
</form>

  • 1-Formun tum elemanlarini kapsayacak<form> etiketiyle ise basladik
  • 2-Kullanici Adi text turunde bir veri oldugu icin tipi text olan bir input olusturduk
  • 3-Kullanici sifre girecegi icin tipi password olan bir input olusturduk (veri girisi yaparsaniz karakterler ekranda gorunmeyecektir)
  • 4-ilk asamada zorunlu olmasada giris verilerimize isim ve id atadik,ayni degerde olmasi sorun degil

<input type="uygun_tip" name="isim" />
Input elementinin kullanicidan bilgi alirken bilgi turune gore type degeride degisecektir. yukarda isim icin text,sifre isin password belirledik.

Html - Input Type Radio

Bir siteye uye olurken Cinsiyet bolumunde Kadin/Erkek gibi 2 secenek oldugnu gormussunuzdur. uye olan kisi sadece 1 tanesini sececektir.iste radio butonlar bunun gibi durumlarda isimize yarayacaktir. (belirlenen seceneklerden 1 tanesini secebiliriz)

<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


  1. Tum ogeler form elemani icinde
  2. input elementlerinin type degeri radio olarak atandi
  3. Sunulan seceneklerin hepsinin name degerleri ayni!!
  4. Ekranda gorunen Text'lerden ayri olarak her ogenin ekranda gorunmeyen value degerleri var!! Form post edildiginde bu bilgiler kullanilacak
  5. Eger istersek seceneklerden birtanesine checked="checked" niteligini vererek ilk secimi yapabiliriz
  6. Radio buttonlari tiklarsaniz sadece birinin secilebildigni goreceksiniz.

Html - Input Type Hidden

isimden de anlasilacagi uzere bu input bir isme ve degere sahip olmasina ragmen formda gorunmeyecek.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 - Input Type Submit - Form Action

Yukardaki orneklerde guzel form yaptik yapmasinada ne olacak bu form?
tabiki biyerlere gonderilmeli oyle degilmi. simdiki input bicimi bu formu gonderme gorevi gorecek.
<form action="form_kontrol.php">
	Kullanici Adi: <br><input type="text" name="isim" id="isim" /><br>
	Sifre:<br><input type="password" name="sifre" id="sifre" />
	<input type="submit" value=" Formu Gonder" />
</form>
Kullanici Adi:

Sifre:

  1. Yeni bir buton tipi submit icinde bulundugu formu gondermeye yariyor,submit butonunun value degeri ekranda gorunen deger!
  2. Submit butonu formu nereye gonderecek? tabiki form'un action niteliginde belirtilen dosyaya
    <form action="form_kontrol.php">
  3. Gonderilen sayfa genelde sunucu tarafinda calisan bir dosyadir(php,asp gibi)
  4. Gonderilen sayfa bilgileri kontrol eder,gelen bilgiler eksikse/yoksa/ kullaniciyi uyarir.
Form icin action belirtilmezse bilgiler gecerli sayfaya gider(ayni sayfaya).

Html - Form Method Atrribute

method niteligiyle formun gonderilme bicimini(GET,POST) belirtebiliriz.
<form action="kontrol.php" method="get">
yada
<form action="kontrol.php" method="post">
Yukardaki formda method bilgisi yazmadigimiz halde form gonderilebildi,cunku varsayilan deger get kullanildi.

Html - Form method GET

  1. Form gonderilirken varsayilan yontem oldugunu yineleyelim
  2. Bu yontemle gonderilen veriler tarayici adres alaninda gorunur
  3. Bu yontem kucuk boyutta ve cokda hassas/gizli olmayan veriler icin tercih edilebilir
Yukardaki formu tekrar inceleyelim,isim ve sifre yazip formu gonderirmisiniz?
<form action="form_kontrol.php">
	Kullanici Adi: <br><input type="text" name="isim" /><br>
	Sifre:<br><input type="password" name="sifre" />
	<input type="submit" value=" Formu Gonder" />
</form>
Kullanici Adi:

Sifre:


Muhtemelen gelen sayfada gonderdiginiz bilgiler size gosterilecek. simdi yukardaki adres kismina bakarsaniz
.../form_kontrol.php?isim=Ahmet&sifre=16gf87
seklinde gorunen bir yapi olmasi lazim.
  • Burada gonderdiginiz form verilerinin oldugunu goreceksiniz.
  • form'da input elemanlarina verdigimiz isimlerin(name='isim') degerlerle eslestigide gorunecektir
  • input'un name degerini silip formu gonderirseniz , name degerleri olmayan girdiler gonderilmeyecektir(adres cubuguna bakabilirsiniz)
  • Submit butonu sadece gonderme islemi gordugu icin ona name atamadik,bu butonada name degeri atayip test yapabilirsiniz

Html - Form method POST

  • Form verileri gizlilik iceriyorsa yada GET ile gonderilmeyecek kadar fazla bilgi iceriyorsa POST tercih edilmelidir.
  • POST ile gonderilen veriler adres cubugunda gorunmez

Sanirim buraya kadar formlarin genel kullanimi hakkinda yeterli bilgiye sahip olduk,birkac form elemani ogrendik ve hemen ardindan GET / POST deyimlerinin nasil kullanildigindan bahsettik.Konunun butununu gorebilmeniz acisindan(bir suru form ogelerini isin icine sokmadan) temel kullanimi gorduk.input tiplerinden bahsettigimiz baska dersimiz var onun icin asagda diger form ogelerini anlatmaya calistim,simdi devam edelim

Html - Form Select

select acilir liste tanimlamamizi saglar

<form>
			<select name="ilgi_alani">
				<option value="php">PHP ve Mysql</option>
				<option value="aspx">Aspx</option>
				<option value="java">Java</option>
				<option value="android" selected="selected">Android</option>
			</select>
</form>

Yukarda selected niteligni kullanmasaydik ilk option degeri varsayilan olarak gorunecekti

<select size="2">
Simdi kodu coklu secim icin yeniden yazalim
<form>
			<select multiple="multiple" size="3">
				<option value="php">PHP ve Mysql</option>
				<option value="aspx">Asp</option>
				<option value="java">Java</option>
				<option value="android">Android</option>
			</select>
</form>

Html - Form Textarea

Textarea input gibi tek satirlik girdi alani degilde cok satirli text giris alani tanimlar


rows Metin alaninin satir yuksekligi
cols Metin alaninin genisligi

Yukardaki textarea elementine asagdaki css uygulandi,cunku bu alaninin genisliginin kullanici tarafindan degistirilmesi istenmedi.(resize:none degeri kullanilsaydi genislik ve yukseklik kullanici tarafindan degistirilemeyecekti)
textarea{
		resize:vertical;
	}

Html - Form Datalist

input ogesi icin onceden tanimlanmis ve otomatik tamamlama amaciyla kullanilacak listeyi tanimlar. (input'un list degeri ile datalisti'in id degeri ayni)
<form action="#">
  <input list="guvenlik">
	  <datalist id="guvenlik">
	    <option value="Eset">
	    <option value="Avast">
	    <option value="Avira">
	    <option value="Bitdefender">
	    <option value="Panda">
	  </datalist> 
</form>

Html Form Keygen

keygen elemani kullanicinin kimlik denetimi icin kullanilir. Kullanildigi form uzerinde bir anahtar-deger ureticisi olusturur. ve bu deger form gonderildiginde action'da belirtilen hedefe de gider.
<form action="keygen.php" method="post">
   isim <input type="text" name="isim"> <br>
   Kod <keygen name="guvenlik"> <br>
  <input type="submit">
</form>
Asagda uretilen ornek bir kod bulunuyor

MIICQDCCASgwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQDKs0KQXkWX sB8KevbOp3m8KZjj6y2vc5yv3O0Kr3x7JW+MgJU98P/0VA/MOyJmpQI9RmjRyltD P47eECSezDRZKQEjjWhHXXBi+IRDE8vfE7TagmFQH1/+VxlU+Q2Y9qkx+XuBlTbV FgtW+Lgl70nEk6jQJ4GHSSbrCYnxcfehuTM3qJlAMEA3q0oTgJiR6ZBMHXlhVJwj EE0/KhLmAREVvrA1cNhs75g3i1Y6x00wjZGLFNcZ5+t2baHHKf6s8hYOdC0ApURa MXXFnNvWjSGbVqGHtYB9Am43o22AU4oKH5G/BA0sTLRP+NlXyu4RNMvYPIx4uM7Z ZDuyaXC7MOXhAgMBAAEWADANBgkqhkiG9w0BAQQFAAOCAQEAiMCq/H4kli32a4Jl +yH/CADhe1IrgSEKosfS7dnml0cLSifcq6d0N4EtJA7UE+q2x8bONyxBAWDG6i41 nwNgQBsCzUIiKU6RgOjx1TFAVwmtnF3treg8K5RZRxqAmo8BUPQatxEFlkNMw7UO zqe3bq/ELuRAaJ7Mrz6FKEhrYJz5rwh+YmrXoRoQVeTqiNz7RKYyRhZ0XeHPKD7Z +WJrxDGaj9UTPWR8F8fgSd9MuTn4sAoUqZmLSeIgr1NkA93ceHVAau/JCL9abrft 6UJM/UoMNHCJ7gafdeCdA407jKNTm1923cHNQI8U12zsIItlisirM9pLdpGj/6qd e5E60Q==

Html - Form Output

output ogesi ile bir hesaplamanin sonucunu (yada kullanicinin hareketiyle olusmus bir islem sonucunu) yansitabiliriz.

<form oninput="fark.value=Math.abs(parseInt(sayi1.value)-parseInt(sayi2.value))">
	Sayi1=<input type="text" name="sayi1" value="1500" > <br>
	Sayi2=<input type="text" name="sayi2" value="500"> <br>

	Fark=<output name="fark" for="sayi1 sayi2"></output>
</form>
Sayi1=
Sayi2=
Fark=
Sayilari degistirerek test yapabilirsiniz
keygen,oninput,datalist
bunlar yeni elementler oldugu icin bazi tarayicilarda destek sorunu olabilir,bu dersin hazirlandigi donemde keygen daha cok problemliydi.

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