Form iskeleti

Form, fieldset, legend ve etiketleri kurarsın.

Form, fieldset ve legend

<form> etiketi tüm alanları içinde tutar ve verinin nereye gönderileceğini belirler. action özniteliği hedef URL'i, method ise HTTP yöntemini (genelde post) söyler.

<fieldset> ilgili alanları bir kutu gibi gruplar; <legend> o grubun başlığını verir. Bu, uzun formları düzenler ve ekran okuyucu kullanıcılar için yapı kurar. Şimdi Kafe Dem formunu kurmaya başlayalım.

Label ve input ikilisi

Bir alanı erişilebilir yapmak için <label> ve <input> çifti kullanılır. Label'ın for özniteliği ile input'un id özniteliği aynı değerde olmalıdır.

Böylece label'a tıklamak da input'u odaklar ve ekran okuyucu alan adını yüksek sesle okur. name özniteliği ise sunucuya giden verinin anahtarıdır; bu yüzden benzersiz ve anlamlı olmalıdır.

Uygulama Form iskeletini ekle

Belge iskeletinin body'sine bir <form> ekle: action='/bize-yazin', method='post' olsun. Form içine bir <fieldset> koy; <legend>'ı 'İletişim bilgileri' olsun. Fieldset içine bir label+input çifti ekle: label for='ad' 'Adınız', input type='text' id='ad' name='ad' olsun.

Örnek çözümü göster

<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Kafe Dem - İletişim</title>
  </head>
  <body>
    <form action="/bize-yazin" method="post">
      <fieldset>
        <legend>İletişim bilgileri</legend>
        <label for="ad">Adınız</label>
        <input type="text" id="ad" name="ad">
      </fieldset>
    </form>
  </body>
</html>

Kendini test et

Bir label'in for özniteliği neyi işaret eder?
```
<label for="ad">Adınız</label>
<input id="ad" name="ad">
```
- input'un name'ini
- input'un value'sini
- input'un id'sini
- form'un action'unu
Cevabı göster

input'un id'sini — Doğru! for='ad' ile id='ad' eşleşir; label tıklamayı input'a yönlendirir.

Eksik label-input çiftini tamamla

<label for="eposta">E-posta</label>
<input type="email" ____="eposta" name="eposta">

Cevabı göster

<label for="eposta">E-posta</label>
<input type="email" id="eposta" name="eposta">

Etiketleri görevleriyle eşleştir

form

Veriyi gönderir
fieldset

Alanları gruplar
legend

Gruba başlık verir
label

Alan adını söyler

Sıradaki ders: Kişi alanları

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler