HTML Dersleri (5) : Form ve form öğeleri

Dikkat: Bu yazının yazılma tarihinin üzerinden en az 60 gün geçmiş. İçerisindeki bilgiler güncelliğini yitirmiş olabilir. Yorumları ve güncellemeleri göz önünde bulundurarak yazıyı takip ediniz.

form

Form öğerleri kullanabilmek için öncelikle bir form belirlemeniz gerekir. Form öğerlerini bu etiketler arasına yazmalısınız. name ile formun adını, method ile gönderi metodunu (get veya post), action ile formun belirtilen metodla gönderileceği sayfayı belirleriz.
<form name="iletisim_formu" method="post" action="iletisim_formu_isle.php">
  <!-- FORM ELEMANLARI -->
</form>
name formun ismidir, javascript ile dom ağaç yapısından forma ve form elemanlarına ulaşmırken kullanırız. method formun postalama metodudur. GET ile url'den verileri açıkca gönderir, POST ile göstermeden postalar. Genelde POST metodunu kullanırız. action ise formun postalanacağı adrestir ve genellikle bir sunucu tabanlı dilin betik dosyası olur.

input

Her türlü bilgiyi input'lar sayesinde girdi aldırırız. name ile, formun action parametresinde belirtilen sayfaya postalanırken değişken adlarını, girilen değer belirler. value parametresi ise o öğe için geçerli değeri taşır. Bu geçerli değerler çıktısı verilecek input türüne göre değişkenlik gösterir. type parametresi ile de çıktısı verilecek form öğesinin türünü belirleriz. Bu öğeleri, türlerine göre ayrı ayrı inceleyelim ;


button : Çıktı olarak bir buton basılır. value değeri butonun üzerinde görüntülecek yazıyı belirler. Butonun geçerli olarak hiçbir fonksiyonu yoktur. onClick olayına atanan javascript ile bir fonksiyon kazandırılır.
<input type="button" value="Buraya Basabilirsiniz">
Çıktı :


submit : Çıktı olarak buton basılır. Ancak bu buton formu gönderme işine yarar. Geçerli olarak tarayıcının diline göre formu göndermeyi ifade eden bir kelime ile görüntülenir. value parametresi ile bunu Gönder, Devam gibi bir anlatım belirleyebilirsiniz.
<input type="submit" value="Gönder">
reset : Çıktı olarak yine buton basılır. Buton formdaki bütün öğelerin değerlerini, ilk değerlerine döndürür. Yani geçerli value değerlerine döner.
<input type="reset" value="Formu Sıfırla">
text : Tek satırlık bilgi giriş alanı basar.
<input type="text" name="bilgi_giris_alani" value="varsayılan değer">
Çıktı :


password : text ile aynıdır. Tek farkı yazılan bütün karakterlerin değerleri korunurken, gösterimde işletim sistemine göre bir şifreleme gösterimi basılır. Windows'da büyük nokta, bazı tarayıcılarda hala *, bazılarında ise hiçbirşey görüntülenmez.
<input type="password" name="sifre_giris_alani">
Çıktı :


checkbox : Seçim kutusu basılır. Eğer seçilmişse gönderilen sayfaya değeri on olarak, seçili değilse off olarak gider.
<input type="checkbox" name="onay"> Bisikletin var mı?
Çıktı : Bisikletin var mı?

Eğer "checked" argümanı verilirse ekrana varsayılan olarak seçili basılır. Örneğin:
<input type="checkbox" name="onay" checked> Bisikletin var mı?
Çıktı : Bisikletin var mı?


radio : Seçim butonları koyar. Kullanıcıya birden çok seçenek ve bunlardan birinin seçilmesi istenirse bunları kullanırız. Bir seçim gurubunda her seçenek için bir tane radio türünde input öğesi eklenir, name yani isim parametrelerine aynı değer verilir ve value parametresine verilen değerlerden, form gönderilirken seçilmiş olanının değeri o isim yani değişken ile gönderilecek sayfaya gönderilir.
Kaç tane bilgisayarın var?
<input type="radio" name="bilgisayar_sayisi" value="1"> 1 tane
<input type="radio" name="bilgisayar_sayisi" value="2" checked> 2 tane
<input type="radio" name="bilgisayar_sayisi" value="3"> 3 tane
<input type="radio" name="bilgisayar_sayisi" value="+"> 3'den fazla
Çıktı : Kaç tane bilgisayarın var?
1 tane
2 tane
3 tane
3'den fazla

Mesela "2 tane" seçeneğinin inputunda "checked" argümanı var. Onun için form ilk yüklendiğinde 2 seçeneği seçili oluyor.

label

label'dan hemen bahsetmek istiyorum çünkü genellikle checkbox ve radiobuttonlar için kullanılırlar. label adı üzerinde etikettir. Yani bir inputun aslında başlığıdır. Yani siz formda bir text input veya başka bir input basarken onun hemen öncesine bir açıklama ile o bilginin ne olduğunu girersiniz. Mesela;

E-Posta Adresiniz :

Buarda başlığa tıklamaya ihtiyaç yoktur. Yani kimse "E-Posta Adresiniz : " yazısına tıklayıp birşey yapmak istemez. Fakat checkbox ve radiobutton'larda böyle bir ihtiyaç hissedilir. Mesela:
<input type="checkbox"> Web standartlarını seviyor musun?
Web standartlarını seviyor musun?

Burada ise çıkan ufacık tik atma kutusuna tıklamaktansa yazıya tıklamayı tercih eder çoğu kullanıcı. Ve doğal olarak yazıya tıklanınca hiçbirşey olmaz :-) label aslında burada işimize yarıyor.
<input type="checkbox" id="wss">
<label for="wss">Web standartlarını seviyor musun?</label>


Gördüğünüz gibi yazıya tıklayınca da input tıklanmış oluyor. Unutmamanız gereken şey şu: label'a for argümanı ile hangi input'un label'i olduğunu belirtmek. Tabiki bunu da input'a verdiğiniz id ile yapıyoruz.

Aynı durum radiobuttonlarda da söz konusudur, "Kaç bilgisayarın var?" sorusuna cevap verirken yazılara tıklayarak seçim yaptırmak için her radiobutton'a bir id verilir, yazılar label ile işaretlenip for ile de her label'a kendi inputunun id'si verilir.

label etiketi aynı zamanda bir formu css ile şekillendirirken de işinize yarayacaktır.

textarea

Çok satırlık yazı alanı basar. rows parametresi ile kaç satırlık bir alan görüntüleneceği, cols parametresi ile de kaç satır genişliğinde görüntüleneceği ayarlanabilir. Ancak bu ayarlar sadece görünümü ayarlar. içine girilebilecek metin teorik olarak sonsuzdur. Metnin uzunluğu makinenizin limitlerine göre belirlenir. Geçerli değer açılış ve kapanış etiketleri arasına girilir.
<textarea rows="5" cols="50">5 satır, 50 karakter genişlikli metin girdi alanı</textarea>


select ve option

Seçim listesi basar. Geçerli olarak boş liste basılır. Açılış ve kapanış etiketleri arasındaki option etiketleri bu listeyi oluşturur. option etiketleri arasına yazılan şekilde görüntülenir ve seçilen seçenek, select'in name parametresinde belirlenen değişkene seçilen option etiketindeki value parametresinin değerini atar. option etiketleri selectsiz kullanıldığında bir işe yaramazlar.
Hangi ildesiniz? :
<select name="secilen_il">
  <option value="ankara">Ankara</option>
  <option value="istanbul">İstanbul</option>
  <option value="izmir">İzmir</option>
  <option value="diger">Diğer</option>
</select>
Hangi ildesiniz? :


Hazırlayan : Mehmet Fatih YILDIZ

Bu döküman 30.02.2008 tarihinde yeniden düzenlenmiştir.

Yorumlar

Üye Resmi hasan özler
7 Mart Cuma ´08 20:01
formla fotoğraf nasıl gönderilir.Açıklamasını yapabilirmisiniz?
9 Mart Pazar ´08 19:43
file input koyarak yapabilirsiniz.

giden php dosyasında $_FILES dizisinde temp'de bulunan dosya hakkındaki bilgilere erişebilirsiniz.
Ancak o dosyayı kendi dizininize kopyalatmanız gerekir.

http://www.mfyz.com/?/dokuman/51/php-ile-dosya-gonderimi-upload/ bu dökümanda daha önce dosya yükleme ile ilgili birşeyler yazılmış.
Üye Resmi Buğra BAYRAK
22 Temmuz Salı ´08 13:13
form oluşturmayı biliyorum, yani her türlü form yapabilirim fakat bunu maile nasıl yönlendircez? yani gönder dediğinde maile bilgiler nasıl gelicek?
22 Temmuz Salı ´08 21:38
bunu php ya da asp gibi programlama dilleri ile yapabilirsin. php'de mail() fonksiyonu bi görevi üstleniyor. Formdan gelen bilgileri hangi metodla gönderiyorsan (POST, GET) ona göre mail fonksiyonunun içine aktarırsın, o şekilde gönderebilirsin...

php mail() ile ilgili bazı dökümanlar...
http://tr2.php.net/manual/en/function.mail.php
http://www.dmry.net/php-ile-mail-gondermek
http://www.acemiler.net/aid=495.phtml
Üye Resmi Omer
13 Ağustos Çarşamba ´08 10:24
güzel döküman tşkler faydalı olmuş
Üye Resmi rohanrhu
20 Ağustos Çarşamba ´08 03:04
çok güzel döküman, teşekkürler.
Üye Resmi Eylem
3 Eylül Çarşamba ´08 12:10
Bir formda 10 tane checkbox bulunuyor. Ancak bunlardan en az bir tanesini secmek zorunlulugunu nasil belirtebilirim?
Üye Resmi Eylem
3 Eylül Çarşamba ´08 12:33
Daha aciklayici olmasi acisindan ornek kodu veriyorum. Buradaki c1 iel c4 id lerden en az 1 tanesini secmesi zorunlu olmali.

<label> <input name="c1" type="checkbox" id="c1" value="İstiyorum" />  Secenek 1</label>
   <label>
<input name="c2" type="checkbox" id="c2" value="istiyorum" />  Secenek 2</label>
  <br />
  <label>
  <input name="c3" type="checkbox" id="c3" value="istiyorum" />  Secenek 3</label>
  <br />
  <label>
  <input name="c4" type="checkbox" id="c4" value="istiyorum" />
  Secenek 4</label>
5 Eylül Cuma ´08 23:24
secilmis = false;
if( document.getElementById('c1').checked ) secilmis = true;
else if( document.getElementById('c2').checked ) secilmis = true;
else if( document.getElementById('c3').checked ) secilmis = true;
else if( document.getElementById('c4').checked ) secilmis = true;

if( !secilmis ){
   alert('hey, en az birini secmelisin!');
   return false;
}

kod bloguyla yapılan iş en az biri işaretliyse secilmis değişkenini true yapıp altta kontrolle seçilip seçilmediğini bulmanı sağlar.
6 Eylül Cumartesi ´08 09:54
abi yukardaki 5 satıra 50 link alan dışarı cıkmış biraz kötü durmuş
http://imaj.at/48529
7 Eylül Pazar ´08 00:45
woaw. evet. orayı düzelteyim (bi ara)
Üye Resmi Eylem
9 Eylül Salı ´08 16:18
Calismadi. Ben de bir tanesini secili getirdim en basta. İstemiyorsa degistirsin:) Bir yerlerde bir hata yapiyorumdur ya da kullandigim platformdan kaynaklidir. Tesekkurler.
Üye Resmi Anıl Özdemir
30 Kasım Pazar ´08 15:46
Hocam çok iyi anlatmışsın,sağol.
Sana bi sorum olacak;
html de oluşturduğum form bilgilerini formmail yoluyla kendi email ime yönlendirebiliyorum.Fakat şimdi yapmak istediğim Radiobuttonlarda adresler yazcak ve kişi o radiobutton lardan hangisini seçerse form bilgileri o adrese gidecek.Bu nasıl mümkün olur?
Yanıtlarsan çok sevinirim...Saygılar
23 Mart Salı ´10 13:35
Teşekkürler Mehmet Abi. Güzel paylaşım olmuş
Üye Resmi burak dogan
20 Temmuz Salı ´10 14:49
gerçekten yararlı olmuş teşekkür ederim. bir şey sormak istiyorum bir buton hazırladıktan sonra o butona basarak butonla ilişkilendirilmiş forma bir text'i nasıl yapıştırabiliriz?
24 Temmuz Cumartesi ´10 11:55
Bir şey sormak istiyorum ajax ile veri gönderirken javascript'de oluşturduğum array'ı nasıl gönderebilirim?
27 Temmuz Salı ´10 17:12
jquery için cevap veriyorum. $.ajax fonksiyonuna gönderdiğiniz parametre nesnesinde data adında bir property'de bir nesne verirsiniz. O nesnede formun diğer elemanları olur normalde. Örneğin:

