<form> </form>

Girilecek Kod	Görevi
action = "dosya ismi"	Formdan girilecek bilgilerin değerlendirileceği dosyanın tam yolu.
method = "yöntem"	Formdan girilecek bilgilerin değerlendirici dosyaya gönderilme yöntem

Formlar hazırlanırken çok değişik elemanlar kullanılır. Şimdi formumuza dahil edilebilecek elemanları kısaca tanıyalım. Tanımladığım elemanların etkin kullanımı için form etiketinin yorum aralığı içinde kullanılması gereklidir!. Bu elemanlar form etiketinin dışında da kullanılabilirlerse de istenen fayda sağlanamayacaktır. (Belgedeki etiket örnekleri böyledir, yani etkisizdir.)

Düğmeler

3 tür düğme vardır.

Gönderme düğmeleri

Tıklandığında formu gönderir. Bir form üzerinde birden fazla gönderme düğmesi bulunabilir.

Sıfırlama düğmeleri

Tıklandığında formun içeriği başlangıç değerlerine döndürür.

Genel amaçlı düğmeler

Öntanımlı bir davranışa sahip olmayan düğmelerdir. Tıklandığında event parametresinde belirtilen betiği çalıştırarak bazı ek işlevlerin gerçekleştirilmesinde kullanılırlar.

Düğmeler ya doğrudan <button> etiketi kullanılarak ya da <input> etiketinde bir parametre olarak belirtilerek kullanılır. Daha fazla seçenek sağladığından doğrudan <button> etiketi kullanımı tercih edilir. Belirtildikleri etiketin type parametresinde bu 3 tür düğme sırasıyla submit, reset, button değerleri verilerek kullanılır.

Onay kutuları

Kare, içine tik bırakılan kutucukları oluşturmak için kullanılır. <input> etiketinde bir parametre olarak belirtilerek kullanılır.

Radyo düğmeleri

Sayfamıza yuvarlak işaret kutucuğu bırakmak için kullanılır. Kullanılan kutucuğun onay kutusundan farkı, sadece bir seçenek işaretlenebilmesidir. <input> etiketinde bir parametre olarak type="radio" belirtilerek ve ek olarak value ve name parametreleriyle birlikte kullanılır.

Menüler

Ziyaretçi bu menüden mevcut seçenekler arasından herhangi birini seçerek bilgi girişinde bulunur. Sayfamıza bu elemanı eklemek için <select> etiketini kullanırız.

Metin girişleri

Metin girdilerini almak için iki tür eleman kullanılır. <input> etiketinde bir parametre olarak type="text" kullanılarak tek satırlık ve <textarea> etiketi ile oluşturulan çok satırlı metin girdi elemanlarıdır.

Dosya seçim elemanları

<input> etiketinde bir parametre olarak type="file" kullanılarak oluşturulan elemanlardır.

Gizli elemanlar

<input> etiketinde bir parametre olarak type="hidden" kullanılarak oluşturulan elemanlardır.

Nesneler

<object> etiketi kullanılarak oluşturulan elemanlardır.

Şimdi tanımlanan elemanlarda belirtilen etiketlerin kullanımına bakalım.

Tablo 1.7. Input etiketi yardımcı kodları

