CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Form iskeleti

HTML kursu · Orta seviye · Ders 42/67

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

  1. 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.

  2. 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">

  3. 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

Orta seviye bölümündeki tüm dersler

1 İleri metin etiketleri

  1. Abbr, cite ve time
  2. Code, kbd ve samp
  3. Sub ve sup
  4. Pre ve code bloğu
  5. Wbr ve bdi, bdo
  6. Özet - Teknik doküman

2 İleri bağlantılar

  1. Download bağlantıları
  2. Ping ve rel türleri
  3. Hreflang ve canonical
  4. Bağlantı erişilebilirliği
  5. Buton vs bağlantı
  6. Özet - Çok dilli menü

3 Proje: Landing sayfası

  1. Proje: Ürün landing sayfası
  2. Hero bölümü
  3. Özellik listesi
  4. Fiyat tablosu
  5. Proje sonu - Landing

4 İleri tablolar

  1. Col ve colgroup
  2. Scope ve headers
  3. Tablo erişilebilirliği
  4. Responsive tablolar
  5. Tablo görsel yapısı
  6. Özet - Karşılaştırma tablosu

5 Proje: Veri tablosu

  1. Proje: Veri tablosu
  2. Başlık ve caption
  3. Gövde verisi
  4. Toplam satırı
  5. Proje sonu - Veri tablosu

6 İleri form öğeleri

  1. Fieldset ve legend
  2. Datalist ve output
  3. Progress ve meter
  4. Input öznitelikleri
  5. Autocomplete ve inputmode
  6. Özet - Anket formu

7 Form doğrulama

  1. Required ve pattern
  2. Min, max ve step
  3. Minlength ve maxlength
  4. Type-based doğrulama
  5. Novalidate ve formnovalidate
  6. Özet - Kayıt formu doğrulama

8 Proje: İletişim formu

  1. Proje: İletişim formu
  2. Form iskeleti
  3. Kişi alanları
  4. Mesaj ve konu
  5. Proje sonu - İletişim formu

9 Anlamsal düzen

  1. Header yapısı
  2. Ana içerik
  3. Sidebar ve aside
  4. Footer yapısı
  5. Bölümleme kuralları
  6. Özet - Magazin sayfası

10 Erişilebilirlik temelleri

  1. ARIA temelleri
  2. Saklı başlık
  3. Skip link
  4. Form erişilebilirliği
  5. Tablo erişilebilirliği
  6. Özet - Erişilebilir kart

11 Proje: Site iskeleti

  1. Proje: Çok sayfalı site iskeleti
  2. Tutarlı header/footer
  3. Ana sayfa
  4. Hakkında ve iletişim
  5. Proje sonu - Site iskeleti

12 Orta seviye finali

  1. Meydan okuma - İleri metin
  2. Meydan okuma - Erişilebilir tablo
  3. Meydan okuma - Doğrulamalı form
  4. Meydan okuma - Anlamsal düzen
  5. Meydan okuma - Orta seviye projesi