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.

İ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.


<form>
Adınız: 
<input type="text" name="isim">
<br>
Soyadınız: 
<input type="text" name="soyad">
<br>
web-adres: 
<input type="text" name="adres" value="webcebir.com">
<br>
</form>
</pre>
<div class="kutu">
Adınız: 
<input type="text" name="isim">
<br>
Soyadınız: 
<input type="text" name="soyad">
<br>
web-adres: 
<input type="text" value="webcebir.com">

</form>

İ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.


<form>

Kullanıcı: <input type="text" name="username">

<br>

Parola: <input type="password" name="password">

</form>

Kullanıcı:
Parola:

İNPUT CHECKBOX


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


<form>

<input type="checkbox" name="kutu1" checked="on"> HTML<br>

<input type="checkbox" name="kutu2"> PHP<br>

<input type="checkbox" name="kutu3"> MySQL

</form>

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.


<form>

<input type="radio" name="okul" value="ilkokul"> İLKOKUL

<br>

<input type="radio" name="okul" value="ortaokul"> ORTAOKUL

<br>

<input type="radio" name="okul" value="lise"> LİSE

<br>

<input type="radio" name="okul" value="universite"> ÜNİVERSİTE

</form>

İ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.


<form>

<input type="submit" value=" Tamam ">

</form>

İ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


<INPUT TYPE="reset" VALUE="verileri sıfırla">

İ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.


<form enctype="multipart/form-data"

      action="index.php"
      
      method=POST>
      
Gönderilecek Dosya_Adı:<br>

  <input name="message"
  
         type="file"><br>
         
  <input type="submit"
  
         value="Dosyayı URL ye Gönder">
         
</form>

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.


<input type="hidden" name="islem" value="yenikayit">

İNPUT BUTON


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


<input type="button" value="Gönder"/>

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.


<button  type="button" value="tıkla">

   <img width="30" height="21" src="icon.png"/>Gönder
   
</button>

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.


<form>

<select>
    <option>İstanbul</option>
    <option>Ankara</option>
    <option>İzmir</option>
</select>

</form>

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


<form>

<select size="6" name="menu" multiple>

  <option selected="" value="none">Hiçbiri</option>

  <optgroup label="Çorbalar">
    <option value="c1">Tarhana</option>
    <option value="c2">Ezogelin</option>
    <option value="c3">mercimek</option>
  </optgroup>

  <optgroup label="Yemekler">
    <option value="y1">İmambayıldı</option>
    <option value="y2">Sultanbeğendi</option>
    <option value="y3">Kuru fasulye</option>
  </optgroup>

  <optgroup label="Tatlılar">
   <option value="t1">Kazandibi</option>
    <option value="t2">sütlaç</option>
    <option value="t3">Keşkül</option>
  </optgroup>

</select>

</form>

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.


<form>

<textarea rows="10" cols="40">

</textarea>

</form>

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.


<fieldset>

<legend>Kişisel Bilgiler</legend>

<table>
    <tr><td>Ad Soyad : </td><td><input type="text" /></td></tr>
    <tr><td>Doğum Tarihi : </td><td><input type="text" /></td></tr>
</table>

</fieldset>

<br/>

<fieldset>

<legend>İletişim Bilgileri</legend>

<table>
    <tr><td>Telefonu : </td><td><input type="text" /></td></tr>
    <tr><td>Adresi : </td><td><textarea></textarea></td></tr>
</table>

</fieldset>

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

İletişim Bilgileri
Telefonu :
Adresi :

Emrah Akkaya 03/04/2018

Sayfamda onay kutusu yapmak istiyorum fakat kayıt işleminden sonra aynı sayfaya gittiğimde işaret kayıtlı kalmıyor. nasıl bir kodlama sağlamam gerekir.

yönetici 03/04/2018

Emrah, submit butona basılıp veriler kaydedildiğinde sayfada yenileme olduğu için veriler sıfırlanır; Ancak sayfa yenileme olmasını istemiyorsan AJAX kullanarak verileri kaydetme yapmalısın.

ekrem 06/04/2018

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 06/04/2018

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.

Ömer faruk 06/04/2018

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 06/04/2018

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

<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'];

ege cengiz 03/07/2018

Butona basıldıgında verileri başka bir html'de nasıl kaydederim

yönetici 03/07/2018

Ege, php veya asp.net web yazılımını bilmen gerkiyor. php dili için google'dan "php veritabanına veri ekleme" diye aratma yap.

Ahmet 30/01/2019

Hocam çok güzel bir şekilde anlatmışsınız. Peki kendi notepad++ ile yaptığım sitede yani .html dosyamda sizinkine benzer bir YORUM BÖLÜMÜ yapabilirmiyim. Nasıl yapıldığını paylaşırmısınız lütfen. (Ben bu işte yeniyim adım ilerliyorum buraya kadar geldim umarım bana yardımcı olursunuz

yönetici 30/01/2019

Ahmet, HTML sayfalar server bilgisayarlarda yer alır. Formda mesaj yazıp gönderdiğimizde bunu server'larda yer alan PHP veya ASP.NET proğram vasıtasıyla veritabanına bu veriler kaydedilmesi gerekir ve istediğimiz zamanda bu veriler siteye yazdırılır. Senin yapabileceğin 2 seçenek var bedava olan PHP dilini öğrenmek yada Bu öğrendiğin HTML etiketlerle beraber PHP dili ile yapılmış, Hazır sistem olan wordpress öğrenmen gerekir. Google'dan "php veritabanı bağlantısı" diye video bölümünde aratma yap bu konu hakkında yeterli bilgiyi bulursun.

Can 13/02/2019

Ben bir kayıt olma alanı oluşturacağım. Daha sonra insanlar oradaki bilgileriyle giriş yapacaklar. Ben bu işin altından nasıl kalkarım.

yönetici 13/02/2019

Can üye kayıtı yada form bilgi girişi için ya PHP dilini öğreneceksin yada hazır sistem wordpress öğreneceksin. Üst mesajda detaylı anlatıldı
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

5430

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML RESME LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.