HTML FORM OLUŞTURMA

Artık formlarla birlikte dinamik web tasarımına ilk adımı atmış oluyoruz. FORM sizin web tasarımcısı olarak sayfanıza koyacağınız ve içinde ziyaretçinin dolduracağı boşluklar veya ziyaretcinin yapacağı tercihleri belirteceği kutular bulunan ve en sonunda bu bilgileri size göndereceği bir buton bulunan bir websayfasıdır. FORM, bir sayfanın içinde bir bölüm olabileceği gibi, başlıbaşına bir sayfada olabilir. FORM, ziyaretciye "girdi" yapma imkanı verebilir. FORM, düz bir metin olabilir; resimlerle süslenmiş olabilir. Ne kadar işlenmiş olursa olsun, formlar da bütün HTML etiketleri gibi bir etiketle başlar ve biter. Şimdi bu bölümde <form> ... <form> etiketinin arasını doldurmayı öğrenelim.

HTML ACTİON VE METHOD ÖZELLİĞİ

Method özelliği, form verilerinin sunucuya gönderilme yöntemini belirtir. HTML form verileri GET ve POST olmak üzere iki şekilde sunucuya gönderilebilir. GET yönteminde form verileri isim-değer çifti olarak action özelliği ile belirtilen adrese sorgu olarak eklenip sunucuya gönderilir. POST yönteminde ise veriler, HTTP isteği (HTTP Request) içinde bir veri paketi olarak gönderilir. POST yöntemi ile sunucuya gönderilebilecek veri miktarı hakkında teorik olarak bir limit yoktur.

Action özelliği, FORM verilerinin gönderileceği adresin belirtilmesini sağlar. Kullanıcı, submit düğmesine bastığında veriler, method özelliği ile belirtilen yöntemle bu adrese gönderilir.

<form action="test.php" name="test" method="post">
.........
</form>

HTML <input> etiketi, sunucuya veri göndermek için kullanılacak farklı tiplerde form giriş kontrollerinin oluşturulmasını sağlar. Oluşturulan bu form kontrolleri sunucuya veri gönderecekleri için mutlaka name özelliklerinin belirtilmesi gerekir. Oluşturulabilecek form giriş kontrollerinin type özelliğine atanabilecek değerleri aşağıda listelenmiştir.

• text
• password
• checkbox
• radio
• submit
• reset
• file
• hidden
• image
• button

İNPUT TEXT

Aşşağıda HTML input etiketi kullanılarak üç tane metin kutusu (textbox) oluşturulmasını göstermektedir. Metin kutusu üçüncü şekilde oluşturulduğunda value özelliği ile belirtilen değer varsayılan değer olarak kabul edilerek formun sıfırlanması (reset) durumunda bu değer tekrar kontrole atanır.

<form>
Adınız: 
<input type="text" name="isim">
<br>
Soyadınız: 
<input type="text" name="soyad">
<br>
web-adres: 
<input type="text" name="adres" value="webcebir.com">
<br>
</form>
</pre>
<div class="kutu">
Adınız: 
<input type="text" name="isim">
<br>
Soyadınız: 
<input type="text" name="soyad">
<br>
web-adres: 
<input type="text" value="webcebir.com">

</form>

İnput etiketinin bazı parametrelerine bakalım

TYPE: Veri alanı tipini tanımlar. Text, checkbox, reset, radio, submit, password, image, file, hidden, button, range, scribble gibi değerler alabilir. Default değeri "text" dir. Biraz sonra ayrıntıları açıklanacaktır.

NAME: Veri alanının adı. Programlama dilindeki değişken_adı yerine geçer. CGI scriptine gönderilecek veriyi tutacak değişkenin adıdır. Formu yazan dilediği adı verebilir. Yukarıdaki örnekte NAME="isim" nitelemesi yapılmıştır. Dolayısıyla bu veri alanının adı "isim" olmuştur. Mutlaka belirtilmelidir.

VALUE: Değişkene atanan ön-değer. Kullanıcı bu alana veri girince ön-değer yok olur. Yukarıdaki örnekte VALUE="webcebir.com" nitelemesi yapılmıştır. Ön-değer ataması zorunlu değildir; yani ön-değer konulmayacaksa VALUE parametresi kullanılmaz.

SIZE: "text" ve "password" elemanlarında karakter sayısını, diğerlerinde ise piksel cinsinden genişliği belirtmek için kullanılır.

CHECKED: Radio ya da checkbox seçeneğini ön-seçili kılmaya yarar

DISABLED: Veri alanını kullanıcı girişine kapatır.

SRC: Image belirleyen "%URL" adresini belirler.

İNPUT 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.

<form>

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

<br>

Parola: <input type="password" name="password">

</form>

İNPUT CHECKBOX

Bazen, birden çok seçeneğin seçilmesi istenebilir. Bu durumda, TYPE değeri olarak checkbox kullanılır

<form>

<input type="checkbox" name="kutu1" checked="on"> HTML<br>

<input type="checkbox" name="kutu2"> PHP<br>

<input type="checkbox" name="kutu3"> MySQL

</form>

İNPUT RADİO

HTML <INPUT type=radio> etiketi, birbirleri ile ilişkili fakat sadece birinin seçilebileceği radyo düğmesi (radio button / option button) oluşturulmasını sağlar.

Kullanıcıyı tek bir seçim ile sınırlandırmak için <INPUT type=radio> etiketi ile oluşturulacak birbirleri ile alakalı bütün radyo düğmelerinin name özelliklerinin aynı olması gerekir.

<form>

<input type="radio" name="okul" value="ilkokul"> İLKOKUL

<br>

<input type="radio" name="okul" value="ortaokul"> ORTAOKUL

<br>

<input type="radio" name="okul" value="lise"> LİSE

<br>

<input type="radio" name="okul" value="universite"> ÜNİVERSİTE

</form>

İNPUT SUBMİT

HTML <INPUT type=submit> etiketi, kullanıcının formu göndermesini sağlayan bir düğme (button) kontrolü oluşturulmasını sağlar.

Diğer buton kontrollerinden farklı olarak submit butonu oluşturulurken value değeri belirtilmediğinde tarayıcı otomatik olarak Submit, Gönder, Sorguyu Gönder vs. gibi tarayıcılara göre farklılık gösteren bir değer atar.

Submit düğmesine basıldığında içinde bulunduğu FORM etiketinin içindeki kendisi de dahil tüm form kontrollerinin değerleri isim-değer (name-value) çifti şeklinde sunucuya gönderilir.

<form>

<input type="submit" value=" Tamam ">

</form>

İNPUT RESET

Bir INPUT tipidir. Bir forma girilen verileri siler ve formu default haline koyar. INPUT damgasında type="reset" nitelemesi yapılır. Value adı girilmese tarayacının diline göre sıfırla , reset gibi değer atar

<INPUT TYPE="reset" VALUE="verileri sıfırla">

İNPUT FİLE

HTML <INPUT type=file> etiketi, bir metin kutusu (textbox) ve gözat (browse) butonu ile sunucuya dosya gönderme/yükleme (upload) kontrolü oluşturulmasını sağlar.

Dosyanın gönderilmesi için FORM etiketinin method özelliğinin post, enctype özelliğinin multipart/form-data olarak belirtilmiş olması gerekir.

<form enctype="multipart/form-data"

      action="index.php"
      
      method=POST>
      
Gönderilecek Dosya_Adı:<br>

  <input name="message"
  
         type="file"><br>
         
  <input type="submit"
  
         value="Dosyayı URL ye Gönder">
         
</form>

İNPUT HİDDEN

HTML <INPUT type=hidden> etiketi, Hidden elementler web sayfasında görülmezler. Bunlar zaten belli olan verileri CGI programına göndermek için kullanılırlar.