Girilecek Kod	Görevi
type = "eleman türü"	Eleman türü belirtilir. text, password, checkbox, radio, submit, reset, file, hidden, image, button değerlerinden biri kullanılır. Etiketin bu değerlerle nasıl kullanıldığını aşağıda örnekleriyle açıklamaya çalıştım.
name = "isim"	Girilen verinin hangi değişken ismi altında değerlendirileceğini belirtmek için kullanılır. Mutlaka belirtilmelidir.
value = "değer"	"radio" ve "checkbox" dışında bu parametrenin kullanımı isteğe bağlıdır. Belirtilecek "değer" eleman türüne göre değişir.
size = "değer"	"text" ve "password" elemanlarında karakter sayısını, diğerlerinde ise piksel cinsinden genişliği belirtmek için kullanılır.
maxlength = "değer"	"text" ve "password" elemanlarında girilebilecek en çok karakter sayısını belirtmek için kullanılır. Öntanımlı değeri sınırsızdır.
checked = "değer"	Sadece "radio" ve "checkbox" elemanlarında seçili elemanı "on" olarak belirtmek için kullanılır. Diğerlerinde yoksayılır.
src = "dosya ismi"	"image" elemanında resim dosyasını belirtmek için kullanılır.
alt = "metin"	Fare eleman üzerindeyken balon içinde görünecek açıklama metni için kullanılır.
align = "left|center|right"	Elemanın form üzerinde nasıl konumlanacağını belirtmek için kullanılır.
readonly	Veri girme amacıyla kullanılmayacak elemanlar içindir.
disabled	Veri girişi engellenecek elemanlar içindir.

type parametresi ile belirtilebilecek eleman türleri:

text

Formumuza tek satırlık yazı yazılabilecek alan eklemek için kullanılır.

 

Adı: <input type="text" name="firstname"><br>
Soyadı: <input type="text" name="lastname">

 

Adı: Soyadı:

password

Formumuza parola yazılabilecek alan eklemek için kullanılır. "text" elemanından farklı olarak bu alana girilen her karakter * ile gösterilir.

Kullanıcı: <input type="text" name="username"><br>
Parola: <input type="password" name="password">

 

Kullanıcı: Parola:

checkbox

Formumuza onay kutuları eklemek için kullanılır.

 

<input type="checkbox" name="kutu1" checked="on"> HTML<br>
<input type="checkbox" name="kutu2"> PHP<br>
<input type="checkbox" name="kutu3"> MySQL

 

HTML PHP MySQL

radio

Formumuza radyo düğmeleri eklemek için kullanılır.

submit, reset, button, image

Formumuzda belirtilen bilgileri ilgili dosyaya yollamak için kullanılacak düğmeler yerleştirmek için kullanılır. Submit formu kabul eder ve yollar, reset ise girilen bilgileri sıfırlar. Button ve image herhangi bir amaçla kullanmak içindir. Diğer ikisi gibi öntanımlı bir davranışı olmayan, gerçekleştireceği eylem bir betikle tanımlanabilen düğmelerdir. Image ile oluşturulan düğme src parametresinde belirtilen dosyadaki düğme resmi kullanılarak oluşturulur. 

 

<form action="http://herhangibirsite.dom/prog/adduser" method="post">
    <p>
    Adınız: <input type="text" name="firstname"><br>
    Soyadınız: <input type="text" name="lastname"><br>
    Eposta adresiniz: <input type="text" name="email"><br>
    <input type="radio" name="cinsiyet" value="erkek" checked="on"> Erkek<br>
    <input type="radio" name="cinsiyet" value="disi"> Dişi<br>
    <input type="submit" value="Send"> <input type="reset" value="Sıfırla">
    </P>
 </form>

 

Adınız: Soyadınız: Eposta adresiniz: Erkek Dişi

file

Formumuza dosya ismi giriş alanı eklemek için kullanılır.

 

<input type="file">

 

<button> </button>

Düğmelerin input etiketiyle kullanımına benzer şekilde kullanılır. Ancak sonlandırıcı etiket içerdiğinden yorum alanında başka etiketlerin yeralabilmesi nedeniyle daha geniş bir kullanım alanı vardır. Yukarıdaki örneği button etiketi ile yazarsak farkları görebilirsiniz. 

 

<form action="http://herhangibirsite.dom/prog/adduser" method="post">
    <p>
    Adınız: <input type="text" name="firstname"><br>
    Soyadınız: <input type="text" name="lastname"><br>
    Eposta adresiniz: <input type="text" name="email"><br>
    <input type="radio" name="cinsiyet" value="erkek" checked="on"> Erkek<br>
    <input type="radio" name="cinsiyet" value="disi"> Dişi<br>
    <button name="submit" type="submit" value="submit">
      <img width="20" height="21" src="../images/belgeler-logo.gif"/>Gönder
    </button>
    <button name="reset" type="reset" value="reset">
      <img width="20" height="21" src="../images/belgeler-logo.gif"/>Sıfırla
    </button>
    </P>
 </form>

  

Adınız: Soyadınız: Eposta adresiniz: Erkek Dişi Gönder Sıfırla

(Bu örneği hakkıyla, Mozilla görüntülemektedir.)

<select> </select>, <optgroup> </optgroup>, <option> </option>

<select> etiketi seçim listesi oluşturmakta kullanılır. <option> etiketi ile liste öğeleri belirtilir. <optgroup> etiketi ise bu liste elemanlarını konularına göre gruplamakta kullanılır. Bir select etiketi en azından bir option etiketi içermeli ve optgroup etiketleri iç içe olmamalıdır.

Tek veya çok seimli (multiple parametresi ile), sabit (size parametresi ile) veya aşağıya açılan listeler oluşturulabilir.

Tek seçimli aşağıya açılan liste örneği:

 

<select name="os_type">
<option value="win">Windows 9x</option>
<option value="winnt">Windows NT</option>
<option value="linux">Linux</option>
<option value="unix">UNIX</option>
<option value="os2">OS/2</option>
<option value="macos">MacOS</option>
</select>

 

Windows 9x Windows NT Linux UNIX OS/2 MacOS

Çok seçimli (ctrl+farenin sol tuşu ile) liste örneği:

             

<select name="menu" multiple>
  <option selected="" value="none">Hiçbiri</option>
  <optgroup label="Çorbalar">
    <option value="c1">Tarhana</option>
    <option value="c2">Ezogelin</option>
    <option value="c3">İşkembe</option>
  </optgroup>
  <optgroup label="Yemekler">
    <option value="y1">İmambayıldı</option>
    <option value="y2">Sultanbeğendi</option>
    <option value="y3">Kadınbudu</option>
  </optgroup>
  <optgroup label="Tatlılar">
    <option value="t1">Kazandibi</option>
    <option value="t2">Tavukgöğsü</option>
    <option value="t3">Keşkül</option>
  </optgroup>
</select>

 

Hiçbiri Tarhana Ezogelin İşkembe İmambayıldı Sultanbeğendi Kadınbudu Kazandibi Tavukgöğsü Keşkül

<textarea> </textarea>

İngilizce “metin alanı” anlamına gelen bu kelime formumuza yazı yazılabilecek alan eklemek için kullanılır. Yardımcı öğeler olarak rows ve cols kullanılır. Örnek aşağıdaki bölümde verilmiştir.

<fieldset> </fieldset>, <legend> </legend>

Form elemanlarını konularına göre gruplamak için kullanılan etiketlerdir. Formun alaşılırlığını arttırması ve kullanımını kolaylaştırması bakımından çok faydalıdır. <legend> etiketi gruplanmış elemanlara bir başlık oluşturur. Aşağıda bir hasta kartı örnek olarak verilmiştir.

 

<fieldset>
  <legend>Kişisel Bilgiler</legend><br/>
  Adı: <input name="personal_fname" type="text" size="20" tabindex="1"/>    
  Soyadı: <input name="personal_lname" type="text" size="25" tabindex="2"/><br/><br/>
  Adresi: <input name="personal_address" type="text" size="55" tabindex="3"/><br/><br/>
  <!-- ...diğer kişisel bilgiler... -->
 </fieldset>
 <fieldset>
  <legend>Tıbbî Geçmişi</legend><br/>
  <input name="gecirilen_hastalik"
         type="checkbox"
         value="bogmaca" tabindex="20"/> Boğmaca    
  <input name="gecirilen_hastalik"
         type="checkbox"
         value="kabakulak" tabindex="21"/> Kabakulak    
  <input name="gecirilen_hastalik"
         type="checkbox"
         value="kizamik" tabindex="22"/> Kızamık    
 <input name="gecirilen_hastalik"
         type="checkbox"
         value="sucicegi" tabindex="23"/> Suçiçeği<br/><br/>

  <!-- ...tıbbi geçmişi ile ilgili diğer... -->
 </fieldset>
 <fieldset>
  <legend>İlaç Tedavisi</legend><br/>
  Halen kullanmakta olduğunuz ilaçlar var mı?<br/>
  <input name="medication_now"
         type="radio"
         value="Evet" tabindex="35"/> Evet    
  <input name="medication_now"
         type="radio"
         value="Hayir" tabindex="35"/>Hayır<br/><br/>

  Eğer ilaç kullanıyorsanız, aşağıya kullandığınız ilaçları ve
  günlük dozlarını belirtiniz:<br/>
  <textarea name="kullandigi_ilaclar"
            rows="10" cols="60"
            tabindex="40">
  </textarea>
 </fieldset>

 

