Özet - Anket formu

Tüm gelişmiş form öğeleriyle bir anket formu oluşturursun.

Anket formunu birleştir

Bu grupta öğrendiklerini tek bir anket formunda birleştir. fieldset ile ilgili alanları gruplarsın, legend ile gruba başlık verirsin. placeholder ve required ile alanlara ipucu ve zorunluluk katarsın.

Öneriler için datalist, otomatik doldurma için autocomplete ve mobil klavye için inputmode kullanırsın. Doğru kombinasyon, formu hem hızlı hem erişilebilir yapar.

Uygulama Anket formunu kur

Bir anket formu oluştur. Form içine bir <fieldset> aç, ilk çocuk olarak <legend> yaz ve metni Katılımcı bilgileri olsun. Legend'den sonra bir <label for="ad"> ve <input id="ad" name="ad" required> ekle; etiket metni Adınız olsun. Aynı fieldset içine bir <input type="email" name="eposta" autocomplete="email" placeholder="E-posta adresiniz"> daha ekle. En son </fieldset> ile kapat.

Örnek çözümü göster

<form>
  <fieldset>
    <legend>Katılımcı bilgileri</legend>
    <label for="ad">Adınız</label>
    <input id="ad" name="ad" required>
    <input type="email" name="eposta" autocomplete="email" placeholder="E-posta adresiniz">
  </fieldset>
</form>

Anket formu tamam

Tebrikler! Bir anket formunu baştan sona kurdun. fieldset ve legend ile alan gruplama, placeholder ve required ile doğrulama, datalist ile öneriler, autocomplete ve inputmode ile mobil deneyim artık elinin altında.

İleride form gönderimi, sunucu yanıtı ve kullanıcıya anlık geri bildirim konularını birlikte ele alacağız. Şimdilik bu yapıyı kendi projelerinde kullanabilirsin.

Kendini test et

Anket formunda en doğrusu hangisidir?
- Tüm alanları required yapmak
- Etiketler yerine placeholder kullanmak
- İlgili alanları fieldset ile gruplamak
- Input'lara id vermemek
Cevabı göster

İlgili alanları fieldset ile gruplamak — Doğru. İlgili alanları fieldset ile gruplamak anketi derli toplu ve erişilebilir yapar.

Fieldset'in ilk çocuğu olan etiket

<fieldset><____>Katılımcı bilgileri</legend></fieldset>

Cevabı göster

<fieldset><legend>Katılımcı bilgileri</legend></fieldset>

Etiket ve özniteliği rolüyle eşleştir

fieldset

Alan gruplama
legend

Grup başlığı
datalist

Öneri listesi
autocomplete

Otomatik doldurma
placeholder

Boş alan ipucu

Sıradaki ders: Required ve pattern

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler