Your Ad Here

HTML

30 Kasım 2007

HTML Bilgi Girişi (Forms) ve Girişler (Input)


Doldurulacak Belgeler

Bir doldurulacak belge, belge öğelerini içeren bir alandır.
 Doldurulacak belge öğeleri, kullanıcıya bilgi girmesini sağlayan bilgi giriş alanlarıdır (yazı alanları, açılabilen menüler, radyo düğmeleri, seçme kutusu vb).
Doldurulacak belge <form> biçimiyle tanımlanır.
 
<form>
  <input>
  <input>
</form>

Giriş Alanı (Input)

Doldurulacak belge alanında en çok kullanılan biçim <input> olarak belirtilebilir.

Yazı Alanları (Text Fields)

Yazı alanları, kullanıcıların harfler, sayılar vb bilgiler yazmaları için kullanılır.
 
<form>
Ad: 
<input type="text" name="firstname">
<br>
Soyad: 
<input type="text" name="lastname">
</form>

Bir tarayıcıda şöyle görünür:
Ad:
Soyad:

Dikkat ettiyseniz "form" kendisi görünmez. Bir çok tarayıcıda, yazı alanının varsayılan eni 20 karakter olur.

Radyo Düğmesi (Radio Buttons)

Bir kullanıcının sınırlı sayıda seçeneklerden birini işaretlemek gerektiğinde kullanılır
 
<form>
<input type="radio" name="sex" value="male"> Erkek
<br>
<input type="radio" name="sex" value="female"> Kadın
</form>
Tarayıcıda nasıl göründüğünü anlamak için:
Erkek
Kadın

Burada yalnız bir seçenek işaretlenebilir.

Seçme kutusu (Checkboxes)

Seçme kutusu, kullanıcının bir ya da daha çok sınırlı sayıdaki seçenek arasından birini seçmesini istendiğinde kullanılır. 
<form>
Bisikletim var:
<input type="checkbox" name="vehicle" value="Bisiklet" />
<br />
Arabam var:
<input type="checkbox" name="vehicle" value="Araba" />
<br />
Uçağım var:
<input type="checkbox" name="vehicle" value="Uçak" />
</form>
Tarayıcıda nasıl göründüğü aşağıda gösterilmiştir.

Bisikletim var:
Arabam var:
Uçağım var:

Dordurulacak belgede işlem (action) niteliği ve Gönder (Submit) düğmesi

Kullanıcı "Gönder" düğmesini tıkladığında, doldurulacak belge alanındaki bilgi alanları başka bir dosyaya iletilir. Doldurulacak belgenin işlem niteliği, içeriğin gönderileceği dosyanın adını taşır. Bu dosya gelen giriş bilgisiyle işlem yapacak biçimde düzenlenmiştir.

 
<form name="input" action="html_form_action.asp"
method="get">
Kullanıcı Adı: 
<input type="text" name="user">
<input type="submit" value="Gönder">
</form>
Tarayıcıda bu kodun nasıl göründüğü aşağıda belirtilmiştir.
Kullanıcı Adı:

Eğer yukarıdaki yazı alanına bazı karakterler yazarsanız ve "Gönder" düğmesini tıklarsanız, giriş bilgilerini "html_form_action.asp" dosyasına iletirsiniz. O dosya gelen bilgileri WEB sayfasına yazar. (Bilgi için: Bu örnekte işlem tamamlanmaz).