Kişisel Bilgiler Adı:      Soyadı: Adresi: Tıbbî Geçmişi Boğmaca     Kabakulak     Kızamık     Suçiçeği İlaç Tedavisi Halen kullanmakta olduğunuz ilaçlar var mı? Evet     Hayır Eğer ilaç kullanıyorsanız, aşağıya kullandığınız ilaçları ve günlük dozlarını belirtiniz:

(Bu örneği hakkıyla, Mozilla görüntülemektedir.)

Örnek:
 

action: Formun gönderileceği adresi belirtir.
method="get":Formdaki bilgiler başka bir dosyaya gönderilecekse kullanılır.
method="post":Formdaki bilgiler bir adrese postalanacaksa kullanılır.
type="text" : Tek satırlık bir metin alanı açar.
size="" :Bu metin alanının boyutunu belirler.
type="checkbox" : Çok seçenekli bir sorunun birden fazla yanıtını almamızı sağlar.
type="radio" : Tek seçenekli bir sorunun tek yanıtı alınır.
type="submit" : formu action'la belirtilen dosyaya yönlendiren bir buton yaratır.
type="reset" :Bu butona basınca form boş hale gelir
type="password" : Bir password alanı olusturur. Buraya girilen her karakter * şeklinde görünür.
<textarea rows="" cols=""> :type="text" gibi tek satırlı değil de çok satırlı bir metin alanı istiyorsak bu etiketi kullaniriz. cols metin alanının uzunluğunu, rows ise yüksekliğini pixel cinsinden verir.

Listeleme:

Select ve option etiketlerini kullanarak seçimlik liste (menü) oluşturabiliriz. Option etiketi ile belirtilen her bir değer listenin bir elamanını oluşturur ve fareyle seçilen bu elemanlardan biri select etiketinde belirtilen değişkenin değeri haline gelir.

Örnek:
 

Alfa Romeo BMW Peugeot Renault Seat Lada

 

FORM TÜRLERİ

 

Aşağıda form türlerini ve kullanılışlarını görüyoruz:

 

