HTML Form Oluşturma

 HTML Form Oluşturma
Okunuyor HTML Form Oluşturma

HTML derslerimize form oluşturma işlemleriyle devam ediyoruz. Eğer önceki HTML derslerini de incelemek istiyorsanız buradan ulaşabilirsiniz.

Şuanki dersimize kadar yapmış olduğumuz siteler statik bir yapıdaydı. Statikten kastım ziyaretçi ile bir etkileşim olmuyordu. Bu dersimizden sonra sayfamız dinamik bir yapıya kavuşacak. Yani ziyaretçi sayfanızda arama yapma, yazılara yorum ekleme, kullanıcı girişi yapma, resim veya dosya ekleme gibi işlemleri gerçekleştirebilecek. Tabi şunuda belirtelim sadece HTML form ögelerini bilmek yukarıda saydığımız işlemleri gerçekleştirmek için yeterli olmayacaktır.

İçindekiler

HTML Form Parametreleri

<form action="test.php" method="post" >
         <label>Adınız : </label><br>
         <input type="text" name="txtisim">
         <br><br>
         <input type="submit" name="btn">
 </form>
HTML form örneği
  • Action, form verilerinin gönderileceği adresi belirtirken kullanılır.  Örneğin çift tırnak arasına test.php yazılırsa girilen veriler bu sayfada işlenmek için oraya gönderilir.
  • Method, form verilerinin sunucuya gönderilme yöntemini belirlerken kullanılır. Genellikle post ve get parametreleri kullanılır.

Form Ögeleri

En çok kullanılan form elementi <input> dur. HTML’in kapatılmayan diğer bir etiketidir. Sunucuya veri göndermek için kullanılır. Sunucuya veri gönderileceği için name özelliğinin belirtilmesi gerekiyor. Girdi türü type özelliği belirtilerek farklı girdilerin alınmasını sağlar. Nedir bu girdiler? Beraber inceleyelim. input etiketinin paremetrelerini inceleyelim:

  • type, veri tipi tanımlamada kullanılır. text, checkbox, radio, submit, password, hidden, image, button gibi değerler alır.
  • name,Girilen verinin hangi değişken ismi altında değerlendirileceğini belirtmek için kullanılır. Mutlaka belirtilmelidir.
  • value, değişkene ön değer atamak için kullanılır. Kulanmak zorunda değiliz.
  • size, “text” ve “password” elemanların karakter sayısını, diğer elemanların piksel cinsinden genişliğini belirtmek için kullanılır.
  • checked, “radio” ve “checkbox” elemanları seçili kılmaya yarar.
  • disabled, veri girişini engellemek için kullanılır.
  • src, “image” elemanında resimin yolunu belirtmek için kullanılır.
  • alt, fare elamn üzerindeyken görünecek yazı için kullanılır.
  • align, elemanın nasıl konumlanacağını belirtmek için kullanılır. left sağa yaslar, center ortalar, right sola yaslar.

input text

Formumuza yazı yazabilceğimiz dikdörtgen şeklindeki form ögesidir. Örneğin;

<form action="test.php" method="post" >
         <label>Adınız : </label><br>
         <input type="text" name="txtisim">
         <br>
         <label>Soyadınız : </label><br>
         <input type="text" name="txtsoyisim">    
</form>
HTML input text

input password

Formumuza parola yazabilceğimiz alan oluşturmak için kullanılır. Bu alana girilen her karakter * ile gösterilir. Örneğin;

<form action="test.php" method="post" >
         <label>Parolanız : </label><br>
         <input type="password" name="password">
</form>
HTML input password

input checkbox

Formumuza onay kutusu eklemek için kullanılır. Birdern fazla seçeneği seçmemiz istenebilir. Örneğin;

   <form>
         <input type="checkbox" name="değer1" > HTML<br>         
         <input type="checkbox" name="değer2" checked="on" > CSS<br>         
         <input type="checkbox" name="değer3"> PHP   
      </form>
HTML input checkbox

checked özelliğini sadece CSS için verdik. Dilerseniz diğerlerinede verebilirsiniz.

input radio

Formumuzda birbiriyle ilişkili fakat sadece birini seçebilceğimiz butonlar eklemede kullanılır. Örneğin cinsiyetimiz;

 <form>
         <label>Cinsiyetiniz : </label><br>
         <input type="radio" name="değer1" > Erkek<br>         
         <input type="radio" name="değer2" checked="on" > Kadın<br>         
         <input type="radio" name="değer3"> Diğer   
  </form>
HTML input radio

input submit

Kullanıcının girilen verileri form aciton ve post parametrelerinde belirtilen yere göndermek için kullanılır. Value değeri belirtilmezse tarayıcı otomatik olarak “Gönder” değerini atar. Tabi bu tarayıcıdan tarayıcıya farklılık gösterebilir. Örneğin;

 <form>
         <input type="submit"  value="TAMAM"><br>         
         <input type="submit"  value=" ">         
 </form>
HTML input submit

Tarayıcı olarak Chrome kullandım. Value değerini vermediğimiz halde bir değer atamadı.

input reset

Butona bastığımız zaman girilen verileri silmemizi sağlar. Örneğin;

  <form>
         <input type="text"  name="text"><br> <br>       
         <input type="reset"  value="Verileri Temzile">         
  </form>
HTML input reset

Butona tıkladığımız zaman deneme yazısı silinecek.

input file

Sunucuya dosya yükelemek için kullanırız. Dosyanın doğru bir şekile gönderilmesi için method özelliğinin post, enctype özelliğinin multipart/form-data olarak belirtilmesi gerekiyor. Örnek verecek olursak;

 <form enctype="multipart/form-data" action="test.php" method=post>
         <input name="message" type="file"><br> <br>    
         <input type="submit"  value="Dosyayı Gönder"> 
 </form>
HTML input file

input Hidden

Hidden elementi web sayfasında gösterilmeyecek gizli bir değer tanımlamak için kullanılan bir form kontrolü oluşturulmasını sağlar. Örneğin;

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

button Etiketi

Button etiketi kapatılan etiketlerden birisi olduğu için input etiketi ile oluşturulan butonlardan biraz daha gelişmiş buton oluşturmızı sağlar. Dilersek button etiketi içine resim, icon vs ekleyebiliriz. Örneğin;

<button  type="button">
   <img width="25" height="25" src="icon1.png"/>Gönder   
</button>

select Etiketi

İki tipi var bunlar: liste kutusu ve aşağı açılır listedir. İkisi arasındaki tek fark “size” özelliği ile belirtilen seçim kutusu içinde gösterilecek seçim miktarıdır. Bu iki tip için ayrı ayrı örnekler verecek olursak;

<form>
         <select size="7" name="menu">         
           <option selected="" value="none">Hiçbiri</option>         
           <optgroup label="Tatlılar">
             <option value="tatlı1">Şekerpare</option>
             <option value="tatlı2">Künefe</option>
             <option value="tatlı3">Kazandibi</option>
           </optgroup>         
           <optgroup label="Meyveler">
             <option value="meyve1">Çilek</option>
             <option value="meyve2">Kavun</option>
             <option value="meyve3">Karpuz</option>
           </optgroup>   
         </select>         
   </form>
html select etiketi

Yukarıda liste kutusu tipine örnek verdik. Tarayıcı ekranında size için verdiğimiz değer sayısı kadar veri görüntülenir.

 <form>
         <select>
             <option>İstanbul</option>
             <option>Ankara</option>
             <option>İzmir</option>
             <option>Denizli</option>
             <option>Batman</option>
             <option>Mersin</option>
         </select>         
  </form>
HTML select etiketi

Yukarıda aşagı açılır liste tipine örnek verdik.Girdiğiniz tüm değerler tarayıcı ekranında görüntüleniyor.

textarea Etiketi

Yüksekliği arttırılabilir textbox oluşturmamızı sağlar. Örneğin;

<form>
         <textarea rows="8" cols="30"></textarea>         
</form>
Html textarea etiketi

Bugünkü yazımızda HTML Form Etiketlerini inceledik. İsterseniz linkteki videodan konuyu tekrar edebilirsiniz.

Yorum Yap