Form Etiketleri

editör

8 sene ago

Form lar kullanıcıdan alınan verileri sunucuya gönderilmesini ve gerekli işlemlerin yapılmasını sağlayan eski bir web teknolojisidir. Nasıl ki tabloları oluştururken <table> etiketini kullandık, formları oluştururken ise <form> etiketini kullanacağız.

<form>, <label> ve <input> etiketleri

Formları oluştururken kullanacağımız iki temel etiket <form> ve <input>’tur. <form> etiketi ile formumuzu oluşturuz. input ise girdi anlamına gelmektedir ve kullanıcıdan aldığımız verileri sunucuya göndermek için kullanılır. label dilimizde etiket anlamına gelmektedir ve formdaki başlıkları bu element içine yazabiliriz.

Aşağıdaki örnekte bunu daha rahat anlayabilirsiniz:

<form>
    <label>Adınız:      </label> <input type="text"/> <br/><br/>
    <label>Soyadınız: </label> <input type="text"/> <br/><br/>
    <input type="submit" value="Gönder"/>
</form>

Gönder
Burada bilinmesi gereken önemli nokta type yani tür atfının iyi kullanılmasıdır. Örneğin; type=”text” kullanıcıdan elde edilecek metinsel verileri sunucuya göndermek için kullanılır. Yazılımda buna textbox denir. type=”submit” ise verinin onaylanıp sunucuya gönderileceği bir düğmedir. value atfı ile bu düğmenin görünen adını yazabilirsiniz.

ve etiketleri

etiketi form elemanlarını bir araya toplayarak bir kutu çizer. Bu etiketin başlık kısmını ise etiketi oluşturur.

Aşağıdaki örneği inceleyelim:

<form>
    <fieldset>
         <legend>Üye Bilgileri</legend>
         <label>Adınız - Soyadınız: </label> <input type="text"/> <br/><br/>
         <label>e-Posta Adresiniz:  </label> <input type="text"/> <br/><br/>
         <label>Doğum Tarihiniz:   </label> <input type="text"/> <br/><br/>
         <input type="button" value="Onayla"/>
    </fieldset>
</form>

etiketi

Bazen adres bilgileri gibi birden fazla satırı ihtiva etmesi gereken metin girdilerine ihtiyacımız olabilir. Bunun için etiketini kullanabiliriz.


<form>
    <fieldset>
        <legend>Mesaj Gönder</legend>
        <label>Rumuzunuz:         </label> <input type="text"/> <br/><br/>
        <label>e-Posta Adresiniz:  </label> <input type="text"/> <br/><br/>
        <label>Doğum Tarihiniz:   </label> <input type="text"/> <br/><br/>
        <label>Mesajınız:         </label> <textarea  rows="2" cols="18"></textarea> <br/><br/>
        <input type="submit" value="Onayla"/><br/><br/>
        <input type="reset" value="Formu Temizle"/>
    </fieldset>
</form>