HTML Form

HTML <form> öğeleri kullanıcı giriş bilgilerini ve diğer kullanıcı verilerini alıp sunucude işlemek için kullanılır.

<form action="#">
    <label for="name">Adınız/soyadınız</label><br>
    <input type="text" id="name" name="name" value="John Doe"><br>
    <label for="email">E-Posta Adresiniz</label><br>
    <input type="email" id="email" name="email" value="@gmail.com"><br><br>
    <input type="submit" value="Submit">
</form>
                

HTML Form Attributes

HTML <form> elemanı action="", target="" ve method=""özniteliğini kullanmaktadır.

Action / Eylem Özelliği

• action="" özelliği form submit olduğunda yani gönderildiğinde bir eylemin gerçekleşeceğini belirtir.
• Form verileri kullanıcı gönder butonuna bastığında sunucudaki bir dosyaya gönderilebilir.

<form action="doctype.html" target="_blank">
    <label for="name1">Adınız</label><br>
    <input type="text" name="name1" value="Fatih" id="name1"><br>
    <label for="name2">Soyadınız</label><br>
    <input type="text" name="name2" value="Bırtıl" id="name2"><br>
    <label for="name3">E-Posta</label><br>
    <input type="text" name="name3" value="@gmail.com" id="name3"><br><br>
    <input type="submit">
</form>

Eğer action="" özelliği tanımlanmaz ise form gönderildiğinde kullanıcı aynı sayfada kalacaktır.

Target Özniteliği

target="" özelliği <form action=""> özelliği tanımlanmış bir formda eylemin nasıl gerçekleşeceğini gösterir. Yeni sayfada mı, yeni pencerede mi ya da aynı sayfada mı action eyleminin gerçekleşeceğini belirtir. Default olarak target="_self" ayarlıdır.

form öğesinde tanımlanan target="" özniteliği aynı bağalntı metinlerinde tanımlanan eylem türüne sahiptir.

Target Özniteliği Değerleri

<form action="post.php" target="_self"></form>
                        

Hem GET hem de POST methodu HTTP protokolünde istemciden sunucuya veri aktarımı sağlanması için kulanılır. method="get" ve method="post" arasındaki en önemli fark ise; get methodu url dizesine eklenen request/istek parametresini taşıması ve post methodu ise request/istek parametresini kendi ileti gövdesinde taşımakta olduğu için post yöntemi get methoduna göre daha güvenlidir diyebiliriz.

HTTP Nedir?

HTTP (Hyper Text Transfer Protocol) : Köprü metin transfer protokolü olan HTTP istemci ve sunucu arasındaki iletişimi kurmak için tasarlanmıştır.
Yani HTTP istemci(tarayıcı) ile sunucu arasında istek-yanıt protokolü olarak çalışır.

Bir tarayıcı sunuyuca HTTP isteği gönderir ve akabinde de sunucu da tarayıcıya bir yanıt döndürür. Bu yanıt istekle ilgili durum bilgilerini içermekte olduğıu gibi istek bilgilerini de içerebilmektedir.

Form Gönderim Methodları

En Yaygın HTTP (Hyper Text Transfer Protocol) yöntemleri GET ve POST Yöntemleridir.

Form gönderimlerini sağlamak için GET ve POST yöntemlerini kullanabilirsiniz. method="get" ve method="post" şeklinde yazarak uygun olan methodu seçebilirsiniz.

GET Yöntemi

• GET yöntemi bir kaynaktan belirli bir veri istemek için kullanılır.
• GET yöntemi en yaygın kullanılan HTTP yöntemlerinden biridir.
• GET istekleri tarayıcı ön belleğine alınabilir.
• GET istekleri tarayıcı geçmişinde kalır.
• Bir URL'nin uzunluğu sınırlıdır (2048 karakter)
• Hassas data ve veriler ile uğraşırken GET isteği kesinlikle tercih edilmemelidir. POST methodu kullanılmalıdır.
• GET yöntemi genellikle sorgu dizeleri gibi güvenlik sorunu olmayan veriler için kullanımı uygundur.
• GET istekleri sadece veri istemek için kullanılır.

<form action="post.php" target="_self" method="get"></form>
                        

POST Yöntemi

