HTML Form Nesneleri, text, select, radio, checbox, textarea, password, date Kullanımı

Daha önceki dersimizde HTML'ye giriş yapmış ve form nesnesi içinde text ve submit nesnelerini kullanmıştık. Bu dersimizde bir form tasarlarken ihtiyaç duyacağınız tüm HTML Form etiketlerinin kullanımını inceleyeceğiz. Aşağıdaki gibi basit bir kayıt formu yapacağız.


 
Yukarıdaki formun kodları aşağıda verilmiştir. Kopyala- yapıştır yapmak yerine kodları satır satır yazarak nasıl kullanıldığını öğrenmenizi tavsiye ederim. Hangi kodun ne amaçla kullanıldığı yeşil açıklama satırlarında belirtilmiştir. Bu arada HTML'de açıklama satırları yazmak için <!-- açıklama --> gibi bir kullanıyoruz.

Burada saf HTML kodları olduğu için formumuz henüz istediğimiz görsellikte değil. Bir table nesnesi içine form nesnelerini yerleştirirseniz daha düzgün görünecektir, ya da sonraki derslerimizde CSS kullanarak makyajlama yapacağız. 

<!DOCTYPE html>
<html>
<head>
<title>Form Uygulamaları</title>
<meta charset="utf-8">
</head>
<body>
<!-- Form tanımı yapılıyor -->
<form action="kaydet.php" metod="POST">
 
<h1>Öğrenci Kayıt </h1>
<!-- Text nesnesi ile ad için metin kutusu oluşturuluyor-->
Adı:<input type="text" name="ad"  maxlength="5" size="20" ><br>
 
<!-- Text nesnesi ile soyad için metin kutusu oluşturuluyor-->
Soyadı:<input type="text" name="soyad"><br>

<!-- Text nesnesi ile TC Kimlik No için metin kutusu oluşturuluyor-->
TC:<input type="text" name="tc"><br>

<!-- Cinsiyet girişi için radyo düğmeleri oluşturuluyor-->
Cinsiyet :
  Bay<input type="radio" value="Bay" name="cinsiyet">
  Bayan<input type="radio" value="Bayan" checked="on" name="cinsiyet"><br>

<!-- Hobiler için onay kutuları oluşturuluyor-->
 Hobiler: <br>
 <input type="checkbox" name="kitap">Kitap<br>
<input type="checkbox" name="sinema">Sinema<br>

<!-- Özgeçmiş için textarea nesnesi oluşturuluyor-->
Özgeçmiş: <br>    
<textarea cols="20" rows="6"></textarea><br>

<!-- Şifre girişi için  password nesnesi oluşturuluyor-->
Şifreniz: 
<input type="password" maxlength="8"  name="sifre"><br>

<!-- Seçim kutusu  oluşturuluyor-->
Eğitim: 
<select name="egitim">
<option value="1">Ön Lisans</option>
<option value="2">Lisans</option>
<option value="3">Yüksek Lisans</option>
<option value="4">Doktora</option>
</select><br>

<!-- Tarih için yeni HTML5 date nesnesi oluşturuluyor-->
Doğum Tarihi:<input type="date" name="dogumtarihi"><br>

<!-- Kaydet düğmesi oluşturuluyor-->
 <input type="submit" value="Kaydet">

</form>
<!-- Form tanımı bitiyor -->
</body>
</html>

İlerleyen derslerimizde HTML nesnelerinde devam edeceğiz.

Mutlu kodlamalar,
Oğuzhan TAŞ
Kasım, 2018
 
Bookmark and Share
Dil Değiştir(Change Language)
Kategoriler
Kütüphane Programı
En çok Okunan 18 Makale