HTML FORM OLUŞTURMA

Artık formlarla birlikte dinamik web tasarımına ilk adımı atmış oluyoruz. FORM sizin web tasarımcısı olarak sayfanıza koyacağınız ve içinde ziyaretçinin dolduracağı boşluklar veya ziyaretcinin yapacağı tercihleri belirteceği kutular bulunan ve en sonunda bu bilgileri size göndereceği bir buton bulunan bir websayfasıdır. FORM, bir sayfanın içinde bir bölüm olabileceği gibi, başlıbaşına bir sayfada olabilir. FORM, ziyaretciye "girdi" yapma imkanı verebilir. FORM, düz bir metin olabilir; resimlerle süslenmiş olabilir. Ne kadar işlenmiş olursa olsun, formlar da bütün HTML etiketleri gibi bir etiketle başlar ve biter. Şimdi bu bölümde <form> ... <form> etiketinin arasını doldurmayı öğrenelim.

HTML ACTİON VE METHOD ÖZELLİĞİ


Method özelliği, form verilerinin sunucuya gönderilme yöntemini belirtir. HTML form verileri GET ve POST olmak üzere iki şekilde sunucuya gönderilebilir. GET yönteminde form verileri isim-değer çifti olarak action özelliği ile belirtilen adrese sorgu olarak eklenip sunucuya gönderilir. POST yönteminde ise veriler, HTTP isteği (HTTP Request) içinde bir veri paketi olarak gönderilir. POST yöntemi ile sunucuya gönderilebilecek veri miktarı hakkında teorik olarak bir limit yoktur.

Action özelliği, FORM verilerinin gönderileceği adresin belirtilmesini sağlar. Kullanıcı, submit düğmesine bastığında veriler, method özelliği ile belirtilen yöntemle bu adrese gönderilir.

<form action="test.php" name="test" method="post">
.........
</form>

HTML <input> etiketi, sunucuya veri göndermek için kullanılacak farklı tiplerde form giriş kontrollerinin oluşturulmasını sağlar. Oluşturulan bu form kontrolleri sunucuya veri gönderecekleri için mutlaka name özelliklerinin belirtilmesi gerekir. Oluşturulabilecek form giriş kontrollerinin type özelliğine atanabilecek değerleri aşağıda listelenmiştir.

  • text
  • password
  • checkbox
  • radio
  • submit
  • reset
  • file
  • hidden
  • image
  • button

İNPUT TEXT


Aşşağıda HTML input etiketi kullanılarak üç tane metin kutusu (textbox) oluşturulmasını göstermektedir. Metin kutusu üçüncü şekilde oluşturulduğunda value özelliği ile belirtilen değer varsayılan değer olarak kabul edilerek formun sıfırlanması (reset) durumunda bu değer tekrar kontrole atanır.

Adınız:
Soyadınız:
web-adres:
Adınız:
Soyadınız:
web-adres:

İnput etiketinin bazı parametrelerine bakalım

TYPE: Veri alanı tipini tanımlar. Text, checkbox, reset, radio, submit, password, image, file, hidden, button, range, scribble gibi değerler alabilir. Default değeri "text" dir. Biraz sonra ayrıntıları açıklanacaktır.

NAME: Veri alanının adı. Programlama dilindeki değişken_adı yerine geçer. CGI scriptine gönderilecek veriyi tutacak değişkenin adıdır. Formu yazan dilediği adı verebilir. Yukarıdaki örnekte NAME="isim" nitelemesi yapılmıştır. Dolayısıyla bu veri alanının adı "isim" olmuştur. Mutlaka belirtilmelidir.

VALUE: Değişkene atanan ön-değer. Kullanıcı bu alana veri girince ön-değer yok olur. Yukarıdaki örnekte VALUE="webcebir.com" nitelemesi yapılmıştır. Ön-değer ataması zorunlu değildir; yani ön-değer konulmayacaksa VALUE parametresi kullanılmaz.

SIZE: "text" ve "password" elemanlarında karakter sayısını, diğerlerinde ise piksel cinsinden genişliği belirtmek için kullanılır.

CHECKED: Radio ya da checkbox seçeneğini ön-seçili kılmaya yarar

DISABLED: Veri alanını kullanıcı girişine kapatır.

SRC: Image belirleyen "%URL" adresini belirler.

İNPUT PASSWORD


