Anasayfa / Web Tasarım / HTML / HTML Form Oluşturma 1. Kısım (Ders 9)

HTML Form Oluşturma 1. Kısım (Ders 9)

Bir web sayfasında formlar ile çalışmak için sadece html dilini bilmek yetmez. Bunun nedenini öğrenmek için bakınız. Html’nin yanında php dilinin bilinmesi gerekmektedir. Ancak bilmiyorsanız bu yazımızda kısaca bahsedeceğiz.

Form oluşturmak için kullanacağımız etiketler başlıca şunlardır:

<form>

Html sayfaları içerisinde diğer sayfalar ile etkileşimli form oluşturan etikettir. İçerisinde aşağıdakilerin en az birini barındırır.

  • <input>
  • <textarea>
  • <button>
  • <select>
  • <option>
  • <label>
  • <optgroup>
  • <fieldset>

Şu ana basitleştirmek adına etiket özellikleri dediklerimizin aslında parametreler olduğunu öğrenme vakti geldi. Form yapılarından bahsederken özellik değil parametre olarak bahsederiz.

Form yapıları aşağıdaki parametreleri alabilir.

ParametreDeğer TipiAçıklama
actionUrlForm içerisinde girilen verilerin gönderileceği adresi belirtir.
methodAlma (get)
Gönderme (post)
Gönderim metodunu belirtir. Get veya Post seçilir.
nameYazıFormun ismi burada belirtilir.
target_blank
_self
_parent
_top
Formun gönderildiği sayfanın nasıl açılacağını belirtir.
accept-charsetKarakter SetiForm içerisinde kullanılabilecek karakter setlerini belirtir.
autocompleteOn/OffOtomatik tamamlama yapılıp yapılmayacağı burada belirtilir.
novalidateDoğrulama(novalidate) ibaresiForm gönderilmeden önce kontrol/doğrulama yapılmayacağını belirtir.
enctypeForm verilerinin nasıl şifreleneceği burada belirtilir.

<input>

Form yapımıza veri girişi sağlamak için kullanılır. Oldukça fazla tipi ve parametresi olduğundan bir sonraki yazımızda detaylıca bahsedeceğiz.

<textarea>

Form yapısınaçok satırlı metin verilerinin girişini sağlayan etikettir. Bu etiket metin alanının kaç satır ve sütundan oluşacağının tasarımcı tarafından belirtilmesini sağlamaktadır. Bu da <textarea> etiketini güçlü yapan özelliklerinden biridir.

<button>

Form yapılarına üzerine tıklanabilir buton eklemek için kullanılır. Buton görünümü css ile şekillendirilebilir, çeşitli özellikleri sağlayabilir. Alabileceği parametreler:

  • autofocus (oto-odaklama)
  • disabled (devre dışı bırakma)
  • form
  • formaction
  • formenctype
  • formmethod
  • formtarget
  • name (isim)
  • type (tip)
  • value (değer)

4 farklı tip buton vardır:

Düğme TipiAnahtar KelimeAçıklaması
DüğmebuttonEtkisizdir, düğmeyi tanımlar.
GöndersubmitFormu belirlenen adrese gönderir.
TemizleresetFormu temizler
MenümenuMenüyü gösterir.

<select> ve <option>

Kullanıcıya önceden belirtilmiş olan seçeneklerden birini seçmesi için kullanılır. Genellikle açılır liste (drop-down list) olarak kullanılır. Bu liste içerisine seçilebilecek elemanlar <option> etiketi ile eklenir. Tercih edilebilecek her bir seçenek ayrı bir opsiyonu temsil eder.

<optgroup>

Bu etiket isminden (Option Group) de anlaşılacağı <option> etiketlerini gruplara ayırmaya yarar. <select> etiketi içerisine yazılır. <option> etiketlerini içerisinde barındırır.

<datalist>

Tıpkı <select> etiketinde olduğu gibi bu etikette kullanıcıdan bir liste üzerinden seçim yapmasını ister. Ancak <datalist> etiketi oto-tamamlama özelliğine sahiptir. Bu özellik sayesinde bir harf veya harf dizisi girilmesi üzerine yazılanları tamalayacak seçenekleri gösterir.

<label>

<label> elemanları herhangi bir veri girişi sağlamaz. Görevi form elemanları hakkında ziyaretçiye veri girişi sağlayan form elemanlarına dair bilgi vermektir.

<fieldset> ve <legend>

<fieldset> etiketi benzer özelliklere sahip form elemanlarını gruplamak için kullanılır. Bu gruplama kullanıcıya form elemanlarının bir çerçeve içinde toplanmış olarak görünmesini sağlar. <legend> etiketi ise bu çerçeveye başlık eklememizi sağlar.

<output>

Bu etiket ile tasarımcının önceden belirttiği bazı matematiksel hesaplamaları yapmak mümkün olur. Örneğin form içerisinde input elemanları ile elde edilen iki değerin çarpılması sağlanabilir.

<keygen>

<keygen> etiketi şifre üreten (key generator) bir etikettir. Şifre oluşturulduktan sonra oluşturulan şifre setininden (private ve public şifre çifti) public sunucuda(server) tutulurken, private lokal bilgisayarda tutulmasını sağlar.

Bu yazımızda örnek yapılmayacaktır. Form yapılarının tamamen kavranması için <input> etiketlerinin öğrenilmesi gerekmektedir. <input> etiketi ve parametrelerinin tanıtılacağı yazıdan sonra kapsamlı bir örnek verilecektir.

Bir sonraki yazımızda görüşmek üzere…

Hakkında Furkan Yağmur

Check Also

web-gemisi

HTML Liste Oluşturma Etiketleri (Ders 8)

Html yapılarında liste oluşturmak için iki seçenek vardır. Bunlar Sıralı ve Sırasız listelerdir. Listelerimizin içine …

Bir cevap yazın

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