Özet - Ayarlar paneli
Tüm gelişmiş input türleriyle bir ayarlar paneli yazarsın.
Bu grupta öğrendiklerimiz
Bu grupta beş yeni form aracı öğrendin:
- autocomplete token: tarayıcıya alanın ne istediğini söyleme (örn.
email,tel,address-line1) - hidden input: görünmeden sunucuya veri gönderme (örn. CSRF token)
- file input:
multipleveacceptile dosya yükleme - range ve color: kaydırıcı ve renk seçici
- output + form özniteliği: hesap sonucu gösterme
Şimdi hepsini bir ayarlar panelinde birleştireceğiz.
Ayarlar panelini planlamak
Ayarlar panelini iki fieldset'e bölüyoruz:
- Hesap: e-posta (autocomplete ile) ve CSRF token (gizli input)
- Tercihler: ses seviyesi (range), tema rengi (color), avatar (file) ve ses seviyesini gösteren output
Her fieldset bir <legend> ile başlar. Böylece form grupları hem görsel hem anlamsal olarak ayrılır; ekran okuyucu da her bölümü tek başına duyurur.
Uygulama Ayarlar paneli yaz
Body içine bir <form> ekle. İçine iki <fieldset> koy. Birincinin <legend>'ı Hesap olsun; içine <input type="email" id="email" autocomplete="email"> ve <input type="hidden" name="csrf_token" value="abc123"> ekle. İkincinin <legend>'ı Tercihler olsun; içine <input type="range" id="volume" min="0" max="100">, <input type="color" id="theme">, <input type="file" id="avatar" accept="image/png, image/jpeg" multiple> ve <output for="volume" name="vol-out"></output> ekle.
Örnek çözümü göster
<form>
<fieldset>
<legend>Hesap</legend>
<label for="email">E-posta</label>
<input type="email" id="email" name="email" autocomplete="email">
<input type="hidden" name="csrf_token" value="abc123">
</fieldset>
<fieldset>
<legend>Tercihler</legend>
<label for="volume">Ses</label>
<input type="range" id="volume" name="volume" min="0" max="100">
<label for="theme">Tema</label>
<input type="color" id="theme" name="theme">
<label for="avatar">Avatar</label>
<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" multiple>
<output for="volume" name="vol-out">50</output>
</fieldset>
</form>Kendini test et
-
Input türünü senaryoyla eşleştir
- range
- Ses seviyesi
- color
- Tema rengi
- file
- Avatar yükleme
- hidden
- CSRF token
-
E-posta alanı için token ekle
<input type="email" name="email" autocomplete="____">Cevabı göster
<input type="email" name="email" autocomplete="email">