HTML FORMLAR - FORM ELEMANLARI

Merhaba...

Formların oluşması için form etiketi içerisinde form elemanlarının kullanılması gerektiğini önceki derste söylemiştim. Formlar içerisinde; metin kutuları , çoklu seçimler, açılır kutular vs gibi bir çok eleman kullanılır.. Formlarda kullanılan elemanları aşağıdaki gibi özetleyebilriiz.. 

• Input  : Tek satır veri girişi
• label : Elemanlar için etiket
• textarea : Çok satır veri girişi
• select : Açılır kutu yada liste
• button : Formu göndermek yada temizlemek için buton
• fieldset : Formda alan belirtme
• legend :  Formdaki alanların adı
• option : açılır kutudaki maddeler
• optgroup : Açılır kutudaki maddeleri  gruplama
• datalist : Inputlar için önceden tanımlı liste

Formdan gelen verileri işleyecek olan sayfanın verinin nereden geldiğini anlayabilmesi için veri içeren her eleman "name" parametresi almalı ve name ile belirlenen isimleri birbirlerinden farklı olmalıdır. 

Elemanlara tek tek bakalım...

<INPUT />

En çok kullanılan form elemanıdır. Metin kutusu olarakta isimlendirilebilir ancak HTML5 ile beraber bir çok farklı tipte veriyide temsil edebilir. type parametresi ile kullanılır. Input etiketi kapanmaz. Name parametresi almalıdır.

type="text" ile basit metin kutusuna dönüşür...

   <form action="" method="POST" name="myform"> 
 
    Adınız :
   <input type="text" name="ad"> <br><br>

    Soyadınız  :
    <input type="text" name="soyad"> 
 
  </form> 

INPUT tipleri ve parametreleri için HTML FORMLAR - INPUT TİPLERİ dersine bakabilirsiniz..

<LABEL>

Form elemanlarının etiketidir. Elemanın ne olduğunu yazmak için kullanılılabilir.. ( ad, soyad,şehir vs) . Label etiketi tıklandığında , ait olduğu eleman odaklanmış olur.  Label etiketi, ekran okuyucular içinde kullanışlıdır. Üzerine gelindiğinde sesli bir şekilde okunur. Ayrıca onay kutusu gibi küçük elemanların seçiminde bölgeyi büyüterek tıklamayı kolaylaştırır. 

Label etiketi kullanılırken for parametresi ile ait olduğu elemanın id değeri belirtilir.

id : identity yani kimlik kelimesinin ilk iki harfidir . Adı üzerinde kimlik belirtir. CSS'te oldukça fazla kullanacağımız bu kavram , her elemanın kendine özgü bir adının olmasını sağlar ve sayfada tek olur.

   <form action="" method="POST" name="myform"> 
 
    <label for="ad">Adınız : </label><br>
   <input type="text" name="ad" id="ad"> 

 
  </form> 

Yukarıdaki  text input'a "ad" id'si eklenmiş . Dolayısıyla Label etiketi ,  for="ad" parametresi ile bu inputa ait olmuş olur. Label etiketi CSS ile müdahale edilmediği sürece tasarım ekranında değişikliğe sebep olmaz.  Yukarıdaki örnekte Adınız yazısına tıklayınca,  metin kutusunun odaklandığını göreceksiniz..

LABEL ETİKETİNİ KULLANMAK ZORUNLU DEĞİL!

<TEXTAREA>

Formlar içerisinde çok satırlı yazılar için kullanılan elemandır. Örneğin adres , hakkınızda gibi fazla cümle olasılıklı verilerde  kullanılır.  Textarea kapanan form elemanlarındandır. Name parametresi almalıdır.

• ROWS ile satır sayısı (yüksekliği)
• COLS ile de sütun sayısı (genişliği)

belirlenir.

   <form action="" method="POST" name="myform"> 
 
    <label for="yazi"> Hakkınızda : </label><br><br>
    <textarea rows="5"  cols="5" name="yazi" id="yazi">....</textarea>

   </form> 

Textarea etiketleri arasında birşey yazarsanız, tarayıcıda kutu içerisinde varsayılan yazısı olur. Örneğin yukarıdaki kodda textarea arasına yazdığımız 3 nokta , tasarımda kutu içerisinde görüntülendi...

<SELECT>

Formlar içerisinde açılır (seçim) kutular eklemek için kullanılır. Açılır menü maddeleri <option> (seçenek) etiketleriye yazılır. Her option maddesinin bir value değeri olmalıdır. Form gönderildiğinde, seçilen maddenin ne olduğu , bu value değeri aracılığıyla anlaılır.

  <form action="" method="POST" name="myform"> 
    <label for="sehirler">Şehirler :</label> <br> 
    <select name="sehirler" id="sehirler">

      <option value="izmir">İZMİR</option>
      <option value="istanbul">İSTANBUL</option> 
      <option value="ankara">ANKARA</option>

    </select>
  </form>

SELECTED

Select box'larda hangi option maddesinin seçili geleceğini belirtmediğimiz sürece , ilk option maddesi tasarımda seçili gelir. Yukarıdaki select yapısında ilk eelman olan İZMİR seçili geldi.. Farklı bir seçeneğin seçili gelmesini istiyorsak , option etiketine  selected="" yada sadece selected parametresini yazmamız gerekir... Örneğin ANKARA seçili gelsin istiyorsak : 

  <form action="" method="POST" name="myform"> 
    <label for="sehirler">Şehirler :</label> <br> 
    <select name="sehirler" id="sehirler">

      <option value="izmir">İZMİR</option>
      <option value="istanbul">İSTANBUL</option> 
      <option value="ankara" selected>ANKARA</option>

    </select>
  </form>

Yukarıda , ANKARA option maddesine selected parmetresi ekledik ve tasarımda ilk olarak ANKARA seçili  geldi. Birde fazla selected eklenmiş option maddeleri olursa , en son eklenen madde seçli gelir...

SIZE

Select box'lar tasarımda sadece seçili option maddesini gösterir  , diğer option maddelerine select box tıklandığında açılanmenüden ulaşılır.  Eğer aynı anda birden fazla madde görünsün istiyorsak size parametresi ile aynı anda kaç tane maddenin görünmesini istediğimizi belirtmeliyiz. 

  <form action="" method="POST" name="myform"> 
    <label for="sehirler">Şehirler :</label> <br> 
    <select name="sehirler" id="sehirler" size="3">

      <option value="izmir">İZMİR</option>
      <option value="istanbul">İSTANBUL</option> 
      <option value="ankara" selected>ANKARA</option>

    </select>
  </form>

Yukarıda select box için size="3" belirledik. Bu durumda 3 option maddeside tasarımda görünür şekilde geldi. Ancak "size" uyguladığımız için select box , açılır kutu özelliğini kaybedip . listeye dönmüş oldu...

MULTIPLE

Size parametresi ile listeye dönüşen select box'larda varsayılan olarak sadece 1 option seçilebilir. Eğer CTRL tuşuna basılı tutarak  çoklu seçim yapmak istiyorsak, bu kez select etiktine "multiple" parametrsinide eklemeliyiz...

  <form action="" method="POST" name="myform"> 
    <label for="sehirler">Şehirler :</label> <br> 
    <select name="sehirler" id="sehirler" size="3" multiple>

      <option value="izmir">İZMİR</option>
      <option value="istanbul">İSTANBUL</option> 
      <option value="ankara" selected>ANKARA</option>

    </select>
  </form>

Yukarıda select box için size="3" belirleyip ,multiple parametresini ekledik. Böylece aynı anda birden fazla option seçilebilir hale geldi..  

OPTGROUP

Select box içindeki option maddelerini , açılır liste içinde gruplayabiliyoruz. Bunun için gruplanacak maddeleri optgroup etiketleri arasına alıp grup adı için optgroup etiketine label parametresi veriyoruz..  Örneğin listede  hem Ege hem Marmara şehirleri olsun...

  <form action="" method="POST" name="myform"> 
    <label for="sehirler">Şehirler :</label> <br> 
    <select name="sehirler" id="sehirler" >
   
          <optgroup label="EGE">
              <option value="izmir">İZMİR</option>
              <option value="izmir">AYDIN</option>
         </optgroup>

          <optgroup label="MARMARA">
             <option value="istanbul">İSTANBUL</option> 
             <option value="ankara" selected>BURSA</option>
           </optgroup>

    </select>
  </form>

Yukarıdaki select box'ı tıklayıp açarsanız EGE ve MARMARA şehirlerinin gruplandığını görebilirsiniz.

<BUTTON>

Formlardaki veriler bir buton aracılığıyla gönderilir. bunun için input type="" kullanabileceğimiz gibi doğrudan button etiketini kullanabiliriz. 2 tür buton tipimiz var;

SUBMİT  : Submit onaylamak demek. Dolayısıyla formu gönderir..

RESET : Reset, sıfırlamak demek.. Dolayısıyla formda seçilen , yazılan bilgileri siler. Bir başka deyişle formu temizler..

<form action="" method="POST" name="myform"> 
 
   <label for="ad">Adınız : </label><br>
   <input type="text" name="ad" id="ad"> <br /><br />
    
    <button type="submit"> GÖNDER </button>
    <button type="reset"> TEMİZLE</button>

</form> 

Yukarıdaki örnekte GÖNDER ve TEMİZLE butonların işlevlerini deneyebilirsiniz.. GÖNDER butonuna bastığınızda , form action boş olduğu için sayfa yenilenecektir. 

<DATALİST>

Datalist'te <input type=text> gibi bir metin kutusudur. Ancak yeni girişe izin verirken aynı anda açıılr menüsüyle önceden tanımlı seçeneklerinde görünmesini sağlar. Önceden tanımlı eçenekler datalist ile belrlenir. Input ile beraber kullanılır. 

  <form action="" method="POST" name="myform"> 

    <label for="sehir">Şehir</label><br>
    <input list="sehirler" name="sehir" id="sehir">

    <datalist id="sehirler">
      <option value="izmir"/> 
      <option value="istanbul"/> 
      <option value="ankara"/> 
    </datalist>

  </form>

Datalistin düzgün çalışabilmesi için , Input elemanının list parametresi mutlaka datalist'in id'si olmalıdır.

<FIELDSET> ve <LEGEND>

Form içerisinde bazı verileri gruplamak, bir bölüm almak için fieldset kullanılır. Form içerisinde istenildiği kadar kullanılabilir. Legend ise bu fieldset'in basşlığını belirtir..

  <h1> KAYIT OL </h1>

  <form action="" method="POST" name="myform"> 
  
   <!--ALAN (FIELDSET) -->

    <fieldset>
          <legend>Kişisel Bilgiler:</legend> 

          <br>
          <label for="ad"> Adınız : </label> <br>
           <input type="text" name="ad" id="ad"><br><br>  

            <label for="ad"> Soyadınız : </label> <br>
            <input type="text" name="soyad" id="ad"><br><br>  
 
     </fieldset><br>
 
     <button type="submit"> GÖNDER </button>

  </form>

Yukarıda Ad ve Soyad bilgileri fieldset içine alınmış ve legend ile "Kişisel bilgiler" başlığı eklenmiş... Fieldset etiketi kapladığı bölümü kendiliğinden  çerçeve içerisine alır ve başlığını çerçeve çizgisine gelecek şekilde yerleştirir.

Görüşmek Üzere...