Merhaba değerli Kodlama Vakti okuyucuları , geçen dersimizde Dosya Yolları (File Paths) adlı yazımızda HTML’de Dosya yolu kullanımını öğrenmiştik. Önceki dersimizi incelemediyseniz HTML Dersleri 15 – Dosya Yolları (File Paths) linkine tıklayarak ulaşabilirsiniz. Bu dersimizde HTML'in önemli bir konusu olan formlar konusunu öğreneceğiz.
Bir çok site gördüğünüz formlar, HTML'in ve site tasarlamanın en önemli konularından biridir. Sitelerde ki formlar yardımıyla kullanıcı ile etkileşim sağlanıyor, kullanıcıdan veriler alınıyor ve işleniyor. Bir siteye giriş yaparken, bir sipariş verirken neredeyse tüm etkileşimlerde formlar kullanılmaktadır.
Form Etiketi
HTML'de form oluşturmak için < form > etiketini kullanırız daha sonrasında içine form elemanları yazarız. Bu form elemanları metin kutuları,seçim kutuları, onay kutuları, radyo düğmeleri, gönderme düğmeleri vb. farklı türde öğeler bulunur.
Form etiketi kullanımı :
<form> ...Form Elemanları... </form>
Input Etiketi
Input etiketi , form etiketinin en önemli elemanıdır. < input > etiketi, type parametresine bağlı olarak farklı çeşitli şekillerde görüntülenir.
Örnek ;
| Tür (Type) | Açıklama |
|---|---|
| < input type="text" > | Tek satırlık metin alanı oluşturur. |
| < input type="radio" > | Bir radyo düğmesi tanımlar (birçok seçenekten birini seçmek için) |
| < input type="submit" > | Gönder düğmesini tanımlar (formu göndermek için) |
Metin Alanı (Input Fields)
HTML formlarda sıklıkla gördüğümüz tek satırlık metin alanlarını input etiketinin type parametresine text değerini vererek oluşturuyoruz.
Örnek Kullanım ;
<form> <label for="ad">Adınız:</label><br> <input type="text" id="ad" name="ad"><br> <label for="soyad">Soyadınız:</label><br> <input type="text" id="soyad" name="soyad"> </form>
Gördüğünüz üzere form etiketi tarayıcıda görünmez, form etiketinin amacı içine yazılan html kodlarının form elemanı olduğunu belirtmesidir. Input etiketinin varsayılan genişliği 20 karakterdir.
label Etiketi
Yukarıda ki örnekte label etiketi kullandık. Peki bu label etiketi ne işe yaramakta ? < label > etiketi, birçok form elemanı için bir etiket tanımlar.
< labe l> öğesi ayrıca çok küçük bölgelere (radyo düğmeleri veya onay kutuları gibi) tıklamakta zorluk çeken kullanıcılara da yardımcı olur - çünkü kullanıcı < label > öğesindeki metni tıklattığında radyo düğmesini / onay kutusunu değiştirir.
< label > etiketinin for parametresi, onları birbirine bağlamak için < input > öğesinin id parametresine eşit olmalıdır.
Radyo Düğmeleri (Radio Buttons)
Radyo düğmeleri kullanıcının sınırlı sayıda seçenekten bir tanesini seçmesine olanak tanır. Bu etiket kullanıcıya sunulan seçenekten bir tanesini seçmesini sağlar ve HTML Formlarda sıklıkla kullanılan bir etikettir.
Örnek Kullanım :
<form> <input type="radio" id="erkek" name="cinsiyet" value="erkek"> <label for="erkek">Erkek</label><br> <input type="radio" id="kadin" name="cinsiyet" value="kadin"> <label for="kadin">kadin</label><br> </form>
Örnekte formda kullanıcıya cinsiyet seçimi yaptırılmaktadır. Dikkat edildiği üzere , input etiketinin type parametresine radio yazdık ve name parametresine cinsiyet dedik. Hangi radyo düğmelerinin aynı seçeneğe uygun olduğunu belirtmek için name parametrelerini aynı olmalıdır.
Onay Kutuları (Checkboxes)
Onay kutuları yani "Checkboxes" kullanıcının sınırlı sayıdaki seçeneklerden bir veya birden fazlasını seçmesine yaramaktadır.Bu etiket kullanıcıya sunulan seçenekten bir veya birden fazlasını seçmesini sağlar ve HTML Formlarda onay kutuları sıklıkla kullanılan bir etikettir.
Checkboxes Örnek Kullanım :
<form> <input type="checkbox" id="java" name="deger1" value="Java"> <label for="java"> Java dilini öğrenmek istiyorum.</label><br> <input type="checkbox" id="html" name="deger2" value="html"> <label for="html"> HTML öğrenmek istiyorum.</label><br> <input type="checkbox" id="php" name="deger3" value="php"> <label for="php">PHP dilini öğrenmek istiyorum.</label> </form>
Yukarıda ki örnekte kullanıcıya birden fazla seçenek seçtirmek istediğimiz için için onay kutusu kullandık.
Gönder Düğmesi (Submit Button)
< input type=" submit" > form verilerini form işleyicisine göndermek için bir düğme tanımlar.
Form işleyici tipik olarak sunucudaki giriş verilerini işlemek için bir komut dosyası içeren bir sayfadır. Bunlar dinamik diller ile oluşturulmuş sayfalardır. Form işleyici, formun action parametresinde belirtilir.
Örnek Kullanım:
<form action="/aksiyon.php">
<label for="ad">Adınız:</label><br>
<input type="text" id="ad" name="ad" value="Kodlama"><br>
<label for="soyad">Soyadınız:</label><br>
<input type="text" id="soyad" name="soyad" value="Vakti"><br><br>
<input type="submit" value="Gönder">
</form>
Form Action Parametresi
Action özelliği, form gönderildiğinde gerçekleştirilecek eylemi tanımlar.Genellikle, kullanıcı gönder düğmesini tıklattığında form verileri sunucudaki bir sayfaya gönderilir. Yani formun gönder butonuna basıldığında formdaki verilerin hangi sayfaya gideceğini belirtir.
Yukarıdaki örnekte, form verileri sunucudaki "/aksiyon.php" adlı bir sayfaya gönderilir. Bu sayfa, form verilerini işleyen bir sunucu taraflı komut dosyasıdır.
Eğer action parametresi girilmez ise, form kendi bulunduğu sayfaya verileri gönderir.
Form Target Parametresi
Target parametresi, gönderilen form verilerinin yeni bir tarayıcı sekmesinde mi, bir çerçevede mi yoksa geçerli pencerede mi açılacağını belirtir. Bu önceden öğrendiğimiz < a > etiketinde kullanılan target ile aynı amaçla kullanılır.
Varsayılan değer "_self" şeklindedir, bu da formun geçerli pencerede gönderileceği anlamına gelir.
Form sonucunu yeni bir tarayıcı sekmesinde açmak için "_blank" değerini kullanılır.
Form Method Parametresi
Method parametresi, form verileri gönderilirken kullanılacak HTTP yöntemini (GET veya POST) belirtir.
Ne zaman GET parametresi kullanılır ?
Form verileri gönderilirken varsayılan HTTP yöntemi GET'dir. Ancak, GET kullanıldığında form verileri sayfanın adres alanında görünür olacaktır:
Örnek:
/aksiyon.php?ad=Kodlama&soyad=Vakti
GET Özellikleri;
- URL'ye form verilerini ad/değer çiftleriyle ekler
- Bir URL'nin uzunluğu sınırlıdır (2048 karakter)
- Hassas verileri göndermek için asla GET kullanmayın! (URL'de görünür olacak)
- Kullanıcının sonuca yer işareti koymak istediği form gönderimleri için kullanışlıdır.
Ne zaman POST parametresi kullanılır ?
Formlar verileri hassas veya kişisel bilgiler içeriyorsa her zaman POST kullanın. POST yöntemi, form verilerini sayfa adresi alanında görüntülenmez ve gizli şekilde yollar.
POST Özellikleri;
- POST'un boyut sınırlaması yoktur ve büyük miktarda veri göndermek için kullanılabilir.
- POST ile form gönderimleri yer imi olarak işaretlenemez
Name Parametresi
Her gönderilen form etiketi için bir name parametresi olmalıdır. Name parametresi o form elemanının kimliğini belirler.
Name parametresi girilmez ise o form elemanı gönderilmez.
Örnek Kullanım ;
<form action="/action_page.php"> <label for="ad">Adınız :</label><br> <input type="text" id="ad" value="Kodlama Vakti" name="ad"><br><br> <input type="submit" value="Submit"> </form>
Form etiketine ait parametreler ;
| Parametre | Açıklama |
|---|---|
| accept-charset | Gönderilen formda kullanılan karakter kümesini belirtir (varsayılan: sayfa karakter seti). |
| action | Formun nereye gönderileceği bir adres (url) belirtir (varsayılan: gönderen sayfa). |
| autocomplete | Tarayıcının formu otomatik olarak doldurup doldurmayacağını belirtir (varsayılan: açık). |
| enctype | Gönderilen verilerin kodlamasını belirtir (varsayılan: url kodludur). |
| method | Formu gönderirken kullanılan HTTP yöntemini belirtir (varsayılan: GET). |
| name | Formu tanımlamak için kullanılan bir ad belirtir |
| novalidate | Tarayıcının formu doğrulamaması gerektiğini belirtir. |
| target | Action özelliğinde adresin hedefini belirtir (varsayılan: _self). |