• POST yöntemi en yaygın kullanılan HTTP yöntemlerinden biridir.
• POST istekleri tarayıcı ön belleğinde ve geçmişinde asla kalmaz.
• POST yöntemi ile gönderilen form verileri kesinlikle URL'de gösterilmez.
• POST istekleri işaretlenmez.
• Hassas içerikler ve veriler üzerinde uğraşırken POST methodu kullanılmalıdır..

Önemli : Hassas veriler ile uğraşırken GET methodu yerine kesinlikle POST methodu kullanmanız tavsiye edilir.

<form action="post.php" target="_self" method="post"></form>
                        

Form Elemanları

input type="" Özelliği

input Element

<input> elemanı en çok kullanılan form elemandır. Farklı type="" özniteliği ile farklı amaçlarda birçok kullanımı mevcuttur. Yukarıdaki type="" listesi ile input elementinin farklı kullanımlarını inceleyiniz.

Label Element

<laberl> elemanı çeşitli form elemanları için etiket ve başlık olarak tanımlanabilir. Ayrıca radio ve checkbox özniteliği olan input giriş elemanlarına tıklama zorluğu yaşanmasını da ortadan kaldırır.

<label for="inputID"> şeklinde aynı id'ye atanmış bir label üzerindeki metine tıklanıldığında form elemanına da tıklanmış olacaktır.

<form action="">
    <label for="labelID"> Adınız</label>
    <input type="text" name="label1" id="labelID" value="Adınız">
</form>
                       

Select Element

<select> elemanı kullanıcya bir açılır liste içerisinden bir veya birden fazla seçenek seçtirmek için kullanılır.

<form action="">
<label for="selectID">Kurs Seçiniz</label><br>
<select name="language" id="selectID">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="sass">SASS</option>
<option value="javascript">JAVASCRIPT</option>
<option value="bootstrap">BOOTSTRAP</option>
</select>
</form>
                        

Select Özellikleri

<select> elementinde liste görünürülüğünü 1 yerine çoklu göstermek için size="" özniteliği atayabilirsiniz. Aynı şekilde birden fazla seçim yaptırmak için multiple özniteliği de atayabilirsiniz.

<form action="">
<label for="selectID">Kurs Seçiniz</label><br>
<select name="language" id="selectID"  size="3" multiple>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="sass">SASS</option>
<option value="javascript">JAVASCRIPT</option>
<option value="bootstrap">BOOTSTRAP</option>
</select>
</form>
                        

Textarea Element

<textarea> elementi çok satırlı yani multiline metin giriş alanı gösterilmek istenildiğinde kullanılan form elemanıdır.

<textarea> elemanına row="" ve cols="" öznitelikleri eklenebilmektedir.

• row="" öznitelği görünür metin alanının satır sayısını ve yükesekliğini belirtir.
• cols="" özniteliği ise görünür metin alanının genişliğini belirtmek için kullanılır.

<form action="">
    <textarea name="text" id="textareaID" cols="50" rows="50"></textarea>
</form>
                        

Fieldset ve Legend Elementleri

Eğer uzun bir form ile çalışıyorsanız ve form üzerindeki verileri gruplandırmak isterseniz fieldset elemenı sizin için en iyi çözüm olacaktır.

<legend> elemanı ise fieldset elemanı için bir başlık tanımlar ve kullanıcıya ve arama motorlarına o gruptaki form verilerinin ne hakkında olduğunu belirtir.

Legend ve Fieldset Kullanımı Örnek

Kişisel Bilgileriniz

Adınız

Yaşınız

Uzmanlıklarınız

Eğer Bootsrap CSS kullanmıyor olsaydık görünüm aşağıdaki gibi olacaktı.

<form action="">
<fieldset>
<legend>Kişisel Bilgileriniz</legend>
<label for="nameID">Adınız</label><br>
<input type="text" id="nameID" placeholder="Adınız" name="name"><br>
<label for="yearID">Yaşınız</label><br>
<input type="text" name="year-old" placeholder="Yaşınız" id="yearID"><br>
<label for="expertID">Uzmanlıklarınız</label><br>
<input type="text" id="expertID" name="experience" placeholder="Uzmanlıklarınız">
</fieldset>
</form>