Formumuza parola yazılabilecek alan eklemek için kullanılır. "text" elemanından farklı olarak bu alana girilen her karakter * ile gösterilir.

Kullanıcı:
Parola:
Kullanıcı:
Parola:

İNPUT CHECKBOX


Bazen, birden çok seçeneğin seçilmesi istenebilir. Bu durumda, TYPE değeri olarak checkbox kullanılır

HTML
PHP
MySQL
HTML
PHP
MySQL

İNPUT RADİO


HTML <INPUT type=radio> etiketi, birbirleri ile ilişkili fakat sadece birinin seçilebileceği radyo düğmesi (radio button / option button) oluşturulmasını sağlar.

Kullanıcıyı tek bir seçim ile sınırlandırmak için <INPUT type=radio> etiketi ile oluşturulacak birbirleri ile alakalı bütün radyo düğmelerinin name özelliklerinin aynı olması gerekir.

İLKOKUL
ORTAOKUL
LİSE
ÜNİVERSİTE
İLKOKUL
ORTAOKUL
LİSE
ÜNİVERSİTE

İNPUT SUBMİT


HTML <INPUT type=submit> etiketi, kullanıcının formu göndermesini sağlayan bir düğme (button) kontrolü oluşturulmasını sağlar.

Diğer buton kontrollerinden farklı olarak submit butonu oluşturulurken value değeri belirtilmediğinde tarayıcı otomatik olarak Submit, Gönder, Sorguyu Gönder vs. gibi tarayıcılara göre farklılık gösteren bir değer atar.

Submit düğmesine basıldığında içinde bulunduğu FORM etiketinin içindeki kendisi de dahil tüm form kontrollerinin değerleri isim-değer (name-value) çifti şeklinde sunucuya gönderilir.

İNPUT RESET


Bir INPUT tipidir. Bir forma girilen verileri siler ve formu default haline koyar. INPUT damgasında type="reset" nitelemesi yapılır. Value adı girilmese tarayacının diline göre sıfırla , reset gibi değer atar




İNPUT FİLE


HTML <INPUT type=file> etiketi, bir metin kutusu (textbox) ve gözat (browse) butonu ile sunucuya dosya gönderme/yükleme (upload) kontrolü oluşturulmasını sağlar.

Dosyanın gönderilmesi için FORM etiketinin method özelliğinin post, enctype özelliğinin multipart/form-data olarak belirtilmiş olması gerekir.

Gönderilecek Dosya_Adı:

Gönderilecek Dosya_Adı:

İNPUT HİDDEN


HTML <INPUT type=hidden> etiketi, Hidden elementler web sayfasında görülmezler. Bunlar zaten belli olan verileri CGI programına göndermek için kullanılırlar.


İNPUT BUTON


HTML <INPUT type=button> etiketi, düğme (button) form kontrolü oluşturulmasını sağlar.


BUTTON ETİKETİ


HTML <BUTTON> etiketi, INPUT type=button etiketi ile oluşturulan düğmeden biraz daha gelişmiş bir düğme (button) kontrolü oluşturulmasını sağlar.

En önemli farkı BUTTON etiketi içinde bazı HTML etiketlerinin kullanılabilmesidir. Dolayısıyla IMG etiketi kullanılarak buton üzerinde göstermek için bir resim eklenebilir.


SELECT ETİKETİ


<HTML <SELECT> etiketi, biri liste kutusu (listbox) diğeri aşağı açılır liste (drop-down list) tipinde olmak üzere iki farklı tipte seçim kutusu (select box) oluşturulmasını sağlar. Bu iki tip arasındaki tek fark "size" özelliği ile belirtilen seçim kutusu içinde gösterilecek seçenek miktarıdır. Liste elemanları optgroup ve option etiketleri ile tanımlanır.

Tek veya çok seçimli (multiple parametresi ile), sabit (size parametresi ile) veya aşağıya açılan listeler oluşturulabilir.

Aşağıdaki örnek, HTML SELECT etiketi kullanılarak aşağı açılır liste (drop-down list) oluşturulmasını göstermektedir.

Aşağıdaki örnek, HTML SELECT etiketi kullanılarak liste kutusu (listbox) oluşturulmasını göstermektedir.

TEXTAREA


HTML <TEXTAREA> etiketi, çok satırlı metin giriş kontrolü (textbox) oluşturulmasını sağlar.

