HTML Form Elemanları – Web Tasarım & Programlama
HTML DERSLERİ Web Tasarım

HTML Form Elemanları

Bu yazımızda HTML‘ de Form elemanlarını görerek Form etiketlerinin kullanımı ile ilgili bazı örnekler gerçekleştireceğiz. HTML‘ de kullanıcıdan giriş almak için kullanılan formları oluşturmak için aşağıdaki etiketleri kullanırız.

<form>  Etiketi :

<form>  etiketi kullanıcıdan  bilgi toplamak için kullanacağımız formu tanımlamak için kullanılmaktadır.

<input> Etiketi :

<input> etiketi en önemli Form etiketidir. <input> etiketi , tür özelliğine bağlı olarak çeşitli şekillerde görüntülenebilir.

<input> etiketinin type özelliğine göre bazı örnek kullanımları aşağıdaki gibidir.

Type Açıklama
<input type=”text”> Tek satırlık bir metin girişi alanı tanımlar.
<input type=”radio”> Bir çok seçenekten birini seçmek için bir radyo düğmesi tanımlar.
<input type=”submit”> Formu göndermek için bir gönder düğmesi tanımlar.

Şimdi bu türleri açıklayalım.

Text Girişi   <input type=”text”> :

Metin girişi için tek satırlık bir giriş alanı tanımlar.

Örnek:

Ekran Çıktısı:

Yukarıdaki örneği incelediğimizde input etiketinin type özelliğinin text olarak ayarlandığını, yani kullanıcıya tek satırlık bir veri girişi yapma imkanı sağlandığını görmekteyiz. name özelliği önemlidir. Her girdi alanının gönderilmesi gereken bir ad özniteliğine sahip olması gerekir. Yani bir isim vermek gerekir. Name özniteliği atlanırsa, o girdi alanının verileri gönderilemeyecektir.

Şifre Girişi <input type=”password”> :

 

<input type=”password”> şifre giriş alanı oluşturmak için kullanılır.

Ekran Çıktısı:

 

Radio Button Girişi  <input type=”radio”> :

Radyo düğmeleri, bir kullanıcının sınırlı sayıda seçimden birini seçmesine izin verir.  Aşağıdaki örneği ve ekran çıktısını inceleyelim.

Ekran Çıktısı :

CheckBox Girişi <input type=”checkbox”> :

 

Radio Button öğesinden farklı olarak birden fazla seçim yapılabilmesi gereken durumlarda kullanılmaktadır. Kullanımı ile ilgili kodlar ve ekran çıktısı aşağıdadır.

 

Button <input type=”button”> :

Buton oluşturmak için kullanılır.

Aşağıdaki butona tıklayarak yukarıdaki kod satırının ne işe yaradığını görebilirsiniz.

 

Gönder (Submit) Butonu   <input type=”submit”> :

Verilerin işleneceği sunucu sayfasına verileri göndermek amacıyla kullanılır. Formun işleneceği sayfa Form etiketinde action özelliğinde belirtilmelidir. Aşağıda Submit butonunun kullanımını gösteren bir örnek ve aekran çıktısı bulunmaktadır.

Ekran Çıktısı:

Reset Butonu <input type=”reset”> :

<input type=”reset”> tüm form değerlerini varsayılan değerlerine sıfırlayacak bir sıfırlama düğmesi tanımlar.

Örnek:

Ekran Çıktısı:

 

<form> etiketinin alabileceği bazı özellikleri inceleyelim.

Action özelliği :

<form action=”/action_page.php“>

Action özniteliği, form gönderilirken yapılacak işlemi tanımlar.
Normal olarak, kullanıcı, gönder düğmesini tıklattığında form verisi sunucu üzerindeki bir web sayfasına gönderilir.
Yukarıdaki örnekte, form verileri sunucudaki ‘/action_page.php’ adlı bir sayfaya gönderilir. Bu sayfa, form verilerini işleyen bir sunucu tarafı komut dosyası içerir.

Method Özelliği :

Method özniteliği, form verilerini gönderirken kullanılacak HTTP yöntemini belirtir. Bu yöntem GET yada POST olabilir.

 

Get ve Post Farkı Nedir ?

Form verisi gönderirken varsayılan yöntem GET’tir.
Ancak, GET kullanıldığında, gönderilen form verileri sayfa adres alanına görünür. Bu yüzden Hassas bilgileri gönderirken GET kullanılmamalıdır!
GET, boyut sınırlamaları da olduğu için kısa, hassas olmayan, miktarda veri için uygundur.

Form verileri hassas veya kişisel bilgiler içeriyorsa daima POST kullanılmalıdır. POST yöntemi, gönderilen form verilerini sayfa adresi alanına görüntülemez. Ayrıca POST hiçbir boyut sınırlamasına sahip değildir ve büyük miktarda veri göndermek için kullanılabilir.

Form Verilerini Gruplama <fieldset> :

Form içindeki elemanları gruplamak için kullanılır.

<fieldset> etiketi  ilgili verileri bir formda gruplamak için kullanılır.

<legend> etiketi ise <fieldset> öğesi için bir başlık tanımlar.

Örnek:

Ekran Çıktısı:

Select Etiketi <select>:

<select> etiketi açılır liste kutusu oluşturmak için kullanılır. kullanımı aşağıdaki gibidir.

Yukarıdaki HTML kodlarını yazıp sayfamızı görüntülediğimizde aşağıdaki ekran çıktısı oluşacaktır.

Kodları inceleyelim.

<option> etiketi seçim yapılabilecek elemanları tanımlamak için kullanılır.

Önceden seçilmiş bir seçeneği tanımlamak için, selected özelliği kullanılır. Yani yukarıdaki örnekteki listede varsayılan olarak Veri Tabanı öğesinin gelmesini istersek kodlarımızı aşağıdaki şekilde düzenlemeliyiz.

 

<textarea> Etiketi :

Formumuzda çok satırlı bir metin alanı kullanmamız gerektiğinde <textarea> etiketini kullanabiliriz. <textarea> etiketinde rows ve cols özellikleri kullanılabilir.

Rows özelliği, bir metin alanında görünür satır sayısını belirtir.

Cols özelliği, bir metin alanının görünür genişliğini belirtir.

Örnek:

 

HTML Form Örnekleri Sayfasına Gitmek İçin TIKLA

 

Yorum yap

Sayfamızı YouTube'da da takip etmek ister misiniz?
Holler Box