Form Öğeleri

Photo by Jackson Sophat on Unsplash

Form öğeleri, HTML formalarında kullanıcıdan veri almak veya kullanıcıya veri göndermek için kullanılan etiketlerdir. İşte en yaygın kullanılan form öğeleri ve özniteliklerin detaylı açıklamaları:

<input> Etiketi

<input> etiketi, kullanıcının metin girmesine veya bir seçenek seçmesine izin vermek için kullanılır.

type özniteliği, farklı veri türlerini belirtmek için kullanılır.

1. type="text": Metin girişi için kullanılır.
2. type="password": Şifre girişi için kullanılır (girilen metin gizlenir).
3. type="email": E-posta adresi girişi için kullanılır.
4. type="checkbox": Onay kutusu oluşturur.
5. type="radio": Seçenekler arasından birini seçmek için kullanılır.
6. type="submit": Formun gönderilmesini sağlayan bir gönder düğmesi oluşturur.

<input type="text" name="username" placeholder="Kullanıcı Adı">
<input type="password" name="password" placeholder="Şifre">
<input type="email" name="email" placeholder="E-posta Adresi">
<input type="checkbox" name="newsletter" checked> Bültene abone ol
<input type="radio" name="gender" value="male"> Erkek
<input type="radio" name="gender" value="female"> Kadın
<input type="submit" value="Gönder">

Yukarıdaki örnekte, farklı type öznitelikleri kullanılarak farklı form öğeleri oluşturulmuştur.

<select> ve <option> Etiketleri

<select> etiketi, bir açılır menü oluşturmak için kullanılır.

<option> etiketi ise seçenekleri belirtmek için kullanılır. Kullanıcı, açılır menüden bir seçenek seçebilir.

<select name="city">
  <option value="istanbul">İstanbul</option>
  <option value="ankara">Ankara</option>
  <option value="izmir">İzmir</option>
</select>

Yukarıdaki örnekte, <select> etiketi ile bir açılır menü oluşturulmuş ve <option> etiketleri ile seçenekler belirtilmiştir.

<button> Etiketi

<button> etiketi, tıklanabilir bir düğme oluşturmak için kullanılır. Formun gönderilmesini veya başka bir işlemi tetiklemek için kullanılabilir.

<button type="submit">Gönder</button>
<button type="reset">Sıfırla</button>
<button type="button">İptal</button>

Yukarıdaki örnekte, farklı <button> etiketleri kullanılarak tıklanabilir düğmeler oluşturulmuştur.

type özniteliği, düğmenin işlevini belirtir.

Bu sadece bazı temel form öğeleridir. HTML formalarında daha fazla öğe ve öznitelik bulunabilir. Form öğeleri, kullanıcıdan veri almak, seçenekleri sunmak ve kullanıcı etkileşimini sağlamak için önemlidir.