data: {
  ad: 'fatih',
  soyad: 'yildiz'
}

burada bir diziyi de pas edebilirsiniz.

data: {
  puanlar: [0, 1, 54, 3]
}

php'de $_POST[puanlar][2] ile 54'ü okuyabilirsiniz mesela.
Üye Resmi Orhan
15 Eylül Çarşamba ´10 09:01
Te$ekurler abi.Sana bir sorum olacakdi.Ben  Form Konusunda acamiyim de iki input yan-yana yerle$dirmek icin hangi kodu kulanmaliyim.Daha dogrusu birinci inputdan sonra ikinci input bende yana tarafa degilde a$agiya kayiyor.Onceden Te$ekkur ederim.
21 Eylül Salı ´10 14:31
iki input kodunu arasında <br> etiketi olmadan yerleştirdikten sonra o iki input'un yan yana kaplayacağı alanın onların dışındaki çerçevenin genişliğini geçmediğinden emin olman gerekir. Mesela

<div>
  <input value="1">
  <input value="2">
</div>

bu kodda iki input'un width değerlerini bilmiyoruz. Ayrıca dıştaki div'in de width değerini bilmiyoruz. Ama eğer bu değerleri bilerek ve sınırlayarak hareket edersek yan yana getirebiliriz.

<div style="width: 300px;">
  <input value="1" style="width: 140px;">
  <input value="2" style="width: 140px;">
</div>

bu kodda kesinlikle o iki input yan yana gelecektir. Tabi bunlardan önceki elemanlarda float eleman ile bir kayma olmazsa.
Üye Resmi Ozgur Karatas
30 Ocak Pazartesi ´12 19:38
Selamlar, iste aramis oldugum sey bu idi. Yaziya tiklayinca checkbox secili olmasi ozellikle beni hatirla kismi icin oldukca kucuk ama gerekli birsey, tesekkurler. Bir arada guvenlik kodu uygulamasina vakit ayirir anlatirsan guzel olur.
31 Ocak Salı ´12 02:37
Javascriptdeki bir arrayı post ile gönderdiğinizde array içindeki veriler aralarında virgüller olarak gidiyor. Bunu php explode ile açıp aynen javascriptdeki arrayı elde edebiliyorsunuz. Ancak şöyle bir şey var, arrayın içinde virgül (,) varsa formun submit edildiği dosyaya array şu şekilde gidecektir: veri1,veri2,,,veri4. Ve php ile explode ettiğinizde sorun yaşayacaksınızdır, 2 virgül arasındaki virgülü bir eleman olarak değil de bir ayraç olarak algılayacaktır. Bunun için javascript ile arrayı göndermeden önce virgülü karakter koduyla değiştirmek vb. önlemler alabilirsiniz.

Get metoduyla gönderince de aynı şey oluyor mu bilmiyorum, denemedim.
Üye Resmi hasan deniz
14 Aralık Pazar ´14 07:26
merhaba eklediğin form içerikli kodlar gerçekten aydınlatıcı ama senden tek bir şey rica edebilir miyim bu sayfanın yorumlara geçmeden önceki sayfada yazıyı değerlendir bölümü var orayı görsel bir şekilde (yıldızlarla ) değerlendirme kısmını nasıl yapabiliriz bir proje ödevi var da ... yardımcı olabillir misin acill !!!!
Üye Resmi buket bahadır
4 Şubat Çarşamba ´15 00:50
harikasınız...
Üye Resmi İfakat,Erkol
14 Mart Pazartesi ´16 05:33
Kullanıcı adı girilmiş bir formda,sonraki sayfada,ya da bir sonraki girdiğinde,"hoşgeldiniz",ya da "merhaba" diyerek bu kişinin ismini yazabilmek istiyorum.Bunu nasıl yapabilirim,Butondaki ismi alıp yazdırabilmem lazım.
Önceden teşekkürler.
Üye Resmi Serkan
27 Haziran Pazartesi ´16 08:41
Textbox ile input kodlarını birleştirebilirmiyim ?
Yeni Yorum *
İletişim Bilgileri
*
*
E-Posta adresiniz gösterilmeyecektir.
(unut)
Güvenlik Kodu *

Gönderiliyor