text	maxlength: Yazılabilecek maksimum text uzunluğu value: varsayılan değer size: Px cinsinden alanın uzunluğu	<form> <input type="text" maxlength="10" size="12" value="isminiz?" </form>	<>
<input type="text"> Ziyaretçinin ismi, telefonu gibi kısa bilgilerini almak için kullanılır.
password	Tüm parametrleri text ile aynıdır.	<form> Lütfen şifre girin:<br> <input type="password" maxlength="10" size="12"> </form>	Lütfen şifre girin:
<input type="password">   Şifre almak için kullanılır, yazılan karakterler ekranda '*' şeklinde görüntülenir
textaraea	rows : Alanın karakter cinsinden yüksekliği cols : Alanın genişliği	<form> <textarea cols="12" rows="4">Burası bir textarea!</textarea> </form>	Buras? bir textarea!
<textarea >...</textarea>   Text kutusuna sığmayacak uzun bilgileri, mesela ziyaretçinin sayfa ile ilgili düşüncelerini almak için kullanılır.
checkbox	checked: sayfa açıldığında 'checked' ibaresi bulunan kutu işaretli olur.	<form> <input type="checkbox" checked>seçenek 1 <input type="checkbox">seçenek 2 </form>	seçenek1 seçenek2
<input type="checkbox> Ziyaretçiye, verilen seçeneklerden birini, birkaçını veya hepsini seçme imkanı verir.
radio	checked: sayfa açıldığında 'checked' ibaresi bulunan daire seçilmiş olur.	<form> <input type="radio" name=sec">seçenek1<br> <input type="radio" name= "sec"checked>seçenek2<br> <input type="radio" name="sec">seçenek2 </form>	seçenek1 seçenek2 seçenek2
<input type="radio"> Ziyaretçiye, verilen seçeneklerden sadece birini seçme imkanı verir.
select	size: Select etiketinin karakter cinsinden boyutu selected: Görevi checked ifadesinin ayn?d?r. multiple: Ziyaretçinin birden çok seçim yapmasına olanak verir	<form> <select size= "1"> <option selected>seçenek1 <option>seçenek2 <option>seçenek3 </select>
<select><option>...<option>...</select> Ziyaretçiye seçeneklerden birini veya (multiple ifadesi ile) birkaçını seçme imkanı verir.
submit	value: Butonun üzerine yaz?lacak metin buraya yazılır	<form> <input type="submit" value="Gönder"> </form>
<input type="submit> Ziyaretçi doldurduğu formu bu düğmeye basarak gönderir
reset	value: Butonun üzerindeki metin	<form> <input type="reset" value="Sil"> </form>
<input type="reset" > Ziyaretçinin doldurdu?u formda, ziyaretçinin yazd??? her ?eyi siler.
button	value: Butonun üzerindeki metin	<form> <input type="button" value="Dü?me"> </form>
<input type="button> Dü?melere JavaScript ile baz? i?levler kazand?r?labilir.

 

Tabloda belirtmedik ama form elemanlar?nda daha önceden bildi?imiz  name parametresi de kullan?labilir.

 

12/2. <FORM> ET?KET?

??te <form> etiketinin parametreleri ve bunlar?n i?levleri:

 

method	'Get' veya 'post' de?erlerini alabilir. Method parametresinin de?eri formu gönderece?iniz CGI program? aç?s?ndan önemlidir. E?er CGI kodlar? yazmay? bilmiyorsan?z, birçok servis sa?lay?c? size form'lar?n?z?n sonuçlar?n? e-mail'inize gönderme imkan? verir. E?er böyle bir hizmetten yararlanacaksan?z 'post' metodunu seçmelisiniz.
<form method= "post>
action	Formu gönderece?iniz CGI program?n?n adresini action parametresiyle bildirirsiniz. E?er yukar?da bahsedilen hizmetten yararlanmak istiyorsan?z, servis sa?lay?c?n?zdan bu program?n adresini ö?renmelisiniz. Örne?in bu adres 'freeservers' için '/cgi-bin/cgiemail' 'dir.
<form method="post" action= "/cgi-bin/cgiemail">

 

---

12/3. FORM UYGULAMASI

A?a??daki örnekte bütün form unsurlar?n?n kullan?m?n? göreceksiniz. Bu örne?i önce parça parça kendiniz yapmaya çal???n, gerekti?inde a?a??da verilen kodlardan yararlan?n...

Bu siteye not verin!

Kullan?c? ismi

Parola

Cinsiyet EK

Bildi?iniz Uygulamalar

 

Sitenin içeri?i

5, Çok zengin!
4, Fazlas?yla yeterli
3, Yeterli
2, Yetersiz
1, Çok k?s?tl?

Sitenin tasar?m?

<>

 

---

