Ö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