Aşağıdaki örnek, HTML TEXTAREA etiketi ile 10 satır ve 40 sütunluk metin giriş kutusu oluşturulmasını göstermektedir.

FİELDSET VE LEGEND


Form elemanlarını konularına göre gruplamak için kullanılan etiketlerdir. Formun düzenin algısını arttırması ve kullanımını kolaylaştırması bakımından çok faydalıdır. <legend> etiketi gruplanmış elemanlara bir başlık oluşturur.

Kişisel Bilgiler
Ad Soyad :
Doğum Tarihi :

İletişim Bilgileri
Telefonu :
Adresi :
Kişisel Bilgiler
Ad Soyad :
Doğum Tarihi :

İletişim Bilgileri
Telefonu :
Adresi :

ferhat Diyor ki 30/08/2015

S.a dostum siteme böyle bi form koymayı düşünüyorum kendi mailime nasıl yönlendirebilirim_?

yönetici Diyor ki: 30/08/2015

Ferhat HTML ile iletişim formu hazırlamakla iş bitmiyor. php dilini bilmen gerekir. Veriler girilmiş iletişim formu gönder tuşuna tıklandığında bu bilgiler ya veritabanına kayıt edilmesi gerekir ve bu bilgiler veritabanından çekip ekrana yazdırılması yada webmasterın email adresine gönderilmesi gerekir. google'dan emailine verilerin gönderilme konusunu şu şekide ara "php mail gönderme formu"


berkant Diyor ki 12/10/2015

FERHATA katılılıyorum bunu kendi gmail ime yönlendirmek istiyorum ?

yönetici Diyor ki: 13/10/2015

Berkant yukarıda Ferhata cevap olarak yazmıştım. Kendi gmail hesabına yönlendirmen için php dilini bilmen gerekir. Bu konu ile ilgili makale hazırladığımda php bölümünde yayınlayacağım. Yukarıda belirtiğim şekilde google'da arama yapabilirsin.


Enis Diyor ki 17/10/2015

Teşekkür ederim çok yardımcı oldu

fevzi Diyor ki 20/01/2016

Göndere basınca Google E toblolara Kaydetme Gibi Bir Kod Varmı

yönetici Diyor ki: 22/01/2016

Fevzi, böyle bir kod varmı bilmiyorum. php dili bilmiyorsan , hazır bir sistem istiyorsan google'dan Jotform kullanımı yaz arat.

omer faruk Diyor ki 03/05/2016

Merhaba hocam, benim bir sorunum varda. Ben bu select seceneğininde valueleri nasıl post edebilirim. Mesela yonetim sayfamda yonetici adı ve sifresini belirlerken. Select secenegi ile admin, moderator ve yazar seklinde yetkisini belirlemek istiyorum. Herşeyi yaptım yalnız select icinde value leri post etmeyi beceremedim. Lutfen yardımcı olur musunuz... Teşekkürler şimdiden...


yönetici Diyor ki: 04/05/2016

Ömer Faruk, select menüsünde valulerden biri seçilir ve Tarayıcı otomatik olarak veriyi name özelliğine atar.

ÖRNEK:

<select name="durum" >
<option value="0">Admin</option>
<option value="1">Modaratör</option>
<option value="2">Yazar</option>
</select>

Karşıdan veriyi alma : $durum = $_POST['durum'];


Umut Padak Diyor ki 10/05/2016

hocam s.a ben html goruyorum ve form un ıcındekı sıklara mesela dıller gibi bir forma bayrakları koymak istiyorum nasıl yapabilirim ?

ekrem Diyor ki 12/05/2016

webteknolojileri dersinde web sitesi yapmamızı istediler içinde forumda olsun dediler fakat kullanıcının girdiği bilgiler forumun üzerinde yazmıyor.

yönetici Diyor ki: 13/05/2016

Ekrem, ziyaretci formu hazırlama ile iş bitmiyor. gönder tuşuna basınca bu verileri database yüklenmeli ve bu verileri okuyup ekranda göstermek gerekir bu işlemi php proğramı yapıyor,bunun için php dilini bilmen gerekir. Hazır bir sistem istiyorsan google'dan "Jotform kullanımı" yaz arat.


Adınız

Eposta

Mesaj

3749

Güvenlik No

REKLAM
KATEGORİ
POPÜLER MAKALE