<form name="anket"> <p><h3>Bu siteye not verin!</h3></p> <p><b>Kullan?c? ismi</b>  <input value="Buraya yaz?n!"></p> <p><b>Parola</b> <input type="password" maxlength="10"></p> <p><b>Cinsiyet</b> E<input type="Checkbox">K<input type="Checkbox"> <p>Bildi?iniz Uygulamalar</p> <p><select size="4" multiple> <option>HTML <option>JavaScript <option>Css <option>Asp </select></p><br><br> <p><b>Sitenin içeri?i</b></p> <p><input type="radio" name="not" value="5">5, Çok zengin!<br> <input type="radio" name="not" value="4">4, Fazlas?yla yeterli<br> <input type="radio" name="not" value="3" checked>3, Yeterli<br> <input type="radio" name="not" value="2">2, Yetersiz<br> <input type="radio" name="not" value="1">1, Çok k?s?tl? <br></p> <p><b>Sitenin tasar?m?</b></p> <p><select> <option selected>Harika! <option>Oldukça iyi <option>?yi <option>?dare eder <option>Berbat</option> </select></p> <p><input type="submit" value="gönder"><input type="reset" value="sil" </form>

HTML bölümünün burada sonuna geldik. Fakat tek ba??na HTML, ço?u zaman istedi?imiz gibi sayfalar yapabilmek için yeterli olmaz. Art?k internet'te yeralan sayfalar?n hemen hepsinde JavaScript kullan?lmaktad?r. A?a??daki link size daha dinamik sayfalar yapma olana?? sunan JavaScript bölümüne götürecektir.

Metin Kutusu

<input type="text" name="a1" value="test" maxlength="3" />

?ifreli Giri?

<input type="password" name="a2">

Seçim Kutucular?

<input type="checkbox" name="a3">
<input type="checkbox" name="a3" checked>

<input type="radio" name="a4"><input type="radio" name="a4">

Formu Gönder 
Dü?mesi

<input type="submit" value="Formu Yolla" />

Formu Temizle

<input type="reset" value="Formu Temizle" />

Dosya Yolla

<input type="file" value="Dosya Gönder" />

Gizli De?i?ken

<input type="hidden" value="145" />

Resimli
Formu Gönder 
Dü?mesi

<input type="image" src="res2.png" width="100" height="50"/>

<input type="button" value="T?kla" />

Seçim Kutusu

<select name="begeni">
   <option value="10">Çok Be?endim</option>
   <option value="8">Be?endim</option>
   <option value="6">Güzel</option>
   <option value="5" selected>Normal</option>
</select>

<select name="begeni">
   <optgroup label="Be?endinizse">
     <option value="10">Çok Be?endim</option>
     <option value="8">Be?endim</option>
     <option value="6">Güzel</option>
     <option value="5">Normal</option>
   </opt group>

   <optgroup label="Be?enmedinizse">
     <option value="4">?dare Eder</option>
     <option value="3">Güzel De?il</option>
     <option value="2">Kötü</option>
     <option value="1">Berbat</option>
   </opt group>
</select>

Çoklu Gruplu
Select Kutusu

<select name="menu" size="10" multiple>
  <option selected="" value="none">Hiçbiri</option>

  <optgroup label="Çorbalar">
    <option value="c1">Tarhana</option>
    <option value="c2">Ezogelin</option>

    <option value="c3">??kembe</option>

  </optgroup>
  <optgroup label="Yemekler">
    <option value="y1">?mambay?ld?</option>
    <option value="y2">Sultanbe?endi</option>
    <option value="y3">Kad?nbudu</option>

  </optgroup>
  <optgroup label="Tatl?lar">
    <option value="t1">Kazandibi</option>
    <option value="t2">Tavukgö?sü</option>
    <option value="t3">Ke?kül</option>

  </optgroup>

</select>

<textarea name="metinkutusu" cols="40" rows="3" ></textarea>

<fieldset>
   <legend>Text Area Elaman?</legend>   
    <textarea name="metinkutusu" cols="40" rows="3" ></textarea>
</fieldset>

Kaynak www.belgeler.org/hpm/html-php-mysql-giris_prg-html_form.html , www.bidb.odtu.edu.tr/index.php , www.htmldersleri.org/htmlders12.htm