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
multipleandaccept - 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">