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.)
codeDivStart() <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.
codeDivStart() <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.
codeDivStart()
<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>