Formlar herkesin hayatının bir parçası aslında. Çünkü interneti artık herkes kullanıyor. Tabi kullanırken sitelere yorum yapıp, üye oluyoruz. Bunlar içinde form etiketleri kullanılıyor.  Hem kullanıcı hemde tasarımcı için olmazsa olmaz bir araçtır. O yüzden burda dilimin döndüğünce form etiketlerini anlatmaya çalışacağım. Daha sonrada form hazırlayan çevirimiçi bir kaç siteden bahsedeceğim.
Hazır formlar çok kullanılıyor artık, ama bu formları kendi ihtiyacınıza göre düzenlemek içinde bu anlatacağım etiketleri bilmeniz gerekiyor. Evet başlayalım;

Form Etiketleri

Formlar set halindedir. Yani bir bilgisayar kasasının içindeki elemanlar gibi. Eğer elemanı kasanın içene yerleştirmezseniz çalışmaz. Aynen bunun gibi form etiketlerini işeren bir kasa vardır. Tüm form etiketlerini;
<form></form>
yapısı içine yerleştiririz. Böylece hepsi birbiriyle ilişkili olacaktır.

Biraz bilgi vermeye devam edelim. Formu gönderdiğinizde formdaki herbir bilgi tanımlanmış bir değişkene yazdırılır. Yani isminizi yazdığınızda , isminiz gidecek dosyada bir değişkene yazdırılır. Daha sonra ordan istenilen yere yollanır yada çıktı verilir. Bilgilerin doğru değişkene gitmesi için name=”" parametresi kullanılır. Her etikette olmak zorundadır.
Bir form oluşturulurken, bilgilerin gideceği dosya ve gönderilme metodu belirtilmelidir.

action=”Dosya ismi” Burada formdan gidecek bilgilerin değerlendirildiği dosya adının uzantısı yazılır.
method=”get/post” Buradada form gönderilme metodu belirlenir. Get yada Post kullanırsınız. Güvenlik açısından en çok post kullanılır.
Bu iki yöntemin çeşitli farklılıkları vardır. Fakat en belirgin ve temel farkları ise GET metoduyla gönderilen veriler ilgili betik sayfasında tarayıcının adres çubuğunda belirtilirken POST yöntemiyle gönderilen veriler belirtilmezler. POST yöntemi bu özelliğiyle daha gizli bir yöntemdir ve şifre verilerini göndermede kullanılan yöntemdir diyebiliriz. Ayrıca eğer çok uzun bir metni gönderiyorsak tarayıcının adres çubuğunda gereksiz yer kaplaması hem hız hem de görünüm bakımından hoş değildir.  Bu yüzden POST kullanmanızı tavsiye ederim.
Örnek olarak;

<form action=”http://ercani.com/kullanicimesaj” method=”post”>

Şimdi genel bir etiketi tanıtalım. Daha sonra bu etiketin içine yerleştireceğimiz yardımcı kodları inceleyelim.

<input>
Bu etiket genel amaçlı kullanılan bir form etiketidir. Yani isminizi gireceğiniz boş kutu, işaretlediğiniz küçük kutucuklar, yorumunuzu yazdığınız textarea hep bu etiket içinde belirlenir. Ve bu etiket </input> gibi bir kapanışla kapanmaz.
Örneğin;
<input type=”text” name=”isim”> Burada gireceğiniz isim kutucuğunu belirledim. <input type=”submit” value=”gönder”> buradada gönder butonunu koydum.

Şimdi <input> etiketinin yardımcı kodlarını inceleyelim;

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 anlatacağı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.

Bu yardımcı kodlar bize formumuzun tipini ve özelliklerini belirlememizde yardımcı olacaklardır. Şimdi örneklerimize geçelim.

Text ;
Adı: <input type=”text” name=”firstname”><br>
Soyadı: <input type=”text” name=”lastname”>

Burdaki örnekte ad ve soyad girilmesini istedik ve bu girilecek değerlerin $firstname, $lastname değişkenlerine gideceğini belirledik.
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”>

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

