Form Araçları
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.)
<html>
<head>
<title>Metin Kutusu</title>
</head>
<body>
<form name="metinkutusu">
Aşağıdaki bilgileri giriniz lütfen:<br><br>
Adınız:
<input type="text" name="isim"><br>
Soyadınız:
<input type="text" name="soyisim">
</form>
</body>
</html>
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.
<html>
<head>
<title>Metin Kutuları</title>
</head>
<body>
<form name="metinkutusu">
Formu doldurun lütfen:<br><br>
En büyük:
<input type="text" name="takım" size="10" value="ALTAY"><br>
Aşağıdaki kutuya adınızı yazın (üç harfi geçmesin):<br>
<input type="text" name="ad" size="10" maxlength="3">
</form>
</body>
</html>
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.
<html>
<head>
<title>Metin Kutuları</title>
</head>
<body>
<form name="göztepe">
Göztepelilere 2010 yılı için mesaj var:<br>
<input type="text" name="mesaj1" size="50" value="Göztepe'nin şampiyonluğunu kutlarız." readonly><br>
<input type="text" name="mesaj2" size="50" value="Hele şükür 2. lige çıkabildiniz." readonly><br>
</form>
</body>
</html>
Ş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 eder
<html>
<head>
<title>Şifre</title>
</head>
<body>
<form name="Şifre">
Kullanıcı Adı:
<input type="text" name="ad" size="25"><br>
Şifre: (5 karakter)
<input type="password" name="pwd" size="10" maxlength="5"><br>
</form>
</body>
</html>
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.
<html>
<head>
<title>Arama Motoru</title>
</head>
<body>
<form name="arama">
ARAMA MOTORU:<br>
<input type="text" name="kutu" size="18">
<input type="button" name="dugme" value="ara"><br>
</form>
</body>
</html>
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.
<html>
<head>
<title>Düğme Oluşturma</title>
</head>
<body>
<br><br>
<button>
<font face="Comic Sans Ms">Bu düğmeye basın lütfen...</font>
</button>
<br><br>
<button>
<img src="yer.gif">
</button>
<br><br>
<button>
<table border="1">
<tr>
<td>HTML</td>
<td>CSS</td>
</tr>
<tr>
<td>JavaScript</td>
<td>VBScript</td>
</tr>
</table>
</button>
</body>
</html>
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.
<html>
<head>
<title>Arama Motoru</title>
</head>
<body>
<form name="arama">
ARAMA MOTORU:<br>
<input type="text" name="kutu" size="18">
<input type="image" name="dugme" src="go.gif" align="top"><br>
</form>
</body>
</html>
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:
<html>
<head>
<title>Futbol Testi</title>
</head>
<body>
<form name="kutular">
Aşağıdaki futbol takımlarından hangisi şampiyonluk yaşamıştır?<br>
<input type="radio" name="radyo1"> Göztepe
<input type="radio" name="radyo2"> Karşıyaka
<input type="radio" name="radyo3"> Ankaragücü
<input type="radio" name="radyo4"> BucaSpor
<input type="radio" name="radyo5"> Hiçbiri
<br><br>
Aşağıdaki futbol takımlarından şampiyonluk yaşamış olanları işaretleyiniz?<br>
<input type="checkbox" name="kontrol1"> TrabzonSpor
<input type="checkbox" name="kontrol2"> Fenerbahçe
<input type="checkbox" name="kontrol3"> BoluSpor
<input type="checkbox" name="kontrol4"> Galatasaray
<input type="checkbox" name="kontrol5"> Beşiktaş
<br><br>
</form>
</body>
</html>
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.
<html>
<head>
<title>Düzeltilmiş Futbol Testi</title>
</head>
<body>
<form name="kutular">
Aşağıdaki futbol takımlarından hangisi şampiyonluk yaşamıştır?<br>
<input type="radio" name="radyo"> Göztepe
<input type="radio" name="radyo"> Karşıyaka
<input type="radio" name="radyo"> Ankaragücü
<input type="radio" name="radyo"> BucaSpor
<input type="radio" name="radyo"> Hiçbiri
<br><br>
Aşağıdaki futbol takımlarından şampiyonluk yaşamış olanları işaretleyiniz?<br>
<input type="checkbox" name="kontrol"> TrabzonSpor
<input type="checkbox" name="kontrol"> Fenerbahçe
<input type="checkbox" name="kontrol"> BoluSpor
<input type="checkbox" name="kontrol"> Galatasaray
<input type="checkbox" name="kontrol"> Beşiktaş
<br><br>
</form>
</body>
</html>
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:
<html>
<head>
<title>Seçenek kutusu</title>
</head>
<body>
<form name="kutular">
İzmir'in en büyük takımı hangisi?<br>
<select>
<option>Altay</option>
<option>Karşıyaka</option>
<option>Altınordu</option>
<option>İzmirSpor</option>
<option>BucaSpor</option>
<option>YeniBornova</option>
</select>
<br><br>
</form>
</body>
</html>
Sayfa yüklendiğinde seçenek kutusunda görünmesini istediğiniz seçeneğe selected parametresini atayın.
Volkan Derinbay'a tşkler. |
