Bücdet - Bilginin Sayfası

Form Araçları

Bu derste anlatacağımız konular, web tasarımcılığında ilerlemek isteyen, VBScript, JavaScript uygulamaları yapmak isteyenler için büyük önem taşıyor. Bu sayfadaki konuların ileriki derslerle olan ilişkisi görece fazladır.

Hemen konuya girsek iyi olacak, form araçları <form>...</form> kodları arasına yazılır. (Ama bu zorunlu değildir elbette.) Formların kullanımı ilerik bölümlerde ayrıntılı anlatılacaktır, şimdilik öylesine, alışkanlık olsun diye kullanıyoruz. Not: Bir sayfada birden fazla form olabilir ancak bu formlar içiçe olamaz.

Metin Kutusu

İlk öğreneceğimiz form aracı metin kutusu (textbox) aracıdır. Bu araç, kullanıcının verileri yazarak girmesini sağlar. Bu aracı HTML'de <input type="text"> kod ve parametresi ile gösteririz. Ayrıca name parametresi ile metin kutusunu isimlendirebiliriz. (İleriki derslerde bu isimler, metin kutusuna girilen veriler üzerinde yapılan işlemler için kullanılacaktır, şimdilik öylesine isimlendiriyoruz.)

Metin kutularının genişliğini karakter cinsinden belirlemek için: size="..." parametresi kullanılır. Ayrıca metine yazılabilecek karakter sayısını sınırlamak da mümkün, bunun için maxlength="..." parametresine karakter cinsinden değer atanır. Metin kutusu kullanıcının karşısına yazılı halde çıkarılabilinir: value="..." parametresine metin kutusunda yazılı olmasını istediğiniz yazıyı yazabilirsiniz.

Yukarıdaki uygulamada "ALTAY" yazısı kullanıcı tarafından silinebilmektedir. Eğer bir yazının kullanıcı tarafından silinememesini arzu ediyorsanız, readonly parametresini kullanmalısınız.

Şifre Kutusu

Metin kutusu için <input type="text"> kod ve parametresini kullanıyorduk. Eğer type="..." parametresine "password" değerini atarsak, şifre girilebilen ve girilen yazıları * halinde gösteren bir metin kutusu elde ederiz:

Düğme

Görüldüğü gibi, sadece type="..." parametresine çeşitli değerler atayarak, yeni form araçları elde ediyoruz. Öğreneceğimiz diğer form aracı ise Düğme (button). Web sayfasında Düğme oluşturmak için iki yol vardır. Bunlardan birincisi <input type="button"> kod ve parametresini kullanmak. Önceki parametrelerin çoğu bu form aracı için de geçerlidir.

Aslında biçimsel olarak aynı ama işlevsel olarak farklı düğmeler de vardır; forma yazılan verilerin girilmesini sağlayan düğmeleri type="submit" parametresi ile, forma yazılan verilerin resetlenmesini (girilmemiş hale dönmesini) sağlayan düğmeleri type="reset" parametresi ile oluştururuz. Bu konuları JavaScript ve VBScript konularını görürken anlatmak daha uygun olacak; burada vereceğimiz bilgi bu düğmelerin işlevleri değil sadece görüntülenmesinden ibarettir.

Düğme oluşturmanın bir diğer yolu da <button>...</button> kodlarını kullanmaktır. Bu kodların arasına yazılan HTML kodları bir düğme haline dönüşür. Bu bir resim de olabilir, bir tablo da veya bir yazı da.

Resimli Düğme

Şaşırtıcı bir kod değil mi? Bazen bu tür gri renkli, gölgeli düğmeler yerine, kendi tasarladığımız veya internetten arakladığımız bir resmi düğme gibi kullanmak isteriz. Bunun için <input type="image" src="..."> kod ve parametreleri kullanılır. Buradaki src="..." parametresi tahmin edeceğiniz üzere resim dosyasının adresinin belirtileceği yerdir.

Radyo Kutusu, Kontrol Kutusu

Sık sık karşılaşacağımız diğer form araçları: radyo kutusu (radio box) ve kontrol kutusu (check box). Bunlar için type="radio" ve type="checkbox" parametreleri kullanılır. Radyo kutularını kullanıcının şıklar arasında seçim yapmasını sağlamak için, kontrol kutularını ise kullanıcının belirtilen nitelikleri birden fazla seçebilmeleri için kullanırız. Aşağıdaki uygulamaya bakalım:

Bu uygulamada radyo kutularınızı; tanımına ters düşecek şekilde, birden fazlasını işaretleyebiliyorsunuz. Bunun nedeni tüm radyo kutularına ayrı ayrı isimler koymamız. Eğer hepsine aynı ismi koyarsak (radyo) böyle bir sorun yaşamayacağız. Kontrol kutularına aynı ismi koymamız birşeyi değiştirmeyecek, zira bu kutuların özelliği aynı anda birden fazla kutunun işaretlenebilmesidir.

Form Araçları İçin Etiket

Şimdi düzeltmiş olduk hatamızı. Ama tasarımcı sayfanın ergonomik (ergonomi:iş bilimi) olmasına dikkat etmek zorundadır. Son uygulamamızda kullanıcı küçücük radyo kutusunu (veya kontrol kutusunu) işaretlemek zorunda kalıyor. Kullanıcının işini kolaylaştırmak, tasarımcının görevidir: Bize düşen görev radyo kutusunun sadece üzerine gelindiğinde değil, kutunun sağındaki etikete gelindiğinde de seçili hale gelmesini sağlamaktır. Bunun için etiketi ve/veya kutucuğu <label for="...">...</label> kodları ve parametresi arasına yazarız. Buradaki for="..." parametresi, etiketin hangi kutuya ait olduğunu belirten kimliği belirtir. Bu kimlik <input id="..."> kod ve parametresiyle tanımlanır. Aşağıdaki uygulamaya bakınca daha iyi anlaşılacaktır.

<html>
    <head>
    <title>Ergonomik Futbol Testi</title>
    </head>
    <body>
    <form name="kutular">
    Aşağıdaki futbol takımlarından hangisi şampiyonluk yaşamıştır?<br>
    <label for="rad1"><input type="radio" name="radyo" id="rad1"> Göztepe</label>
    <label for="rad2"><input type="radio" name="radyo" id="rad2"> Karşıyaka</label>
    <label for="rad3"><input type="radio" name="radyo" id="rad3"> Ankaragücü</label>
    <label for="rad4"><input type="radio" name="radyo" id="rad4"> BucaSpor</label>
    <label for="rad5"><input type="radio" name="radyo" id="rad5"> Hiçbiri</label>
    <br><br>
    Aşağıdaki futbol takımlarından şampiyonluk yaşamış olanları işaretleyiniz?<br>
    <label for="chb1"><input type="checkbox" name="kontrol" id="chb1"> TrabzonSpor</label>
    <label for="chb2"><input type="checkbox" name="kontrol" id="chb2"> Fenerbahçe</label>
    <label for="chb3"><input type="checkbox" name="kontrol" id="chb3"> BoluSpor</label>
    <label for="chb4"><input type="checkbox" name="kontrol" id="chb4"> Galatasaray</label>
    <label for="chb5"><input type="checkbox" name="kontrol" id="chb5"> Beşiktaş</label>
    <br><br>
    </form>
    </body>
    </html>

Ne yaptık? Her kutucuğa id="..." parametresi ile kimlik verdik. Ve her etiketi for="..." parametresine kutucukların kimliklerini yazarak, o kutucağa bağlamış olduk. Kullanıcı etikete bastığı zaman, bağlı olduğu kutucuğu seçmiş olacaktır.

Seçenek Kutusu

En çok kullanılan form araçlarından biri de seçenek kutusudur. Bu form aracı sayesinde kullanıcının gireceği bilgiler sınırlandırılır v yönlendirilir. Seçenek kutusu oluşturmak için <select<...</select> kodları arasında her seçeneğin önüne <option> kodu kullanılır:

Sayfa yüklendiğinde seçenek kutusunda görünmesini istediğiniz seçeneğe selected parametresini atayın.

Bu bölüm ileriki derslere hazırlık mahiyetindedir. HTML'in konusu form araçlarının gösterilmesiyle sınırlıdır. Bu araçları işlevsel hale getirebilmek için VBScript veya JavaScript derslerimizde öğreneceğimiz kodları kullanmamız gerekmektedir. Bu sayfalık bu kadar, görüşmek üzere.

Form Araclari