Ders Adı: Web Tasarımı - Formlar
Kategorisi: Tablolar, Frameler, Formlar
Ekleyen: zebaniz - Tarih: 07.11.2005 - 21:37

Form'lar web sayfalarının vazgeçilmez öğeleridir.
Form'lar [1]

Form Öğeleri:
Günümüzde hemen her web sitesinde rastladığımız, bazen arama yapmak, bazen kişisel bilgilerimizi girmek, bir siteye veya web e-mail'e şifremizle giriş yapmak için kullandığımız web öğeleri FORM başlığı altında toplanabilir.
Burada özellikle belirtmemiz gereken nokta şudur: Formlar toplanıp bir CGI programcığına veya ASP/PHP/PL gibi gönderilen verileri derleyebilecek bir uygulamaya yönlendirilmelidir. Yani kendinize ait özel bir form için bu uygulamalara ihtiyacınız var. Bu bölümde formların nasıl oluşturulacağı ve çeşitleri hakkında örnekler vereceğiz. Gelin şimdi form komutlarını ve de FORM çeşitlerini inceleyelim. Tabii ki her komutumuzda olduğu gibi, öncelikle form sınırlarını belirlememiz gerekmektedir. Bunun için browser'ınıza formun açıldığına ve kapandığına dair komutlar göndermemiz gerekmektedir.


<FORM name="formismi" method="(GET veya POST)" action="gonderilecek program/adres" </FORM>

Parametreleri sırayla inceleyecek olursak:
NAME: Form ismini belirtir. Seçenekli bir parametredir. Yani eğer sayfanızda birden fazla form kullanmayacaksanız sorun çıkmayacaktır.
METHOD: Sadece GET veya POST parametreleri kullanılabilir. GET ile POST arasında ne fark var?
GET durumunda form bilgileri, işlemleri yapacak programa URL üzerinden gönderilmektedir. Dosya adının yanına soru işareti ve veri ismi ve veri değerleri getirilerek yapılır.
POST komutu ile form bilgileri asıl HTML gövdesine birleştirilerek yollanmaktadır. POST yöntemi ile daha çok veriyi gönderebilirsiniz.
ACTION: Form verilerinin gönderileceği adresi belirler. Bu bir ASP/PHP veya CGI programcığı olabilir. Ya da bunları işleyebilecek bir web sayfası işinizi görecektir.
Böylelikle formun sınırlarım belirlemiş olduk. Şimdi form öğelerini tek tek görelim;

INPUT:
Kullanımı: <INPUT TYPE="Input tipi" NAME="Bölüm ismi" VALUE="Verilecek değer" SIZE="Genislik" l MAXLENGTH l DISABLED l READONLY>
Parametreler:
TYPE:
Bu parametrenin varsayılan değeri text'tir.
Buraya yazabileceğiniz parametreler ve etkilerini sıralayalım:
Name: Verilen değerin hangi değişkene ait olduğu belirtilir. Verilmediğinde verdiğiniz değer form öğelerinde yerini bulmayacak, bir nevi boşa gidecektir.
Value: Burada ismini "Name" parametresi ile verdiğiniz öğenin varsayılan değerini atayabilirsiniz. Örneğin yaptığıniz formda kullanıcının web sitesi adresini girmesini istiyorsunuz. Yazacağınız komut:

<input type="text" name="webadresi" value="http://" size="25">

Size: Metin alanınızın karakter cinsinden genişliğini belirler.
Maxlength: Metin (text) satırına en çok kaç karakter yazabileceğinizi belirtir. Readonly: Metnin değiştirilmesine izin vermez. Kutu içinde verdiğiniz değeri (value) gösterir.
Disabled: Eğer bu parametreyi kullanırsanız, metin kutusu kullanıcıya gösterilir fakat işleyici programa aktarılmaz.
<html>
<head><title>Form Menü</title>
</head>
<body bgcolor="#FFFFFF">
<form name="deneme" method="POST" action="gonderilecek sayfa.asp">
Lütfen Web Adresinizi Giriniz:
<br><input type="text" name="webadresi" value="http://" size="25"></form>
</body>
</html>

 

SELECT
Genelde çoklu veya tekli seçim yapmamıza yarayan drop-down menüleri oluşturmak için kullanılır. Kullanımı:
<SELECT name="Formogesiismi" SIZE="Gösterilecek Satır Sayısı" (MULTIPLE)>
OPTİON value="1.nesne degeri">1. Nesne'nin ekranda görünecek ismi</OPTION> <OPTION value="2.nesne degeri">2. Nesne'nin ekranda görünecek ismi</OPTION> </SELECT>

Parametreleri sıralarsak eğer:
Name: Formu işleyecek dosyaya göndereceğimiz isim.
Size: Gösterilecek Satır Sayısı. Eğer herhangi bir değer girmezseniz 1 satır olarak kalmaktadır.
Muitiple: Eğer birden fazla seçimi aynı anda yaptırmak istiyorsanız bunu komutu kullanabilirsiniz. Tabii size (büyüklük) parametresini biraz daha yüksek tutmakta fayda var.
Option komutu ise SELECT ile dizeceğimiz seçenekleri belirlememizi sağlar. şeklinde kullanılmakta. Bu tip kullanımda ekrandan görünecek isim olarak value alınır.
Örnek verirsek: 3 satırlı bir seçim tablosu oluşturalım.

<FORM name="anket" method="post" action="anket.asp">
Hangi şehirde çalışıyorsunuz?
<BR>
<SELECT name=
"anket" SIZE="1">
<OPTION value="34">İstanbul</OPTION>
<OPTION value="35">İzmir</OPTION>
<
OPTION value="06"> Ankara</OPTION>
</SELECT>
</FORM>

INPUT Komutu Type Çeşitleri
Text: Bir metin girdisi bekler, yazılanlar ekranda gösterilir.
Password: Oraya yazılacak olanların birer şifre olacağını düşünerek yazılan her karakter * ile değiştirilir.
Checkbox: Bir kare içerisinde bir seçim kutucuğu gösterilir. Fakat eğer (bir de checked)????? parametresi kullanılmazsa seçili durumda olmaz. Birden fazla seçilebilir. Ne kadar konulacaksa hepsinin Name kısmı farklı olmalıdır.
Radio: Ufak bir radyo diiğmesi koyar. Genelde aynı "Name" parametresi altında gruplandığında, bu grupta tek bir seçim hakkı verir. Yani aynı "Name" parametresini kullandığınız üç radyo düğmesinden seçim hakkınız sadece biridir. SELECTED parametresi kullanıldığında bir tane seçili durumda çıkmakta.
Submit: Onay düğmesi koyar. Bu düğme formun en sonlarında, formu göndermek için kullanılmaktadır.
Reset: Genelde onay düğmesinin yanında bulunur. Formda yazılan ne var ne yoksa siler.

Image: Resim yüklerken kullandığımız img komutu yerine INPUT koyup bir "Name" ve type="image" eklediğimizde resmimiz artık bir onay kutucuğuna dünüşecektir.
Hidden: Bu parametreyi kullandığınızda verdiğiniz Value (değer), verdiğiniz "Name" ile kabul edilir. Kullanıcıya sorulmaz ve gözükmez. Bir form işlemcisine vermek istediğiniz ek değerler için kullanabilirsiniz.

Form'lar [2]

<OPTION>İstanbul</OPTION>
<OPTION>İzmir</OPTION>
<OPTION>Ankara</OPTION>

şeklinde yazsa idik, programcık "anket" değerini "istanbul", "Ankara" veya "izmir" olarak alacaktı.
Peki ya muitiple olunca ne olmakta? CTRL tuşuna basılı tutarak kullanıcılar aynı anda birden çok seçim yapabilir.
TEXTAREA
Daha geniş yazıların, mesela paragraf veya blok halindeki yazıların tek bir satıra sığması hayli zordur. Bunun için de textarea komutu kullanılmakta. Bu komut, Input'tan daha değişik kullanımıyla dikkat çekiyor. Kullanımı:

<TEXTAREA name="Formismi" rows="Satırsayısı" cols="Sütun Sayısı">Değer</TEXTAREA>

Fark ettiyseniz burada değer iki komut arasında olmaktadır. Yeni bir şey girilmesini istiyorsanız üstte belirttiğimiz "Değer" kelimesinin yerini boş bırakmak olacaktır.
Şimdi gelin sayfamıza küçük bir örnekle devam edelim. Tekrar belirtmek isteriz ki, formunuzun işleme geçmesi için onu işleyebilecek bir URL'ye ihtiyacınız var. Birçok ücretsiz web alanı veren site, bu tip uygulamaları hazırlıyor. En azından anket yapabileceğiniz, mektup gönderebileceğiniz veya ziyaretçi defteri hazırlayabileceğiniz uygulamaları, sitelerin kendi sayfalarında bulabilirsiniz. Nasıl kullanılacağı hakkında detaylı bilgiyi, bu siteler içermektedir. Şimdi kendimize küçük bir form hazırlayalım.
Form taslağını gözden geçirip hangi form öğelerini koyacağımıza karar verelim.

<HTML>
<HEAD>
<TlTLE>
İlk Form Örneği</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">

! Formumuzu açalım

<FORM name="ilkform" method="post" action="#">

Gördüğünüz üzere ilkform adında # işaretine yani kendisine POST yöntemiyle geri dönen bir form hazırladık. Bunun sebebi ise, şu an için formu yorumlayacak bir URL'nin veya bir programcığın olmaması...
Şimdi daha güzel bir görüntü için bir tablo açalım:

<TABLE CELLSPACING="0" CELLPADDING="2"> <TR> <TD>Adınız Soyadınız: </TD>

İşte Satır Input'u
Ad, Soyad, Email gibi kısa, 255 karakterden az olabilecek bilgileri Input komutunun type="text" ile girmesini sağlayabiliriz

<TD><INPUT Type="text" size="25" name="adsoyad"></TD>
</TR>

Name verirken dikkat etmemiz gereken bir diğer konu Türkçe karakterler ve boşluk bulunmaması ve burada vereceğimiz değişkenin sayı ile başlamamasıdır. Bir sonraki satırda e-mail'ini isteyelim kullanıcıdan.

<TR> 
<TD>
Emailiniz: </TD> 
<TD><INPUT Type=
"text" size="25" name="email"></TD> 
</TR>
 

Peki cinsiyet faktörü? Aynı anda 2 cinsiyeti birden seçemesin. Verebilecek cevap sayısı da az olduğundan SELECT yerine radyo düğmelerini kullanabiliriz

<TR>
<TD>
Cinsiyetiniz: </TD> <TD><input type="radio" name="cinsiyet" value="E"> Erkek <input type="radio" name="cinsiyet" value="K"> Kadın</TD> </TR>
Dikkatinizi çekmiştir, burada iki input'taki NAME değişkenleri aynı. Bu da aynı kategoride olduklarını gösteriyor. Radyo düğmelerindeki özellik, birinin seçili olduğu durumda diğerlerinin işlevsiz olmalarıdır.
Şimdi bir de sevdiği sporlarla ilgili olarak sorumuzu soralım ziyaretçilerimize. Fakat burada doğal olarak birden fazla seçim yapma hakkına sahip olabilsinler.
<TR>
<TD>Sevdiğiniz Sporlar: </TD>
<TD>

İki sütunlu bir tablo daha açıp sıralayalım.

<TR>
<TD>Sevdiğiniz Sporlar: </TD>
<TD>

İki sütunlu bir tablo daha açıp sıralayalım.

<TABLE CELLSPACING="0" CELLPADDING="2"> <TR> <TD> <INPUT TYPE="checkbox" NAME="sporlar" VALUE="Futbol"> Futbol </TD> <TD>
<INPUT TYPE="checkbox" NAME="sporlar" VALUE="Basketbol"> Basketbol
</TD> </TR> <TR> <TD> <INPUT TYPE="checkbox" NAME="sporlar" VALUE="Yüzme"> Yüzme </TD> <TD>
<INPUT TYPE="checkbox" NAME="sporlar" VALUE="Hentbol"> Hentbol
</TD> </TR> <TR> <TD> <INPUT TYPE="checkbox" NAME="sporlar" VALUE="Voleybol"> Voleybol  </TD> <TD> <INPUT TYPE="checkbox" NAME="sporlar" VALUE="Tenis"> Tenis
</TD> </TR> <TR> <TD> <INPUT TYPE="checkbox" NAME="sporlar" VALUE="Masa Tenisi"> Masa Tenisi
</TD> <TD>
<INPUT TYPE="checkbox" NAME="sporlar" VALUE="Doga Sporları">
Doğa Sporları
</TD> </TR> </TABLE>

<! - İç tablomuzu kapattık ve şimdi üst hücremizi kapatıyoruz.>
</TD>
</TR>
Form'lar [3]
**Buradaki nokta yine radyo düğmeleri gibi aynı NAME değerini paylaşan kutu şeklinde seçenekler oldu.
Örneğimizde biraz değişiklik yapalım ve onu sanki bir kayıt ekranıymış havasına büründürelim.
**Buradaki nokta yine radyo düğmeleri gibi aynı NAME değerini paylaşan kutu şeklinde seçenekler oldu.
Örneğimizde biraz değişiklik yapalım ve onu sanki bir kayıt ekranıymış havasına büründürelim.
<TR>
<TD>
Şifreyi hatırlatma sorusunu seçiniz.</TD> <TD><SELECT NAME="soru" SIZE="1">
Gördüğünüz gibi soru ismiyle bir select dosyası açtık. Çoklu seçim olmadığı için MULTIPLE seçeneğini eklemedik. Şimdi seçenekleri yazalım:
<OPTION selected>Annenizin kızlık soyadı</OPTION>

