HTML Dersleri 9 Formlar

FORMLAR

HTML formları, ziyaretçilerden bilgi almak için kullanılan en önemli bileşendir. Günlük hayatta üyelik, kayıt yapma, arama, ilan verme, e-posta adresini kontrol etme gibi birçok işlem  sırasında HTML formlar ile karşılaşırız. Formlar, çeşitli biçimlerde bilgi almayı sağlayan birçok bileşene sahiptir. Bunlardan en çok kullanılanları metin kutusu, açılan liste, seçenek düğmesi ve onay kutusu olarak verilebilir.

METİN ALANLARI

<form>, <label> ve <input> Etiketleri

Kullanıcının rakam veya harf girmesini istediğiniz yerlerde bunu kullabilirsiniz. Bir form oluşturmak için <form>…</form etiketi ile formu başlatmak gereklidir. Form oluştururken kullanacağımız ikinci element <input> elementidir. “input” ise girdi anlamına gelmektedir ve kullanıcıdan aldığımız verileri sunucuya göndermek için kullanılır. Diğer bir etiket ise <label> etiketi, “label” dilimizde etiket anlamına gelmektedir ve formdaki başlıkları bu element içine yazabiliriz.

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

Çıktısı ise şu şekilde olacaktır:

FORM ELEMENTİ

<button> Elementi

Anlamı düğmedir. Adından da anlaşılacağı gibi düğme oluşturmak için kullanılır.

Kullanımı aşağıdaki gibidir:

Ekran görüntüsü ise şu şekildedir:

FORMLARDA “ACTİON” PARAMETRESİ VE “SUBMİT” BUTONU

Formlar kullanıcıdan topladıkları bilgileri web sunucusuna iletmeyi sağlarlar. Dolayısı ile bir formun görevini yerine getirebilmesi için web sunucu üzerinden gelen veriyi karşılayarak sunucunun diskine veya sunucudaki veri tabanına kaydedecek bir programlama diline ihtiyaç vardır. Bu programlama dilleri “sunucu taraflı programlama dilleri” olarak bilinir ve en bilinenlerinden biri PHP’ dir.

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.

  • Name :Formun adı
  • Action :Formun topladığı bilgi hangi dosyaya iletilecekse action bölümüne ilgili dosyanın URL adresi yazılır.
  • Method :Form sunucuya bilgi gönderirken hangi yöntemi kullanacaksa ilgili yöntemin adı yazılır: İki tür yöntem vardır. GET ve POST. GET yöntemi kullanılırsa form bilgileri tarayıcı adres çubuğunda sayfa URL adresinin arkasında görünür. POST yönteminde ise form bilgileri web tarayıcı tarafından ayrıca sunucuya gönderilir; adres çubuğunda görüntülenmez.

ÖRNEK:

Yukarıdaki kodu çalıştırdığınızda hata verecektir. Kod bloğunun çalışması için PHP dili ile oluşturulmuş bir kaydet.php dosyası gereklidir.  Ziyaretçi ilgili kutucuğa verileri girip Gönder butonuna tıkladığı zaman ziyaretçinin girmiş olduğu bilgiler veritabanında bulunan kaydet.php dosyasına kaydedilir.

<fieldset> ve <legend> Etiketleri

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

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

Çıktısı ise şu şekilde olacaktır:

 Form Elementleri
 

<OPTGROUP> ELEMENTİ

Bazen seçim menüsünde seçimleri sınıflandırmak isteyebiliriz. Bunun için <optgroup> etiketini kullanmamız yeterlidir.

ÖRNEK :

Çıktısı ise şu şekildedir:

OPTGROUP ELEMENTİ

<textarea> Etiketi

Tek satırlı ve metin kutusu iki farklı karakter girişi için oluşturulabilir. Text ve parola girişi biçiminde oluşturulabilen metin kutusunun oluşturma biçimi benzerdir. Her ikisi de <input> etiketi ile oluşturulur. Aralarındaki tek fark text metin kutusunun type niteliğinin değeri text, parola metin kutusunun ise type niteliğinin değeri password olarak verilmesidir. Çok satırlı metin kutusu ise bazen adres bilgileri gibi birden fazla satırı ihtiva etmesi gereken metin girdilerine ihtiyacımız olabilir. Bunun için <textarea> etiketini kullanabiliriz.

Ekran çıktısı şu şekildedir:

 Textarea Elementi
 

<textarea> etiketi kullanılırken bilinmesi gereken önemli nokta rows ve cols, yani satırlar ve sütunlar atıfları ile metin alanımızın büyüklüğünü belirleyebilmemiz.

Bu örneğe ek olarak belirtmem gerekir ki <input type=”submit” /> buton ile formu onaylayıp sunucuya gönderebilir; <input type=”reset” /> buton ile ise formun verilerini temizleyebilirsiniz.

<input> etiketine ait nitelikler şu şekildedir :

  • Type :Etiketin oluşturacağı görsel bileşenin tipini belirtir. “text”, “password” gibi değerler alır.
  • Name :Form bileşeninin adının yazıldığı kısımdır.
  • Value :Form bileşeni ilk çalıştığında görüntülenecek metinin girildiği kısımdır.
  • Size :Metin veya parola kutusunun genişlik değeri yazılır. Örneğin 10 yazarsanız 10 karakter genişliğinde metin sığar. 10 karakterden fazla yazılırsa metin sola doğru kayar.
  • Maxlength: Metin veya parola kutusuna yazılacak en fazla metin sayısını belirtir.

