1. Ana Sayfa
  2. Webmaster
  3. HTML Dersleri - Formlar

HTML Dersleri - Formlar

Son güncelleme: 16.07.2008 17:36
CA-CHALLENGE CA-CHALLENGE foto


  • HTML'in bir metin şekillendirme aracı olduğunu söylemiştik. Form'lar bu tanımın istisnasıdır, HTML kullanarak sayfanızı ziyaret edenlerle temas kurmanızı sağlarlar. Formlar yoluyla ziyaretçilerin herhangi bir konuda görüşlerini alabiliriz; veya hazırlayacağımız bir formla ziyaretçilerden kişisel bilgilerini isteyebiliriz. Formlar <form>...</form> etiketleri arasına yazılırlar. Bu etiketin parametrelerini öğrenmeden önce form türlerine bir göz atalım.



    12/1. FORM TÜRLERİ


    Aşağıda form türlerini ve kullanılışlarını görüyoruz.:

    text
    maxlength: Yazılabilecek maksimum text uzunluğu
    value: varsayılan değer
    size: Px cinsinden alanın uzunluğu
    <form>
    <input type="text" maxlength="10" size="12" value="İsminiz?"
    </form>
    <>

    <input type="text">
    Ziyaretçinin ismi, telefonu gibi kısa bilgilerini almak için kullanılır.

    password
    Tüm parametrleri text ile aynıdır.
    <form>
    Lütfen şifre girin:<br>
    <input type="password" maxlength="10" size="12">
    </form>
    Lütfen şifre girin:


    <input type="password">
    Şifre almak için kullanılır, yazılan karakterler ekranda '*' şeklinde görüntülenir

    textaraea
    rows : Alanın karakter cinsinden yüksekliği
    cols : Alanın genişliği
    <form>
    <textarea cols="12" rows="4">Burası bir textarea!</textarea>
    </form>
    Burası bir textarea!

    <textarea >...</textarea>
    Text kutusuna sığmayacak uzun bilgileri, mesela ziyaretçinin sayfa ile ilgili düşüncelerini almak için kullanılır.

    checkbox
    checked: sayfa açıldığında 'checked' ibaresi bulunan kutu işaretli olur.
    <form>
    <input type="checkbox" checked>seçenek 1
    <input type="checkbox">seçenek 2
    </form>
    seçenek1
    seçenek2

    <input type="checkbox>
    Ziyaretçiye, verilen seçeneklerden birini, birkaçını veya hepsini seçme imkanı verir.

    radio
    checked: sayfa açıldığında 'checked' ibaresi bulunan daire seçilmiş olur.
    <form>
    <input type="radio" name=sec">seçenek1<br>
    <input type="radio" name= "sec"checked>seçenek2<br>
    <input type="radio" name="sec">seçenek2
    </form>
    seçenek1
    seçenek2
    seçenek2

    <input type="radio">
    Ziyaretçiye, verilen seçeneklerden sadece birini seçme imkanı verir.

    select
    size: Select etiketinin karakter cinsinden boyutu
    selected: Görevi checked ifadesinin aynıdır.
    multiple: Ziyaretçinin birden çok seçim yapmasına olanak verir
    <form>
    <select size= "1">
    <option selected>seçenek1
    <option>seçenek2
    <option>seçenek3
    </select>


    <select><option>...<option>...</select>
    Ziyaretçiye seçeneklerden birini veya (multiple ifadesi ile) birkaçını seçme imkanı verir.

    submit
    value: Butonun üzerine yazılacak metin buraya yazılır
    <form>
    <input type="submit" value="Gönder">
    </form>


    <input type="submit>
    Ziyaretçi doldurduğu formu bu düğmeye basarak gönderir

    reset
    value: Butonun üzerindeki metin
    <form>
    <input type="reset" value="Sil">
    </form>


    <input type="reset" >
    Ziyaretçinin doldurduğu formda, ziyaretçinin yazdığı her şeyi siler.

    button
    value: Butonun üzerindeki metin
    <form>
    <input type="button" value="Düğme">
    </form>

    <input type="button>
    Düğmelere JavaScript ile bazı işlevler kazandırılabilir.




    Tabloda belirtmedik ama form elemanlarında daha önceden bildiğimiz name parametresi de kullanılabilir.




    12/2. <FORM> ETİKETİ

    İşte <form> etiketinin parametreleri ve bunların işlevleri:



    method
    'Get' veya 'post' değerlerini alabilir. Method parametresinin değeri formu göndereceğiniz CGI programı açısından önemlidir. Eğer CGI kodları yazmayı bilmiyorsanız, birçok servis sağlayıcı size form'larınızın sonuçlarını e-mail'inize gönderme imkanı verir. Eğer böyle bir hizmetten yararlanacaksanız 'post' metodunu seçmelisiniz.

    <form method= "post>

    action
    Formu göndereceğiniz CGI programının adresini action parametresiyle bildirirsiniz. Eğer yukarıda bahsedilen hizmetten yararlanmak istiyorsanız, servis sağlayıcınızdan bu programın adresini öğrenmelisiniz. Örneğin bu adres 'freeservers' için '/cgi-bin/cgiemail' 'dir.

    <form method="post" action= "/cgi-bin/cgiemail">





    --------------------------------------------------------------------------------


    12/3. FORM UYGULAMASI

    Aşağıdaki örnekte bütün form unsurlarının kullanımını göreceksiniz. Bu örneği önce parça parça kendiniz yapmaya çalışın, gerektiğinde aşağıda verilen kodlardan yararlanın...

    Bu siteye not verin!
    Kullanıcı ismi

    Parola

    Cinsiyet EK

    Bildiğiniz Uygulamalar





    Sitenin içeriği

    5, Çok zengin!
    4, Fazlasıyla yeterli
    3, Yeterli
    2, Yetersiz
    1, Çok kısıtlı

    Sitenin tasarımı



    <>




    --------------------------------------------------------------------------------

    <form name="anket">
    <p><h3>Bu siteye not verin!</h3></p>
    <p><b>Kullanıcı ismi</b> <input value="Buraya yazın!"></p>
    <p><b>Parola</b> <input type="password" maxlength="10"></p>
    <p><b>Cinsiyet</b> E<input type="Checkbox">K<input type="Checkbox">

    <p>Bildiğiniz Uygulamalar</p>
    <p><select size="4" multiple>
    <option>HTML
    <option>JavaScript
    <option>Css
    <option>Asp
    </select></p><br><br>

    <p><b>Sitenin içeriği</b></p>
    <p><input type="radio" name="not" value="5">5, Çok zengin!<br>
    <input type="radio" name="not" value="4">4, Fazlasıyla yeterli<br>
    <input type="radio" name="not" value="3" checked>3, Yeterli<br>
    <input type="radio" name="not" value="2">2, Yetersiz<br>
    <input type="radio" name="not" value="1">1, Çok kısıtlı <br></p>

    <p><b>Sitenin tasarımı</b></p>
    <p><select>
    <option selected>Harika!
    <option>Oldukça iyi
    <option>İyi
    <option>İdare eder
    <option>Berbat</option>
    </select></p>

    <p><input type="submit" value="gönder"><input type="reset" value="sil"
    </form>


    HTML bölümünün burada sonuna geldik. Fakat tek başına HTML, çoğu zaman istediğimiz gibi sayfalar yapabilmek için yeterli olmaz. Artık internet'te yeralan sayfaların hemen hepsinde JavaScript kullanılmaktadır. Aşağıdaki link size daha dinamik sayfalar yapma olanağı sunan JavaScript bölümüne götürecektir.



#16.07.2008 17:36 0 0 0