Eğer OPTlON'a bir value parametresi eklemezsek doğrudan doğruya option komutları arasındakini varsayılmış kabul eder. "SELECTED" bu seçeneğin varsayılan olarak seçilmiş kabul ettirmemizi sağlar. Kullanıcı bunu değiştirebilir.

<OPTION>Köpeğinizin İsmi</OPTION>
<OPTION>En sevdiğiniz içecek</OPTION>
<!- Ve Select ifadesini kapatıyoruz
</SELECT>
</TD>
</TR>

Select ifadesinin sonucu işlemci programcığa Örneğin soru="Köpeğinizin ismi" diye gidecektir.

Peki şifreli bir form nasıl hazırlayacaksınız? Şifre girişli form kullanırken sadece INPUT satırında TYPE="password" kullanmak yeterli olacaktır.

<TR>
<TD>Şifrenizi Giriniz:</TD>
<TD><INPUT TYPE="password" size="25"></TD>
</TR>

Text Area kullanım açısından diğerlerinden daha farklı olarak rows (satırlar) ve cols (sütunlar) parametreleri içermektedir. Varsayılan değer OPTION'larda olduğu gibi TEXTAREA komutlarının arasında yazılmaktadır.

<TR>
<TD>
Düşünceleriniz:</TD> <TD><TEXTAREA Name="Dusunceler"
rows="25" cols="10">Buraya düşüncelerinizi yazınız</TEXTAREA>
</TD>
</TR>

Görmüş olduğunuz üzere TEXTAREA 25 karakter genişliğinde 10 satır yüksekliğinde oldu. Metin kutusunda "Buraya düşüncelerinizi yazınız" şeklinde bir yazı çıkmakta. Burayı boş bıraktığınız takdirde Yani <TEXTAREA Name="Dusunceler" rows="9" cols="25"></TEXTAREA> şeklinde yazdığınızda mesaj boş bir kutu olarak karşınıza gelecektir.
Diyelim ki vermek istediğiniz ve kullanıcının değiştirmesini istemediğiniz bir değer var.
Örneğin bu formda bir de formun ne hakkında olduğuna dair bilgi için formu işleyecek programcığı haberdar edeceksiniz. Burada Type parametresinin HIDDEN özelliği imdadımıza yetişiyor.

<INPUT TYPE="Hidden" name="Baslik" value="Anket Bilgileri">

Hidden parametresini kullandığımız form öğelerinden mutlaka bir değer
(value) atanmalıdır. Kullanıcıların görmediği bu öğe POST veya GET yöntemiyle asıl form yapısına eklenir.

Sayfamızın genel haline bir bakalım. Peki bu formu göndermek için tıklanacak düğmeleri nasıl koyacağız. Tahmin ettiğiniz üzere tekrar INPUT komutu ile...

<TR>
<TD><INPUT type="submit" value="Formu Onayla"></TD>
<TD><INPUT type="reset" value="Formu Temizle"></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>

Type parametresine yazdığımız, "Submit" komutu ile bu düğmenin formu göndermeye yarayacağını, "Reset" ile de forma girilmiş tüm bilgileri orijinal verilmiş VALUE parametrelerine geri döndürüleceğini belirtmiş olduk.
Bu bilgilerimiz Işığında sayfamıza bir arama motoru eklemeye ne dersiniz? Yahoo! Arama motoruna sayfamızdan ulaşılsın.

<form action="http://search.yahoo.com
/bln/search"
method="post">
<lnput slze="30" name="p" type="Text">
<lnput type="submit" value="Ara">
</form>

Böylelikle ziyaretçileriniz, Ara düğmesine bastıklarında, Yahoo!'dan arama yapabilecek. Burada işlemi gerçekleştirecek programcığın adresini URL olarak veriyoruz. Unutmayın ki, sadece <FORM> </FORM> komutları arasındaki veriler işleyici program veya URL'lere aktarılır. Bu komut dışındaki Form öğeleri, metin girişleri, şifre veya radyo düğmeleri gibi, brovvser'larda gösterilmesine rağmen, form işlenmesi için gönderilmeyecektir.
Daha önce de belirttiğimiz gibi, form bilgilerini işlemek için yapılmış programcıkların birçok örneğini web sayfalarında bulabilirsiniz. Ücretsiz aldığınız web alanınız için bu tür pek çok küçük program vardır.
Unutmayın ki HTML'i geliştirmek, belki de her gün gezdiğimiz web sayfalarının yapısını anlamak, araştırmak ve kullanılan komutları iyi bilmekle başlar. Hepinize bol HTML 'li günler.

Pek çok arama motorunda formlardan INPUT type=text ve type=hidden 'lar kullanılmaktadır.

Yazının URL adresi: http://aeystudio.com/tutorials.php?action=showtutorial&tut_id=68
Web Sitesi: http://www.aeyStudio.com