Formların oluşması için form etiketi içerisinde form elemanlarının kullanılması gerektiğini önceki derste söylemiştim. Formlar içerisinde; metin kutuları , çoklu seçimler, açılır kutular vs gibi bir çok eleman kullanılır.. Formlarda kullanılan elemanları aşağıdaki gibi özetleyebilriiz..
Input : Tek satır veri girişi
label : Elemanlar için etiket
textarea : Çok satır veri girişi
select : Açılır kutu yada liste
button : Formu göndermek yada temizlemek için buton
fieldset : Formda alan belirtme
legend : Formdaki alanların adı
option : açılır kutudaki maddeler
optgroup : Açılır kutudaki maddeleri gruplama
datalist : Inputlar için önceden tanımlı liste
Formdan gelen verileri işleyecek olan sayfanın verinin nereden geldiğini anlayabilmesi için veri içeren her eleman "name" parametresi almalı ve name ile belirlenen isimleri birbirlerinden farklı olmalıdır.
Elemanlara tek tek bakalım...
<INPUT />
En çok kullanılan form elemanıdır. Metin kutusu olarakta isimlendirilebilir ancak HTML5 ile beraber bir çok farklı tipte veriyide temsil edebilir. type parametresi ile kullanılır. Input etiketi kapanmaz. Name parametresi almalıdır.
Form elemanlarının etiketidir. Elemanın ne olduğunu yazmak için kullanılılabilir.. ( ad, soyad,şehir vs) . Label etiketi tıklandığında , ait olduğu eleman odaklanmış olur. Label etiketi, ekran okuyucular içinde kullanışlıdır. Üzerine gelindiğinde sesli bir şekilde okunur. Ayrıca onay kutusu gibi küçük elemanların seçiminde bölgeyi büyüterek tıklamayı kolaylaştırır.
Label etiketi kullanılırken forparametresi ile ait olduğu elemanın id değeri belirtilir.
id : identity yani kimlik kelimesinin ilk iki harfidir . Adı üzerinde kimlik belirtir. CSS'te oldukça fazla kullanacağımız bu kavram , her elemanın kendine özgü bir adının olmasını sağlar ve sayfada tek olur.
Yukarıdaki text input'a "ad" id'si eklenmiş . Dolayısıyla Label etiketi , for="ad" parametresi ile bu inputa ait olmuş olur. Label etiketi CSS ile müdahale edilmediği sürece tasarım ekranında değişikliğe sebep olmaz. Yukarıdaki örnekte Adınız yazısına tıklayınca, metin kutusunun odaklandığını göreceksiniz..
LABEL ETİKETİNİ KULLANMAK ZORUNLU DEĞİL!
<TEXTAREA>
Formlar içerisinde çok satırlı yazılar için kullanılan elemandır. Örneğin adres , hakkınızda gibi fazla cümle olasılıklı verilerde kullanılır. Textarea kapanan form elemanlarındandır. Name parametresi almalıdır.
Textarea etiketleri arasında birşey yazarsanız, tarayıcıda kutu içerisinde varsayılan yazısı olur. Örneğin yukarıdaki kodda textarea arasına yazdığımız 3 nokta , tasarımda kutu içerisinde görüntülendi...
<SELECT>
Formlar içerisinde açılır (seçim) kutular eklemek için kullanılır. Açılır menü maddeleri <option> (seçenek) etiketleriye yazılır. Her option maddesinin bir value değeri olmalıdır. Form gönderildiğinde, seçilen maddenin ne olduğu , bu value değeri aracılığıyla anlaılır.
Select box'larda hangi option maddesinin seçili geleceğini belirtmediğimiz sürece , ilk option maddesi tasarımda seçili gelir. Yukarıdaki select yapısında ilk eelman olan İZMİR seçili geldi.. Farklı bir seçeneğin seçili gelmesini istiyorsak , option etiketine selected="" yada sadece selected parametresini yazmamız gerekir... Örneğin ANKARA seçili gelsin istiyorsak :
Yukarıda , ANKARA option maddesine selected parmetresi ekledik ve tasarımda ilk olarak ANKARA seçili geldi. Birde fazla selected eklenmiş option maddeleri olursa , en son eklenen madde seçli gelir...
SIZE
Select box'lar tasarımda sadece seçili option maddesini gösterir , diğer option maddelerine select box tıklandığında açılanmenüden ulaşılır. Eğer aynı anda birden fazla madde görünsün istiyorsak size parametresi ile aynı anda kaç tane maddenin görünmesini istediğimizi belirtmeliyiz.
Yukarıda select box için size="3" belirledik. Bu durumda 3 option maddeside tasarımda görünür şekilde geldi. Ancak "size" uyguladığımız için select box , açılır kutu özelliğini kaybedip . listeye dönmüş oldu...
MULTIPLE
Size parametresi ile listeye dönüşen select box'larda varsayılan olarak sadece 1 option seçilebilir. Eğer CTRL tuşuna basılı tutarak çoklu seçim yapmak istiyorsak, bu kez select etiktine "multiple" parametrsinide eklemeliyiz...
Yukarıda select box için size="3" belirleyip ,multiple parametresini ekledik. Böylece aynı anda birden fazla option seçilebilir hale geldi..
OPTGROUP
Select box içindeki option maddelerini , açılır liste içinde gruplayabiliyoruz. Bunun için gruplanacak maddeleri optgroup etiketleri arasına alıp grup adı için optgroup etiketine label parametresi veriyoruz.. Örneğin listede hem Ege hem Marmara şehirleri olsun...
Yukarıdaki select box'ı tıklayıp açarsanız EGE ve MARMARA şehirlerinin gruplandığını görebilirsiniz.
<BUTTON>
Formlardaki veriler bir buton aracılığıyla gönderilir. bunun için input type="" kullanabileceğimiz gibi doğrudan button etiketini kullanabiliriz. 2 tür buton tipimiz var;
SUBMİT : Submit onaylamak demek. Dolayısıyla formu gönderir..
RESET : Reset, sıfırlamak demek.. Dolayısıyla formda seçilen , yazılan bilgileri siler. Bir başka deyişle formu temizler..
Yukarıdaki örnekte GÖNDER ve TEMİZLE butonların işlevlerini deneyebilirsiniz.. GÖNDER butonuna bastığınızda , form action boş olduğu için sayfa yenilenecektir.
<DATALİST>
Datalist'te <input type=text> gibi bir metin kutusudur. Ancak yeni girişe izin verirken aynı anda açıılr menüsüyle önceden tanımlı seçeneklerinde görünmesini sağlar. Önceden tanımlı eçenekler datalist ile belrlenir. Input ile beraber kullanılır.
Datalistin düzgün çalışabilmesi için , Input elemanının list parametresi mutlaka datalist'in id'si olmalıdır.
<FIELDSET> ve <LEGEND>
Form içerisinde bazı verileri gruplamak, bir bölüm almak için fieldset kullanılır. Form içerisinde istenildiği kadar kullanılabilir. Legend ise bu fieldset'in basşlığını belirtir..
Yukarıda Ad ve Soyad bilgileri fieldset içine alınmış ve legend ile "Kişisel bilgiler" başlığı eklenmiş... Fieldset etiketi kapladığı bölümü kendiliğinden çerçeve içerisine alır ve başlığını çerçeve çizgisine gelecek şekilde yerleştirir.