Buradada seçeceğimiz kutucukları belirledik. checked=”on” diyerek o kutucuğun seçili kalmasını sağladık.
Textarea
Bu kod ile formumuza bir alan açarız. Bu alana örneğin yorum veya açıklama yazılabilir. Yardımcı öğeler olarak rows ve cols kullanılır.
rows satır genişliğini, cols sa sütun yüksekliğini belirler.

Yorumunuzu Belirtin:
<textarea name=”yorum”
rows=”10″ cols=”60″>
</textarea>

radio
Radio düğmeleri bir tek seçenek belirtmek için kullanılır. Örneğin cinsiyet. (gerçi günümüzde cinset artık baya bir çeşitlendi ama)

<input type=”radio” name=”cinsiyet” value=”erkek” checked=”on”> Erkek<br>
<input type=”radio” name=”cinsiyet” value=”disi”> Dişi<br>

submit, reset
Bu iki kod bize formu gönderme ve temizleme işini görür. Submit ile formu göndereceğimiz butonu oluştururuz, reset ile ise formu temizlemesini sağlarız.
Şimdi genel bir form oluşturalım hepsini bir arada görelim;

<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=”Formu Yolla”> <input type=”reset” value=”Formu Temizle”>
</P>
</form>

Bu örnek genel bir form yapısıdır. <form></form> yapısının içinde tanımlanan setler dir.
Eğer butonlara resim eklemek isterseniz, <button></button > etiketlerinin içine <img> etiketini kullanarak bunu yapabilirsiniz.
<button> etiketi aynı <input> etiketine benzer. Yine içinde type ve name parametrelerini alır ve aynı işlevi görür. Yanlız kapatma derdi vardır. O yüzden sadece butonlara resim ekleyeceğiniz zaman kullanabilirsiniz.

<button name=”submit” type=”submit” value=”submit”>
<img width=”20″ height=”21″ src=”../images/logo.gif”/>Gönder
</button>
<button name=”reset” type=”reset” value=”reset”>
<img width=”20″ height=”21″ src=”../images/logo.gif”/>Sıfırla
</button>

Şimdi diğer elemanlara geçelim. Formlarda görmüşsünüzdür şehriniz sorulurken aşağıya doğru açılan bir menü konulmuştur. Veya açılmış bir vaziyette size bir kaç seçenek seçmenizi isteyen bir menü vardır. İşte bunları nasıl oluşturacağımıza bakalım;
<select> </select>, <option> </option>
<select></select> yapısı oluşturulacak menünün ana etiketidir. Yani menümüzü bu etiket içinde oluştururuz.
<option> </option> yapısıda menünün içindeki elemanları belirtir. Örnekle daha iyi anlarız;

<select name=”sistemadi”>
<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>

Sanırım anladınız. Select etiketinin içine option etiketini koyarak bu açılır menüyü oluşturduk.

Şimdi son olarak vermek istediğim formumuzu gruplara ayırarak daha hoş görünmesini sağlayan bir etiket;
<fieldset> </fieldset>, <legend> </legend>
<fieldset></fieldset> etiketinin içine <legent></legent> etiketini yerleştirerek formumuzu gruplayabiliriz. Örneğin;

<form action=”c:\\form.txt” method=”post”>
<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/>
<form action=”c:\\form.txt” method=”post”>
<fieldset>
<legend>Bildiği diller</legend><br/>
<input name=”dil”
type=”checkbox”
value=”html” tabindex=”20″/> Html  
<input name=”dil”
type=”checkbox”
value=”sql” tabindex=”21″/> Sql    
<input name=”dil”
type=”checkbox”
value=”php” tabindex=”22″/> Php<br/>
</fieldset>
</form>

Evet genel yapı bu şekilde. Bu form etiketlerini daha düzenli yapmak için tablo kullanmak ve bunu css le süslemek görsel olarak formunuzu zenginleştirecektir.
Yazı fazla uzadı o yüzden çevirim içi form oluşturma hizmeti veren siteleri diğer bir yazımda vermek istiyorum. Umarım yararı olur.