Breaking News
Loading...
, , , , , , , , , , , , , ,

HTML Kodlama Dersi - VI / (Form Elemanları)

Share on Google Plus


HTML Form Elemanları

Bu yazıda HTML form elemanlarını öğreneceğiz. Nedir bunlar ne işe yarar önce bunlardan bahsedelim... Form elemanlarını, kullanıcı bilgi girişinde kullanır. Form elemanları kullanıcı adı, şifre girişi gibi alanlar oluşturmamızı sağlar. Aynı zamanda onay kutuları oluştururken de kullanırız. Mesela kullanıcıdan evli veya bekar olduğu, evi arabası olup olmadığı bilgilerini alırken form elemanlarıyla oluşturacağımız onay kutularından yararlanırız.
Form elemanları <form>..</form> etiketleri arasına yazılır. input en çok kullanacağımız form etiketidir. Kapatılmaz. input etiketi içerisinde kullanılan type ifadesiyle girdi türü belirlenir. Bir örnek yapacak olursak:

Yukarıda yaptığımız örnek tarayıcıda aşağıdaki gibi gözükecektir:
Ad:   
Soyad:   

type="..." ve name="..." ifaderi dinamik web sayfası oluştururken daha iyi anlaşılacaktır. Henüz detaya girmeyelim. Ancak şunu bilmekte yarar var: text, name ve lastname yerine Türkçe karakter içermeyen Türkçe ifadeler de kullanabiliriz. (Yani name="kullaniciadi" şeklinde bir ifade de geçerli olurdu.) Şimdi örneğimizi biraz daha geliştirelim. Bir gönderme butonu oluşturalım ve ad soyad kutucuklarına sayfa açıldığında görüntülenecek yazılar ekleyelim.

Sayfada göreceğimiz yapı aşağıdaki gibi olacaktır:
Ad:   
Soyad:   

Submit ifadesiyle buton oluşturduk. Value ise butonun ve kutucukların içindeki ifadeleri yazmamızda kullanıldı. Onay kutuları oluşturmamızda da işe yarayacağından bahsetmiştik. Bununla ilgili ilk örneğimizi de yapalım.

Bayan
Erkek
Üstteki örnekte görülen "radio" ifadesi tek seçeneği seçmemizi sağlar. Birden fazla seçenek seçmemizi gerektiren durumlar da ise checkbox ifadesini kullanırız.

Yazılan kodun sonucunda, birden çok seçimi yapabiliyoruz:
Pop
Rock
Arabesk
Türk Sanat Müziği
Son olarak açılır liste oluşturmayı da görelim:

İlk öğrendiğiniz programlama dilini seçiniz

You Might Also Like

0 yorum

About me

Like us on Facebook

Blog Archive