Summary - Settings panel

Write a settings panel with all advanced input types.

What we learned in this group

In this group you met five new form tools:

autocomplete token: telling the browser what a field wants (e.g. email, tel, address-line1)
hidden input: sending data to the server unseen (e.g. a CSRF token)
file input: file uploads with multiple and accept
range and color: a slider and a colour picker
output + the form attribute: showing a calculation result

Now we will combine them all in a settings panel.

Planning the settings panel

We split the settings panel into two fieldsets:

Account: email (with autocomplete) and a CSRF token (hidden input)
Preferences: volume (range), theme colour (color), avatar (file) and an output showing the volume level

Each fieldset starts with a <legend>. This keeps the form groups separate both visually and semantically; a screen reader also announces each part on its own.

Exercise Write a settings panel

Add a <form> inside body. Put two <fieldset>s inside. The first one's <legend> is Account; add an <input type="email" id="email" autocomplete="email"> and an <input type="hidden" name="csrf_token" value="abc123">. The second one's <legend> is Preferences; add an <input type="range" id="volume" min="0" max="100">, an <input type="color" id="theme">, an <input type="file" id="avatar" accept="image/png, image/jpeg" multiple> and an <output for="volume" name="vol-out"></output>.

Show example solution

<form>
  <fieldset>
    <legend>Account</legend>
    <label for="email">Email</label>
    <input type="email" id="email" name="email" autocomplete="email">
    <input type="hidden" name="csrf_token" value="abc123">
  </fieldset>
  <fieldset>
    <legend>Preferences</legend>
    <label for="volume">Volume</label>
    <input type="range" id="volume" name="volume" min="0" max="100">
    <label for="theme">Theme</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>

Test yourself

Match each input type to its scenario

range

Volume
color

Theme colour
file

Avatar upload
hidden

CSRF token

Add a token for the email field

<input type="email" name="email" autocomplete="____">

Show answer

<input type="email" name="email" autocomplete="email">

Next lesson: Meta description

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies