1133

Komple Uygulamalı Web Geliştirme Eğitimi

Html Form Etiketleri

Html form etiketinin kullanımı

Html form etiketlerinin görevi, <form> ... </form> etiketleri içinde bulunan html kontrolleri aracılığıyla kullanıcılardan toplanan bilgileri server'a göndermektir.

Örneğin bir internet sitesindeki üyelik formunu doldurduğumuzda girdiğimiz bilgileri form nesnesi tarayıcıdan alıp server'a taşır.

 

Peki bilgiler neden server'a gider ? 

Server derken kastedilen, web sitesinin barındırıldığı, internet üzerinden kullanılıcıların hizmetine açılan yüksek kapasiteli bilgisayarlardır.

Server bilgisayarlarında web sitelerinden gelen bilgileri işleyecek olan web programları vardır ve form nesnesi ile web programlarına gelen bilgiler çeşitli amaçlarla kullanılır. Örneğin bir hesaplama işlemi yada bilgilerin alınıp kalıcı bir veritabanı içine kayıt edilmesi gibi.

Form etiketinin kullanımı ;

<form>

...

</form>

 

Form etiketleri içine gelecek html etiketleri kullanıcıdan alınacak bilginin tipine göre değişiklik gösterir. Örneğin bir yazı girilmesini bekleyebilirken çoklu seçenek arasından bir seçim yapılmasıda beklenebilir. Örneğin hobi seçimi gibi.

Form kontrol türleri şunlardır ;

<input type="text">   :  Alınacak olan bilgi sözel bir ifade ise kullanılır. Örneğin ; Ad ,adres vb.

<input type="radio">   :  Alınacak olan bilgi çoklu seçim içinden sadece birinin seçilmesi istendiğinde kullanılır. Örneğin cinsiyet.

<input type="checkbox">   :  Alınacak olan bilgi sunulan alternatifler içinden birden fazla seçim istendiğinde kullanılır. Örneğin hobiler.

<input type="submit">   :  Formu server'daki web programına gönderecek olan buton.

<select> : Seçenekler arasından sadece birinin seçilmesini istediğimiz zaman kullanılır. Örneğin, şehir seçimi.

 

<form>

     Ad:<br>
     <input type="text" name="firstname" value="Adınız"><br>

     Soyad:<br>
     <input type="text" name="lastname" value="Soyadınız"><br><br>

     Cinsiyet : <br>
     <input type="radio" name="gender" value="male" checked> Erkek<br>
     <input type="radio" name="gender" value="female"> Kadın<br>

     Şehir :<br>
     <select name="city">
         <option value="kocaeli">Kocaeli</option>
         <option value="istanbul">İstanbul</option>
         <option value="ankara">Ankara</option>
         <option value="izmir">İzmir</option>
    </select>
    <br>

    <input type="submit" value="Submit">

</form>

Şu aşamada kursumuzun tasarım kısmındayız ve formun işlevsel olması için gereken web programlama bilgilerini henüz öğrenmedik şuan da sadece kursun 2.bölümü olan web programlama (asp.net mvc) kısmında kullanacak olduğumuz form tasarımının nasıl yapıldığını öğreniyoruz.

Oluşturduğumuz bu form ile doldurulan bilgiler server da bizi bekleyen bir web programına submit butonuna tıkladığımız anda gider. Ancak form un gideceği adresi yani web programının yerini ve gönderilme biçimlerini belirtmemiz gerekiyor. Bunu kursun asp.net bölümünde öğreneceğiz.