HTML Formlar
Lisans:
Creative Commons
26.11.2020
tarihinde güncellendi
Bakabileceğiniz Etiketler:
Eğitmen:
Geleceği Yazanlar Ekibi
HTML formları kullanıcıdan veri almak için kullanılır.
<form> etiketi bir form tanımlar ve burada kullanılacak diğer etiketlerle birlikte kullanıcıdan veri alınmasına yardımcı olur. Bu eğitimde bu elemanların bazılarını nasıl kullanacağınızı öğreneceğiz. İlerleyen 201 HTML5 & CSS derslerinde ise HTML5 ile gelen yeni form elemanlarını göreceğiz.
En basit haliyle bir form oluşturalım:
<form>
<!-- Form elemanları -->
</form>
Input etiketi
Input etiketi en önemli form elemanıdır. Tip belirteçlerini kullanarak aşağıda ayrıntısıyla anlattığımız elemanları kullanabilirsiniz:
Metin Alanı (Text Field): Kısa metin girişlerini yüklemek için kullanılabilecek olan alanlardır. İsimler, arama anahtarları adresleri girmek için kullanılır.
Seçme Listeleri (Select List): Seçme listesi, kullanıcının içinden bir ya da daha fazla elemanı seçebileceği veri listeleridir. Uzun fakat sonlu bir seçenekler listesi sunmak amacıyla kullanılabilir. Örneğin bir ülkeler listesinden ülke seçmek ya da bir yazıcılar listesinden yazıcı seçmek gibi eylemler bu elemanın kullanılmasını gerektirir.
Denetim Kutusu (Checkbox): Denetim kutusu, web sayfasını ziyaret eden İnternet kullanıcılarının bir veriler listesinden,
- bir tek veri
- birden çok veri seçmek ya da
- hiçbir veri seçmemek olanağı sağlayan kontrol nesnesidir.
Genellikle birden çok veriyi seçmek için kullanılır.
Radyo düğmesi (Radio button): Kullanıcılara tek bir seçim yapma olanağı veren kontrol nesnesidir.
Metin bölgesi (TextArea): Normalden uzun olan metinler için kullanılabilecek olan kontrol nesnesidir. Serbest biçimli cevaplar için kullanılabilir.
Submit ve Reset düğmeleri: Submit (Gönder) düğmesiyle form üzerine girilen bilgi işlenmesi için URL'i verilen sunucu sayfasına gönderilir. Reset (Sıfırla ya da Temizle) düğmesiyle form içindeki bilgi silinerek başlangıç konumuna getirilir.
Bir formun genel yapısı
Şimdi gelin, bir formun genel yapısını detaylı inceleyelim.
Bir form oluşturmak için ilk adım, HTML kodu içine <form> etiketini eklemek ve Submit (gönder) ve Reset (Sil) düğmelerini yerleştirmektir.
Submit ve Reset düğmeleri gerçekten de bir form üzerindeki temel elemanlardır. Web sayfasına gelen kullanıcıların çoğu bu sayfadaki bir formu doldurarak Submit düğmesiyle bu formdaki bilgileri, sunucudaki bir dosyaya göndermek isteyecek. Bazı durumlarda o ana kadar form üzerindeki alanlara yerleştirilmiş bilgilerin silinmesi istenebilir. Bu durumda da Reset düğmesine ihtiyacımız olacak.
Şimdi basit bir form örneğiyle kullanımlarına bakalım:
<!DOCTYPE html>
<html>
<head>
<title>SALZBURG</title>
</head>
<body>
<div align="center">
<font face="courier" size="6" color="red">
BENZERSİZ ŞEHİR SALZBURG TURLARI İÇİN<br>
BİZİ ARAYINIZ
</font>
</div>
<hr width="90%" size="5" noshade>
<form method="post" action="form_gonder.php">
<input type="text" name="adiniz">ADINIZ<br>
<input type="text" name="soyadiniz">SOYADINIZ<br>
<input type="text" name="adresiniz">ADRESİNİZ<br>
<input type="text" name="tel-no">TEL.NO<br>
<input type="submit" value="GÖNDER" align="center">
<input type="reset" value="SİL" align="center">
</form>
<hr width="90%" size="5" noshade>
<div align="center">
<address align="left">
<font face="Arial">
<br>ÖRNEK TOUR<br>
<a href="mailto:ornek@ornektour.com.tr">ornek@ornektour.com.tr</a>
<br>
Mevcudiyet Cad.84-80767-Şişli<br>
İSTANBUL<br>
</font>
</address>
</div>
</body>
</html>
Not: İlerleyen 301, 401 ve 501 seviyesi derslerde bu verileri kaydedecek arkaplan servislerini yazmayı öğreneceğiz.