Ders 6: FORMLAR

Erkan DÖŞHTML0 Yorum17 Aralık 2012

 

<Form> 
<form> etiketi html formları oluşturmak için kullanılır. Form oluşturmayı sağlayan tüm form elemanları <form>….</form> etiketleri arasında yer alır.Ziyaretçiye gönderilecek formu hazırlarken, göze hoş görünmesi açısından, tablolar en çok kullanacağımız bileşenler olacaktır.
Form etiketi ile birlikte en çok kullanılan iki kodu aşağıda belirttim. Bunların dışında bir iki kod daha olsa da pek kullanılmamaktadır.
Form etiketi yardımcı elemanları
Girilecek Kod Görevi
action = “dosya ismi” Formdan girilecek bilgilerin değerlendirileceği dosyanın tam yolu.
method = “yöntem” Formdan girilecek bilgilerin değerlendirici dosyaya gönderilme yöntemi
Düğmeler ya doğrudan <button> etiketi kullanılarak ya da <input> etiketinde bir parametre olarak belirtilerek kullanılır. Daha fazla seçenek sağladığından doğrudan <button> etiketi kullanımı tercih edilir. Belirtildikleri etiketin type parametresinde bu 3 tür düğme sırasıylasubmit, reset, button değerleri verilerek kullanılır.
Onay kutuları
Kare, içine tik bırakılan kutucukları oluşturmak için kullanılır. <input> etiketinde bir parametre olarak belirtilerek kullanılır.
Radyo düğmeleri
Sayfamıza yuvarlak işaret kutucuğu bırakmak için kullanılır. Kullanılan kutucuğun onay kutusundan farkı, sadece bir seçenek işaretlenebilmesidir. <input> etiketinde bir parametre olarak type="radio" belirtilerek ve ek olarak value ve name parametreleriyle birlikte kullanılır.
Menüler
Ziyaretçi bu menüden mevcut seçenekler arasından herhangi birini seçerek bilgi girişinde bulunur. Sayfamıza bu elemanı eklemek için <select> etiketini kullanırız.
Metin girişleri
Metin girdilerini almak için iki tür eleman kullanılır. <input> etiketinde bir parametre olarak type="text" kullanılarak tek satırlık ve <textarea> etiketi ile oluşturulan çok satırlı metin girdi elemanlarıdır.
Dosya seçim elemanları
<input> etiketinde bir parametre olarak type="file" kullanılarak oluşturulan elemanlardır.
Gizli elemanlar
<input> etiketinde bir parametre olarak type="hidden" kullanılarak oluşturulan elemanlardır.
Nesneler
<object> etiketi kullanılarak oluşturulan elemanlardır.
Şimdi tanımlanan elemanlarda belirtilen etiketlerin kullanımına bakalım.,
<input>
<input> etiketi form içerisinde bilgi almak için kullanılan etikettir. Hangi veri türünde girişin yapılacağını burada kullanılan type elemanı belirlemektedir. Type elemanının varsayılan değeri text(metin) olmakla birlikte belirtilecek olan(text, password, checkbox, radio,submit, reset gibi) farklı değerleri de alabilir. <input> etiketinin sonlandırıcı etiketi bulunmaz yani bu etiket kapatılmaz.
Input etiketi yardımcı kodları
Girilecek Kod Görevi
type = “eleman türü” Eleman türü belirtilir. text, password, checkbox, radio, submit, reset, file, hidden, image, button değerlerinden biri kullanılır. Etiketin bu değerlerle nasıl kullanıldığını aşağıda örnekleriyle açıklamaya çalıştım.
name = “isim” Girilen verinin hangi değişken ismi altında değerlendirileceğini belirtmek için kullanılır. Mutlaka belirtilmelidir.
value = “değer” “radio” ve “checkbox” dışında bu parametrenin kullanımı isteğe bağlıdır. Belirtilecek “değer” eleman türüne göre değişir.
size = “değer” “text” ve “password” elemanlarında karakter sayısını, diğerlerinde ise piksel cinsinden genişliği belirtmek için kullanılır.
maxlength = “değer” “text” ve “password” elemanlarında girilebilecek en çok karakter sayısını belirtmek için kullanılır. Öntanımlı değeri sınırsızdır.
checked = “değer” Sadece “radio” ve “checkbox” elemanlarında seçili elemanı “on” olarak belirtmek için kullanılır. Diğerlerinde yoksayılır.
src = “dosya ismi” “image” elemanında resim dosyasını belirtmek için kullanılır.
alt = “metin” Fare eleman üzerindeyken balon içinde görünecek açıklama metni için kullanılır.
align = “left|center|right” Elemanın form üzerinde nasıl konumlanacağını belirtmek için kullanılır.
readonly Veri girme amacıyla kullanılmayacak elemanlar içindir.
disabled Veri girişi engellenecek elemanlar içindir.
text
Forma Yazı ekler.
Adı: <input type=”text” name=”firstname”><br>
Soyadı: <input type=”text” name=”lastname”>
Adı: 
Soyadı: 
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ı: <input type="text" name="username"><br>
Parola: <input type="password" name="password">
Kullanıcı: 
Parola: 
checkbox
Formumuza onay kutuları eklemek için kullanılır.
<input type="checkbox" name="kutu1" checked="on"> HTML<br>
<input type="checkbox" name="kutu2"> PHP<br>
<input type="checkbox" name="kutu3"> MySQL
 HTML
 PHP
 MySQL
radio
Formumuza radyo düğmeleri eklemek için kullanılır.
 <form action="http://herhangibirsite.dom/prog/adduser" method="post">
    <p>
    Adınız: <input type="text" name="firstname"><br>
    Soyadınız: <input type="text" name="lastname"><br>
    Eposta adresiniz: <input type="text" name="email"><br>
    <input type="radio" name="cinsiyet" value="erkek" checked="on"> Erkek<br>
    <input type="radio" name="cinsiyet" value="disi"> Dişi<br>
    <input type="submit" value="Send"> <input type="reset" value="Sıfırla">
    </P>
 </form>
Adınız: 
Soyadınız: 
Eposta adresiniz: 
 Erkek
 Dişi
 
<button> </button>
Düğmelerin input etiketiyle kullanımına benzer şekilde kullanılır. Ancak sonlandırıcı etiket içerdiğinden yorum alanında başka etiketlerin yeralabilmesi nedeniyle daha geniş bir kullanım alanı vardır. Yukarıdaki örneği button etiketi ile yazarsak farkları görebilirsiniz.
<form action=”http://herhangibirsite.dom/prog/adduser” method=”post”>
    <p>
    Adınız: <input type="text" name="firstname"><br>
    Soyadınız: <input type="text" name="lastname"><br>
    Eposta adresiniz: <input type="text" name="email"><br>
    <input type="radio" name="cinsiyet" value="erkek" checked="on"> Erkek<br>
    <input type="radio" name="cinsiyet" value="disi"> Dişi<br>
    <button name="submit" type="submit" value="submit">
      <img width="20" height="21" src="../images/belgeler-logo.gif"/>Gönder
    </button>
    <button name="reset" type="reset" value="reset">
      <img width="20" height="21" src="../images/belgeler-logo.gif"/>Sıfırla
    </button>
    </P>
 </form>
Adınız: 
Soyadınız: 
Eposta adresiniz: 
 Erkek
 Dişi
 
<select> </select>, <optgroup> </optgroup>, <option> </option>
<select> etiketi seçim listesi oluşturmakta kullanılır. <option> etiketi ile liste öğeleri belirtilir. <optgroup> etiketi ise bu liste elemanlarını konularına göre gruplamakta kullanılır. Bir select etiketi en azından bir option etiketi içermeli ve optgroup etiketleri iç içe olmamalıdır.
Tek veya çok seimli (multiple parametresi ile), sabit (size parametresi ile) veya aşağıya açılan listeler oluşturulabilir.
Tek seçimli aşağıya açılan liste örneği:
<select name="os_type">
<option value="win">Windows 9x</option>
<option value="winnt">Windows NT</option>
<option value="linux">Linux</option>
<option value="unix">UNIX</option>
<option value="os2">OS/2</option>
<option value="macos">MacOS</option>
</select>
Çok seçimli (ctrl+farenin sol tuşu ile) liste örneği:
<select 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">İşkembe</option>
  </optgroup>
  <optgroup label="Yemekler">
    <option value="y1">İmambayıldı</option>
    <option value="y2">Sultanbeğendi</option>
    <option value="y3">Kadınbudu</option>
  </optgroup>
  <optgroup label="Tatlılar">
    <option value="t1">Kazandibi</option>
    <option value="t2">Tavukgöğsü</option>
    <option value="t3">Keşkül</option>
  </optgroup>
</select>
<textarea> </textarea>
İngilizce “metin alanı” anlamına gelen bu kelime formumuza yazı yazılabilecek alan eklemek için kullanılır. Yardımcı öğeler olarak rows vecols kullanılır. Örnek aşağıdaki bölümde verilmiştir.
<fieldset> </fieldset>, <legend> </legend>
Form elemanlarını konularına göre gruplamak için kullanılan etiketlerdir. Formun alaşılırlığı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. Aşağıda bir hasta kartı örnek olarak verilmiştir.
 <fieldset>
  <legend>Kişisel Bilgiler</legend><br/>
  Adı: <input name="personal_fname" type="text" size="20" tabindex="1"/>    
  Soyadı: <input name="personal_lname" type="text" size="25" tabindex="2"/><br/><br/>
  Adresi: <input name="personal_address" type="text" size="55" tabindex="3"/><br/><br/>
  <!-- ...diğer kişisel bilgiler... -->
 </fieldset>
 <fieldset>
  <legend>Tıbbî Geçmişi</legend><br/>
  <input name="gecirilen_hastalik"
         type="checkbox"
         value="bogmaca" tabindex="20"/> Boğmaca    
  <input name="gecirilen_hastalik"
         type="checkbox"
         value="kabakulak" tabindex="21"/> Kabakulak    
  <input name="gecirilen_hastalik"
         type="checkbox"
         value="kizamik" tabindex="22"/> Kızamık    
 <input name="gecirilen_hastalik"
         type="checkbox"
         value="sucicegi" tabindex="23"/> Suçiçeği<br/><br/>

  <!-- ...tıbbi geçmişi ile ilgili diğer... -->
 </fieldset>
 <fieldset>
  <legend>İlaç Tedavisi</legend><br/>
  Halen kullanmakta olduğunuz ilaçlar var mı?<br/>
  <input name="medication_now"
         type="radio"
         value="Evet" tabindex="35"/> Evet    
  <input name="medication_now"
         type="radio"
         value="Hayir" tabindex="35"/>Hayır<br/><br/>

  Eğer ilaç kullanıyorsanız, aşağıya kullandığınız ilaçları ve
  günlük dozlarını belirtiniz:<br/>
  <textarea name="kullandigi_ilaclar"
            rows="10" cols="60"
            tabindex="40">
  </textarea>
 </fieldset>
Kişisel Bilgiler

Adı:      Soyadı: 

Adresi: 

Tıbbî Geçmişi

 Boğmaca      Kabakulak      Kızamık      Suçiçeği

İlaç Tedavisi

Halen kullanmakta olduğunuz ilaçlar var mı?
 Evet     Hayır

Eğer ilaç kullanıyorsanız, aşağıya kullandığınız ilaçları ve günlük dozlarını belirtiniz:

Etiketler: ,

Ders 6: FORMLAR Hakkında Yorum Yaz

Sponsor Reklam Sponsor Reklam Sponsor Reklam Sponsor Reklam
SINAV ANALİZ PROGRAMI 2013-2014

SINAV ANALİZ PROGRAMI 2013-2014

...

Erkan DÖŞ42 Yorum3 Aralık 2013
2013-2014 SINAV ANALİZ PROGRAMI V2

2013-2014 SINAV ANALİZ PROGRAMI V2

Yeni yönetmeliğe göre sınav sonrası sınıf, şube ve soru bazında sınav analizleri...

Erkan DÖŞ27 Yorum7 Aralık 2013
Bilgi ve İletişim Teknolojileri Dersi Ders Notları(Tüm Üniteler)- Özetleri- Soru Bankası

Bilgi ve İletişim Teknolojileri Dersi Ders Notları(Tüm Üniteler)- Özetleri- Soru Bankası

    Bilgi ve iletişim teknolojileri dersi için tüm ünitleri bir arada...

Erkan DÖŞ23 Yorum7 Nisan 2013
Bilişim Mesleki Yabancı Dil Modülleri ve Çevirileri

Bilişim Mesleki Yabancı Dil Modülleri ve Çevirileri

Bilişim Teknolojiler Alanı Mesleki Yabancı Dil Modülleri bildiğiniz gibi ingilizce. Derslerde...

Erkan DÖŞ15 Yorum23 Ekim 2013
Açık Kaynak İsletim Sistemleri 1.Sınav Çalışma Soruları

Açık Kaynak İsletim Sistemleri 1.Sınav Çalışma Soruları

İşletim Sistemi Nedir? İşletim sistemi, bilgisayar donanımının doğrudan denetimi ve...

Erkan DÖŞ15 Yorum31 Ekim 2013
Flutter İle Mobil Uygulama Geliştirme-FLUTTER KURULUMU

Flutter İle Mobil Uygulama Geliştirme-FLUTTER KURULUMU

Flutter İle Mobil Uygulama Geliştirme-FLUTTER KURULUMU Bu yazımızda Flutter İle Mobil...

Erkan DÖŞ0 Yorum29 Mayıs 2020
2016-2017 Proje Takip ve Değerlendirme Formu

2016-2017 Proje Takip ve Değerlendirme Formu

Derslerinizden verilen proje ödevlerini takip ve değerlendirmesini yapmak için form...

Erkan DÖŞ0 Yorum22 Mart 2017
Bilgisayar Eğitim ve Ögretim

Bağlantılarım

E-Bülten

E-Posta adresinizi aşağıdaki bölümden bültenimize ekleyerek yeni yazılarımızdan haberdar olabilirsiniz!


Aboneliğinizin onaylanması için lütfen verdiğiniz mail adresini kontrol ediniz.!

İletişim Formu

Kaynak göstermeden paylaşım yapmak yasaktır. 2012© ERKAN DÖŞ KİŞİSEL WEB SİTESİ