Merhaba sevgili Webkolog okurları,
Bugün sizlere web sitenizi daha interaktif hale getirmenin ve ziyaretçilerinizden bilgi toplamanın en temel yolu olan HTML formlarını anlatacağım. Düşünün ki bir anket yapmak, bir sipariş almak ya da ziyaretçilerinizin yorumlarını toplamak istiyorsunuz. İşte tam da bu noktada HTML formları devreye giriyor! HTML 4.01 ile oluşturacağımız formlar sayesinde, kullanıcılarınızla etkileşim kurmak artık çok daha kolay.
<form>
Etiketi: Her Şeyin Başlangıcı
Bir form oluşturmaya başlamadan önce, tüm form elementlerimizi sarmalayacak olan <form>
etiketini kullanmalıyız. Bu etiket, formun nasıl davranacağını belirleyen önemli özelliklere sahiptir.
<form action="islem_sayfasi.php" method="POST" id="iletisim_formu">
<!-- Form elementleri buraya gelecek -->
</form>
action
: Form gönderildiğinde verilerin nereye gönderileceğini belirler. Genellikle bu, sunucu tarafında verileri işleyecek bir PHP, ASP veya JSP dosyasıdır.method
: Form verilerinin nasıl gönderileceğini belirtir. En yaygın kullanılan iki değerGET
vePOST
'tur.GET
, verileri URL'de gösterirken,POST
verileri daha güvenli bir şekilde gizli olarak gönderir. Özellikle hassas bilgiler (şifreler gibi) içinPOST
tercih edilmelidir.id
: Forma benzersiz bir kimlik verir. JavaScript ile forma erişmek istediğimizde bu kimliği kullanırız.
<input>
Etiketi: Temel Giriş Alanları
<input>
etiketi, formların olmazsa olmazıdır ve farklı türde veri giriş alanları oluşturmak için kullanılır. İşte en sık kullanılan type
değerleri:
text
(Metin Kutusu): Tek satırlık metin girişi için kullanılır.
<input type="text" name="kullanici_adi" size="30" maxlength="50">
name
özelliği, gönderilen veriye bir isim verir. size
kaç karakterin görüneceğini, maxlength
ise kaç karaktere kadar yazılabileceğini belirler.
password
(Şifre Kutusu): Girilen karakterleri yıldız veya noktalarla gizler.<input type="password" name="sifre">
file
(Dosya Yükleme): Kullanıcıların bilgisayarlarından dosya seçmelerini sağlar.<input type="file" name="yuklenecek_dosya">
hidden
(Gizli Alan): Kullanıcının görmediği, ancak formla birlikte gönderilen gizli veriler için kullanılır.<input type="hidden" name="sayfa_id" value="123">
checkbox
(Onay Kutusu): Birden fazla seçeneğin seçilmesine olanak tanır.<input type="checkbox" name="hobi" value="spor"> Spor
<input type="checkbox" name="hobi" value="kitap" checked> Kitap Okuma
checked
özelliği, varsayılan olarak seçili gelmesini sağlar.
radio
(Seçenek Düğmesi): Bir gruptan yalnızca bir seçeneğin seçilmesine olanak tanır. Aynı name
özelliğine sahip tüm radyo düğmeleri bir grup oluşturur.<input type="radio" name="cinsiyet" value="erkek"> Erkek
<input type="radio" name="cinsiyet" value="kadin" checked> Kadın
button
(Genel Düğme): JavaScript ile belirli bir eylemi tetiklemek için kullanılır.<input type="button" name="mesaj_goster" value="Mesaj Göster" onclick="alert('Merhaba!');">
submit
(Gönderme Düğmesi): Formu gönderir.<input type="submit" name="form_gonder" value="Gönder">
reset
(Sıfırlama Düğmesi): Formdaki tüm alanları varsayılan değerlerine sıfırlar.<input type="reset" name="form_sifirla" value="Temizle">
image
(Resimli Gönderme Düğmesi): Bir resim kullanarak formu göndermenizi sağlar. Tıklandığında resmin tıklandığı koordinatları da gönderir.<input type="image" src="gonder_butonu.gif" name="gonder_resim" alt="Formu Gönder">
<textarea>
Etiketi: Çok Satırlı Metin Girişi
Uzun yorumlar veya açıklamalar almak istediğinizde <textarea>
etiketini kullanırız.
<textarea name="yorum" rows="5" cols="40">Yorumunuzu buraya yazın...</textarea>
rows
: Metin alanının yüksekliğini (satır sayısını) belirler.cols
: Metin alanının genişliğini (karakter sayısını) belirler.- Etiketler arasına yazılan metin, başlangıçta kutunun içinde görünen varsayılan metindir.
<select>
ve <option>
Etiketleri: Açılır Listeler
Kullanıcıların önceden tanımlanmış bir listeden seçim yapmasını sağlamak için <select>
ve <option>
etiketlerini kullanırız.
<select name="favori_dil">
<optgroup label="Frontend Diller">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js" selected>JavaScript</option>
</optgroup>
<optgroup label="Backend Diller">
<option value="php">PHP</option>
<option value="asp">ASP</option>
</optgroup>
</select>
<select>
: Açılır listenin kendisidir.name
özelliği zorunludur.<option>
: Listede yer alan her bir seçenektir.value
özelliği, form gönderildiğinde bu seçeneğin değerini belirler.selected
özelliği, varsayılan olarak seçili gelmesini sağlar.<optgroup>
: Seçenekleri mantıksal gruplara ayırmak için kullanılır.label
özelliği grubun başlığını gösterir.
<label>
Etiketi: Giriş Alanlarını Etiketleme
Form elemanlarını etiketlemek, hem kullanıcı deneyimi hem de erişilebilirlik açısından çok önemlidir. <label>
etiketi ile bir giriş alanını açıkça ilişkilendirebiliriz.
<label for="kullanici_adi_kutusu">Kullanıcı Adınız:</label>
<input type="text" id="kullanici_adi_kutusu" name="kullanici_adi">
Burada <label>
etiketinin for
özelliği, ilişkilendirdiği <input>
etiketinin id
özelliği ile aynı olmalıdır. Bu sayede, etikete tıklandığında ilgili giriş alanı odaklanır.
<fieldset>
ve <legend>
Etiketleri: Formu Gruplama
Uzun ve karmaşık formları daha düzenli hale getirmek için <fieldset>
ve <legend>
etiketlerini kullanabiliriz.
<fieldset>
<legend>Kişisel Bilgiler</legend>
<label for="ad">Adınız:</label>
<input type="text" id="ad" name="ad"><br>
<label for="soyad">Soyadınız:</label>
<input type="text" id="soyad" name="soyad">
</fieldset>
<fieldset>
etiketi, ilgili form elemanlarını görsel olarak gruplar. <legend>
etiketi ise bu grubun başlığını belirler.
HTML 4.01 ile form oluşturmak, web sitenizi dinamik ve interaktif hale getirmenin ilk adımıdır. Bu etiketleri doğru kullanarak, ziyaretçilerinizden istediğiniz bilgileri kolayca toplayabilir ve onlarla daha güçlü bir bağ kurabilirsiniz. Unutmayın, iyi tasarlanmış bir form, kullanıcı deneyimini doğrudan etkiler!
Webkolog'u takipte kalın!
Hepinize bol kodlu ve keyifli öğrenme süreçleri dilerim!
0 yorum:
Yorum Gönder