Perfect Hack Team
html-ders5
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:
<html> <body> <form> Ad: <input type="text" name="name"><br/> Soyad: <input type="text" name="lastname"> </form> </body> </html>
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.
<html>
<body>
<form>
Ad: <input type="text" name="firstname" value="adınızı giriniz"><br/>
Soyad: <input type="text" name="lastname" value="soyadınızı giriniz"><br/>
<input type="submit" value="Gönder">
</form>
</body>
</html>
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.
<html> <body> <form> <input type="radio" name="cinsiyet" value="bayan">Bayan<br/> <input type="radio" name="cinsiyet" value="erkek">Erkek<br/> <input type="submit" value="Kaydet"> </form> </body> </html>
Ü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.
<html>
<body>
<h5>Hangi Tür Müzikleri Seversiniz</h5>
<form>
<input type="checkbox" name="music" >Pop<br/>
<input type="checkbox" name="music" >Rock<br/>
<input type="checkbox" name="music" >Arabesk<br/>
<input type="checkbox" name="music" >Türk Sanat Müziği<br/>
<input type="submit" value="Kaydet">
</form>
</body>
</html>
Yazılan kodun sonucunda, birden çok seçimi yapabiliyoruz:
Son olarak açılır liste oluşturmayı da görelim:
<html>
<body>
<h5>İlk öğrendiğiniz programlama dilini seçiniz</h5>
<form>
<select name="proglamlama dilleri" >
<option value="C">C<br/>
<option value="C++">C++<br/>
<option value="Pascal">Pascal<br/>
<option value="Java">Java<br/>
</select>
</form>
</body>
</html>