<input type="hidden" name="islem" value="yenikayit">

İNPUT BUTON

HTML <INPUT type=button> etiketi, düğme (button) form kontrolü oluşturulmasını sağlar.

<input type="button" value="Gönder"/>

BUTTON ETİKETİ

HTML <BUTTON> etiketi, INPUT type=button etiketi ile oluşturulan düğmeden biraz daha gelişmiş bir düğme (button) kontrolü oluşturulmasını sağlar.

En önemli farkı BUTTON etiketi içinde bazı HTML etiketlerinin kullanılabilmesidir. Dolayısıyla IMG etiketi kullanılarak buton üzerinde göstermek için bir resim eklenebilir.

<button  type="button" value="tıkla">

   <img width="30" height="21" src="icon.png"/>Gönder
   
</button>

Gönder

SELECT ETİKETİ

<HTML <SELECT> etiketi, biri liste kutusu (listbox) diğeri aşağı açılır liste (drop-down list) tipinde olmak üzere iki farklı tipte seçim kutusu (select box) oluşturulmasını sağlar. Bu iki tip arasındaki tek fark "size" özelliği ile belirtilen seçim kutusu içinde gösterilecek seçenek miktarıdır. Liste elemanları optgroup ve option etiketleri ile tanımlanır.

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

Aşağıdaki örnek, HTML SELECT etiketi kullanılarak aşağı açılır liste (drop-down list) oluşturulmasını göstermektedir.

<form>

<select>
    <option>İstanbul</option>
    <option>Ankara</option>
    <option>İzmir</option>
</select>

</form>

Aşağıdaki örnek, HTML SELECT etiketi kullanılarak liste kutusu (listbox) oluşturulmasını göstermektedir.

<form>

<select size="6" 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">mercimek</option>
  </optgroup>

  <optgroup label="Yemekler">
    <option value="y1">İmambayıldı</option>
    <option value="y2">Sultanbeğendi</option>
    <option value="y3">Kuru fasulye</option>
  </optgroup>

  <optgroup label="Tatlılar">
   <option value="t1">Kazandibi</option>
    <option value="t2">sütlaç</option>
    <option value="t3">Keşkül</option>
  </optgroup>

</select>

</form>

TEXTAREA

HTML <TEXTAREA> etiketi, çok satırlı metin giriş kontrolü (textbox) oluşturulmasını sağlar.

Aşağıdaki örnek, HTML TEXTAREA etiketi ile 10 satır ve 40 sütunluk metin giriş kutusu oluşturulmasını göstermektedir.

<form>

<textarea rows="10" cols="40">

</textarea>

</form>

FİELDSET VE LEGEND

Form elemanlarını konularına göre gruplamak için kullanılan etiketlerdir. Formun düzenin algısı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.

<fieldset>

<legend>Kişisel Bilgiler</legend>

<table>
    <tr><td>Ad Soyad : </td><td><input type="text" /></td></tr>
    <tr><td>Doğum Tarihi : </td><td><input type="text" /></td></tr>
</table>

</fieldset>

<br/>

<fieldset>

<legend>İletişim Bilgileri</legend>

<table>
    <tr><td>Telefonu : </td><td><input type="text" /></td></tr>
    <tr><td>Adresi : </td><td><textarea></textarea></td></tr>
</table>

</fieldset>

Lütfen Yorum yapmadan altta ki uyarıyı okuyun.

<select name="durum">
<option value="0">Admin</option> 
<option value="1">Modaratör</option>  
<option value="2">Yazar</option>
</select>

$ad=$_POST["isim"];

<form>
ad:<input type="text"> soyad:<input type="text"> memleket:<input type="text">
<br>
İl seçin:<br>
<select>
    <option>İstanbul</option>
    <option>Ankara</option>
    <option>İzmir</option>
</select>
</form>