Formlar, web sayfası tasarlayan kişi veya şirketlerle internet kullanıcıları arasındaki
veri alışverişini sağlamak için ideal bir araçtır.
Formlar iki yönlü olarak çalışır; web tarayıcı tarafından ekranda oluşturulan görüntü,
kullanıcı tarafından doldurulduktan sonra gönderilir ve web tarayıcı bu bilgileri alarak
sunucuda çalıştırılan bir programa iletir. Program bilgileri değerlendirdikten sonra gerekli
işlemleri yapar.
1. <form>
Bir form oluşturmak için <form>…</form> etiketleri arasına istenilen kontroller
input etiketi sayesinde belirtilir. Kontrollerden toplanan bilgilerin nasıl değerlendirileceği
form etiketinin içinde gösterilir.
Genel kullanım
<FORM ACTION=url METHOD=get- post TARGET=pencere> ….. </FORM>
Action :
Formdan girilecek bilgilerin değerlendirileceği dosyanın tam yolunu gösterir.
Method :
Formdan girilecek bilgilerin değerlendirici dosyaya gönderilme yöntemini belirtir.
GET değeri verildiğinde kontrollere girilen içerik o anda bulunulan adrese eklenip
değerlendiriciye gönderilir. POST değeri ise form içeriğini direkt olarak değerlendiriciye
yönlendirir.
Target :
Form değerlendirici tarafından kullanıcıya geri gönderilen yanıtın hangi pencerede
belireceğini gösterir. Pencere isimleri HTML 1 modülü bağlantılar konusunda da
gösterdiğimiz “_blank” , “ _top” gibi değerlerden biri olabilir.
2. <input>
Genel amaçlı bir form etiketidir. Sonlandırıcı etiketi yoktur.
Girdi türü type öğesinde belirtilerek farklı girdilerin alınmasını sağlar.
ALIGN :
Elemanın form üzerinde nasıl konumlanacağını belirtmek için
kullanılır (left, center, right). Eğer type değeri bir resim olarak
atanırsa bir sonraki satırın resme göre nasıl yerleştirileceğini
belirler. Top, middle veya bottom değerlerinden birini alabilir.
CHECKED :
Kontrol olarak bir işaretleme veya seçim kutusu
kullanıldığında CHECKED değeri bu kutuların işaretlenmiş
olarak karşımıza gelmesini sağlar.
MAXLENGTH :
“text” ve “password” elemanlarında girilebilecek en çok
karakter sayısını belirtmek için kullanılır. Öntanımlı değeri
sınırsızdır.
NAME :
Girilen verinin hangi değişken ismi altında
değerlendirileceğini belirtmek için kullanılır. Mutlaka
belirtilmelidir.
SIZE :
“text” ve “password” elemanlarında karakter sayısını,
diğerlerinde ise piksel cinsinden genişliği belirtmek için
kullanılır.
SRC :
"image" elemanında resim dosyasını belirtmek için kullanılır.
TYPE :
Eleman türü belirtilir. text, password, checkbox, radio,
submit, reset, file, hidden, image, button değerlerinden biri
kullanılır.
Form Nesneleri
1. CheckBox
Formumuza onay kutuları eklemek için kullanılır.
Örnek:
<HTML><body >
<FORM ACTION=' http://internet/form' METHOD=POST>
<input type="checkbox" name="kutu1" checked="on"> HTML<br>
<input type="checkbox" name="kutu2"> PHP<br>
<input type="checkbox" name="kutu3"> MySQL
</FORM></body></HTML>
2. Radio
Kullanıcının birçok seçenek içerisinden bir tanesini seçebilmesine olanak tanır. Grup
içindeki radio kontrolleri her zaman aynı ismi taşımalı, değerleri ise value değerine
atanmalıdır.
Örnek:
<HTML><body >
<FORM ACTION=' http://internet/form' METHOD=POST>
<input type="radio" name="kutu" value="1"> HTML<br>
<input type="radio" name="kutu" value="2"> PHP<br>
<input type="radio" name="kutu" value="3"> MySQL</FORM>
</body></HTML>
3. Text
Kullanıcıdan tek satırlık veri alınmasına olanak tanır. Size ve maxlength takıları, bu
kontrolle birlikte kullanılabilir.
Örnek:
Adı:
Soyadı:
Adı: <input type="text" name="firstname"><br>
Soyadı: <input type="text" name="lastname">
4. Image
Bir resmi ifade eder ve üzerine tıklandığında form değerlerini sunucuya yollar.
Genellikle bu amaçla kullanılsa da istenilirse kullanıcının resmin hangi x ve y noktalarına
dokunduğu öğrenilebilir. Bu tag src ile birlikte kullanılır ve src komutu resmin bulunduğu
URL'yi göstermelidir.
5. Password
Formumuza parola yazılabilecek alan eklemek için kullanılır. “text” elemanından
farklı olarak bu alana girilen karakter aşağıdaki gibi gösterilir. Bu “*” işareti de olabilir.
Örnek:
Kullanıcı:
Parola:
Kullanıcı:
<input type="text" name="username"><br>
Parola:
<input type="password" name="password">
6. Textarea
Metin alanı anlamına gelen bu kelime formunuza yazı yazılabilecek alan eklemek için
kullanılır. Yardımcı öğeler olarak rows ve cols kullanılır.
7. Reset
Tıklandığında form içeriğini temizler. Kullanıcının formu tekrar doldurmasını sağlar.
8. Submit
Form içeriğini sunucuya yollar. Value değeri kullanılarak üzerindeki yazı
değiştirilebilir.
Örnek:
Form Etiketleri
Sanal Sınıf
<html>
<head><title>Form Etiketleri</title><head><body>
<h1> Sanal Sınıf</h1>
<form action="http://pcsistem.net" method="post"><br>
Kullanıcı Adı:<input type="text" name="ad"><br>
E-posta Adresi:<input type="text" name="eposta"><br>
İletmek istediğiniz mesaj varsa aşağıdaki alanı kullanınız.
<textarea name="mesaj" rows="10" cols="50" >
</textarea> <br>
Almış olduğunuz dersleri işaretleyiniz<br>
<input name="ders" type="checkbox" value="programlama" checked="on">
Pascal
<input name="ders" type="checkbox" value="isletim" > İletim Sistemi
<input name="ders" type="checkbox" value="HTML">HTML <br>
<input type="submit" value="send">
<input type="reset" value="reset">
</form>
</body></html>
0 Yanıt
3095 Gösterim