HTML Form Elemanları

HTML Form Elemanları : Form elemanları kullanıcının tüm geri dönüş işlemleri için gerekli olan ve bilgiyi yazılıp gönderildiği zaman içerisinde karşı tarafa iletilmesi işlemini yapmaya yarayan HTML ögeleridir. Bu işlemin temelinde genellikle HTML form ögeleri yer almaktadır. Bu ögeleri da aşağıda sizlerle paylaşıyor olacağım.

Html form elemanları kullanımı için aşağıda sizlere bir kaç tavsiyede bulunacağım ve örnekler yaparak Html form elemanlarını öğrenmenizi pekiştirmeye çalışacağım.

HTML Form Elemanları, genel olarak kullanılan ögelerin ne anlama geldiğini aşağıda ayrıntılı bir şekilde yazacağım.

  • input : Karakter ve sayısal verilerin girdileri için kullanılmaktadır.
    • Ad soyad, e-Posta vb..
  • textarea : Genellikle formların mesaj bölümlerinde yer almaktadırlar.
    • Mesaj Kutusu.
  • label : Herhangi bir form elemanın tanımlayıcısı’dır.
    • Telefon Kutusunun tanımlayıcısı’dır.
  • radio : Tek seçenek durumu tanıyan form elemanıdır.
    • Cinsiyet belirleme.
  • checkbox : Çoktan seçmeli form elemanıdır.
    • Sevdiğiniz renkler.
  • select : Liste menüsü şeklinde aşağı veya yukarı doğru açılan form elemanıdır.
    • Yaş seçimleri.
  • fieldset : Belirli bir form elementlerini kapsamak için kullanılır.
    • Sınır belirler.

Form Elemanları Nasıl Kullanılır?

Form elemanlarının kullanımı oldukça kolaydır. HTML body etiketinin içinde aşağıda biraz sonra yazacağım gibi form etiketinin içine elemanlar tanımlanarak form oluşturulabilir. Form etiketinin genel özellikleri aşağıdaki gibidir.

HTML Form Örneği:

<form action="gonder.php" method="POST" name="form-gonder">
	---
</form>
  • action : Form verilerinin gönderileceği adres.
  • method : Form verilerinin hangi yöntemle gönderileceği.
    • POST ve GET olarak 2’ye ayrılır.
  • name : Form’un adını belirlemede kullanılır.

 

HTML Form input

Form verileri içinde genellikle ad soyad, telefon, e-posta vb.. verileri almak için kullanılan giriş elemanıdır.

Örnek:

<input type="text" value="Ad Soyad" readonly name="ad-soyad" />

Özellikler:

  • type : input’un hangi değerde olacağını gösterir.
    • text
    • password
    • number
  • value : İçerisinde bulunan değer.
  • name : input’un form içindeki ismidir.
  • readonly : Sadece okunabilir anlamına gelmektedir.

HTML Form Textarea

Form içinde bizlere geniş yazı alanı tanımaktadır. Mesaj vb.. gibi işlemler için kullanılabilir.

Örnek:

<textarea name="mesaj" rows="6" cols="40">Mesajınızı Girin</textarea>

Özellikler:

  • name : Textarea‘nın adını belirlemek için kullanılır.
  • rows : Oluşacak kutucuğun uzunluğunu belirler.
  • cols : Oluşacak kutucuğun genişliğini belirler.

 

HTML Form Label

Form elemanlarının ne olduğunu belirlemek için başına yazılan belirteçtir.

Örnek:

<label for="email">E-Posta</label>

Özellikler:

  • for : Form ögesinde name veya id ile belirtilmiş kısımla aynı yazılırsa label tıklandığında doğrudan form elemanın içine gider.

HTML Form Radio

Tek seçimli olarak sunulan form elemanıdır. Aynı grup içinde sadece bir seçim yapabilirsiniz.

Örnek:

<input type="radio" name="cinsiyet" value="Erkek"> Erkek<br />
<input type="radio" name="cinsiyet" value="Kadın"> Kadın

Özellikler:

  • type : input’un tipini belirlemek için kullanılır.
  • name : radio grubu tanımlama işlemi için kullanılır.
  • value : Tıklanan butonun verisinin gönderileceği veridir.

HTML Form Checkbox

Çoktan seçmeli form sorularınız için kullanabileceğiniz form elemanıdır.

Örnek:

<input type="checkbox" name="renk" value="Kırmızı"> Kırmızı<br />
<input type="checkbox" name="renk" value="Mavi "> Mavi

Özellikler:

  • type : input‘un tipini belirlemek için kullanılır.
  • name : Checkbox grubu tanımlama işlemi için kullanılır.
  • value : Tıklanan butonun verisinin gönderileceği veridir.

 

HTML Form Select

Listeleme halinde aşağı açılan form elemanıdır. Genellikle yaş, ülke, şehir vb.. seçimler için kullanılmaktadır.

Örnek:

<select name="sehir">
	<option value="İstanbul">İstanbul</option>
	<option value="Ankara">Ankara</option>
	<option value="Rize">Rize</option>
</select>

Açıklama:

  • name : select grubu tanımlama işlemi için kullanılır.
  • value : Seçilen butonun verisinin gönderileceği veridir.

HTML Form Fieldset

Form elemanlarının kapsayıcısı olarak da bilinmektedir. İçerisine yazdığınız elemanları kapsar.

Örnek:

<fieldset>
	Form Elemanları...
</fieldset>
HTML Form Elemanları
Etiketlendi: