Ö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: multiple ve accept ile 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">

Sıradaki ders: Meta description

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler