Serimizin son yazısında HTML’de basit bir form yapısını inceliyoruz. Bu form, bir web sitesinde kullanıcıdan bilgi almak için kullanılır. Formun genel amacı, kişisel bilgiler gibi temel verileri toplamaktır. Şimdi adım adım bakalım, bu formun içinde neler bulunur.Form yapısı her zaman <form> etiketiyle başlar. Bu etiketin içine, kullanıcıdan bilgi almamıza yarayan çeşitli alanlar yerleştiririz. Her bir alan, farklı türde veri toplamak için görev yapar.İlk olarak kullanıcıdan ad ve soyad bilgisi alınır. Bunun için iki adet <input type=”text”> etiketi kullanılır. placeholder özelliğiyle, kullanıcıya ne tür bir bilgi girmesi gerektiği örnek olarak gösterilir. Ayrıca required özelliğiyle bu alanın doldurulması zorunlu hale getirilir.Şifre girişi yapılması gerekiyorsa, <input type=”password”> etiketi tercih edilir. Bu, girilen karakterleri gizler. maxlength=”15″ özelliğiyle de en fazla 15 karakter girilmesine izin verilir.E-posta adresi almak için <input type=”email”> kullanılır. Bu alan, girilen verinin e-posta formatına uygun olup olmadığını kontrol eder. Telefon numarası içinse <input type=”tel”> etiketi kullanılır. placeholder ile de örnek bir format gösterilir; örneğin “(555)-555-5555”.Doğum tarihi bilgisi alınacaksa, <input type=”date”> etiketi kullanılır. Bu alan, kullanıcıya takvim arayüzü sunar ve doğrudan tarih seçmesine olanak tanır.Cinsiyet seçimi yapılması gerekiyorsa, <input type=”radio”> etiketlerinden yararlanılır. Bu radio butonlarının her biri bir seçeneği temsil eder. Hepsinin name değeri aynı olduğunda, kullanıcı yalnızca bir tanesini seçebilir. Seçenekler <label> etiketleriyle birlikte gösterilir.Kardeş sayısı gibi sayısal veriler toplamak istiyorsak, <input type=”number”> etiketini kullanırız. min ve max özellikleriyle girilebilecek sayı aralığı belirlenir.Sigorta türü gibi sabit birkaç seçenekten birini seçtirmek istediğimizde, <select> etiketi kullanılır. Bu etiketin içinde yer alan <option> etiketleriyle seçenekler sunulur. Kullanıcı, listeden bir tanesini seçer.“Aktif olarak çalışıyor mu?” gibi evet/hayır tarzı sorular için <input type=”checkbox”> kullanılır. Kullanıcı bu kutuyu işaretleyerek onay verir ya da boş bırakır.Daha uzun açıklamaları almak için <textarea> etiketinden faydalanırız. cols ve rows özellikleriyle bu metin alanının genişliği ve yüksekliği belirlenir.Kullanıcıdan bir dosya yüklemesini istediğimizde ise <input type=”file”> etiketini kullanırız. Eğer sadece belirli türde dosyaların yüklenmesini istersek, örneğin sadece PDF dosyaları, o zaman accept=”.pdf” özelliğini ekleriz.Formun en sonunda iki tane buton bulunur. <input type=”reset”> butonu formdaki tüm alanları temizler, yani formu sıfırlar. <input type=”submit”> ise formu gönderir.İşte, HTML ile hazırlanan bu örnek form, kullanıcıdan temel bilgileri toplamak için oldukça uygun bir yapıdır. Web sitelerinde form yapıları çok önemli yer tutar. Siz de bu yapıdan yola çıkarak kendi projelerinizde benzer formlar tasarlayabilirsiniz. Gördüğünüz gibi, HTML’de form oluşturmak hem mantıklı hem de sistematik bir süreçtir.
Ve formumuzun görünümü aşağıda göründüğü şekilde:)
Her bitiş yeni bir başlangıç 🙂