<textarea> etiketine ait nitelikler ise şöyledir :

  • Rows :Kaç satır metin yazılabileceğini belirtir. Verilen sayı aşılırsa metin girişini engellemez; ancak bunun yerine yukarı ve aşağı kaydırma çubuğu görüntülenir.
  • Cols :Kaç sütun yazılabileceğini belirtir. Her harf bir sütundur. Örneğin, cols=30 değeri 30 harf genişliğinde bilgi girişine izin verir. Verilen sayı aşılırsa metin girişini engellemez; ancak bunun yerine sağa ve sola kaydırma çubuğu görüntülenir.

SEÇENEK BUTONLARI (RADIO BUTTONS) VE KONTROL KUTULARI (CHECKBOX)

Kullanıcının doğrudan bilgi girişi yapması yerine bizim önerdiğimiz değerlerden birisini seçmesi isteniyorsa onay kutuları (checkbox) ve seçenek düğmeleri (radio buttons) kullanılır. Bunların her ikisi de <input> etiketi ile oluşturulur. Aralarındaki tek far şudur; onay kutularında kullanıcı birden fazla seçeneği işaretleyebilir, seçenek düğmelerinde ise seçeneklerden sadece bir tanesini işaretleyebilir. Eğer onay kutusu oluşturulacaksa type=”checkbox” ifadesi, seçenek düğmesi oluşturulacaksa type=”radio” ifadesi kullanılır.

ÖRNEK:

Formumuzun çıktısı aşağıdaki gibi olacaktır:

  Kontrol kutuları (Checkboxes) ve Seçenek Butonları (Radio Buttons)
 

Onay kutuları ve seçenek düğmelerine ait sık kullanılan nitelikler şöyledir:

    • Value :Bir onay kutusu veya seçenek düğmesi tıklandığında sunucuya “value” niteliğinde yazan bilgi gönderilir.
    • Checked :Eğer bir onay kutusu veya seçenek düğmesi form ilk açıldığında default olarak seçili gelmesi isteniyorsa <input> etiketinin içine nitelik olarak “checked” ifadesi eklenir.

Örneğin;

<select> ve <option> Etiketleri

Görünüş olarak metin kutusuna benzeyen fakat sağ tarafında ufak bir aşağı ok simgesi bulunan form elemanıdır. <select> etiketi ile oluşturulur ve her bir seçenek için <option> etiketi kullanılır. select dilimizde seçim anlamına gelmektedir. option ise seçenek anlamındadır. <select> ve <option> etiketlerinin birlikte kullanımı “açılır menü” oluşturmamıza yarar. Seçenek düğmelerinde olduğu gibi kullanıcının birden fazla değerden birini seçebilmesine olanak sağlar.

ÖRNEK :

Çıktısı ise şu şekildedir:

Select ve Option

<select> etiketine ait sık kullanılan nitelikler şöyledir:

    • Size :Açılan kutunun görünür yüksekliğini belirtir. Örneğin ders isimli açılan kutu şu şekilde tanımlanırsa, ekranda sadece “Matematik” ifadesini içeren tek satır değil, hem Matematik hem de Fizik ifadesini gösteren iki satır yüksekliğinde açılan kutu görüntülenir. 

    • Multiple: Bu ifade eklendiğinde açılır kutu yerine bir önceki örnekteki gibi liste şeklinde bir bileşen görüntülenir ve bu listede birden fazla öğe fare ve CTRL tuşuna birlikte basılarak seçilebilir.

<option> etiketine ait sık kullanılan nitelikler ise şöyledir:

  • Selected:Eğer açılır kutu seçeneği form ilk açıldığında default olarak seçili gelmesi isteniyorsa <option> etiketine selected ifadesi eklenir.

HTML FORMLARDA BUTONLAR

Formlarda butonlar vazgeçilmez elemanlardır. Butonlar da diğer birçok elemanda olduğu gibi <input> etiketi ile oluşturulurlar. 3 temel işlevi yerine getiriler. Bunlar submit, reset ve button olarak ifade edilebilir. Bu üç görev için <input> etiketinin type niteliğine üç ayrı değer verilerek elde edilen butonlar kullanılır. Bu değerler:

  • Submit :Bu kod ile oluşturulan butonlar, formu web sunucuya göndermeyi sağlar.
  • Reset :Bu kod ile oluşturulan butonlar, formun içerisine kullanıcının girdiği bilgileri silerek formu temizleyip ilk haline getirmeyi sağlar.
  • Button :Bu kod ile oluşturulan butonlar, buton tıklandığında özel olarak yazılmış javascript fonksiyonlarının çalıştırılmasını sağlar.

ÖRNEK:

Bu örneğe ait çıktımız şu şekildedir.

HTML FORMLARDA BUTONLAR

HTML formlar konusunu ve HTML 5 ile gelen yeni form özelliklerini öğrenmiş olduk. HTML 5 ile daha bir çok form özelliği ve veri girişi tipleri gelmiştir. İlgili konulara buradaki dersimizden ulaşabilirsiniz. Umarım faydalı bir ders olmuştur. Gelecek dersimizde HTML dilinde kullanılan özel karakterler konusunu işleyeceğiz. Bir sonraki dersimizde görüşmek üzere…

 

 

 

About egitimkanalim.com

Check Also

HTML Dersleri 15 HTML 5 Media Etiketleri

YENİ ETİKETLER VE ANLAMSAL WEB HTML 5 ile gelen ActiveX, Flash Player, Quicktime gibi web …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir