Challenge - Complex form
Write a form with hidden, file, range, color and output.
Complex form challenge
This challenge tests the advanced form topic in full: grouping with <fieldset> and <legend>, a hidden field (type="hidden"), a file field (type="file") with multiple and accept, a slider (type="range"), a colour picker (type="color"), and a live result with <output>.
The form needs action and method="post"; enctype="multipart/form-data" enables file uploads. Each field needs a <label>; matching for and id values bind them. autocomplete lets the browser autofill.
Exercise Write the complex form from scratch
Open a <form action="/register" method="post" enctype="multipart/form-data"> in body. Inside add a <fieldset> and a <legend> (put 'Profile' in the legend). Inside fieldset, in order: a <input type="hidden" name="step" value="1">; a <label> + <input type="file" name="avatar" accept="image/*" multiple>; a <label> + <input type="range" name="age" min="18" max="99">; a <label> + <input type="color" name="color">; a <label> + <output name="status">Pending</output>. Finish with a <button type="submit">Save</button>.
Show example solution
<body>
<form action="/register" method="post" enctype="multipart/form-data">
<fieldset>
<legend>Profile</legend>
<input type="hidden" name="step" value="1">
<label for="avatar">Avatar</label>
<input id="avatar" name="avatar" type="file" accept="image/*" multiple>
<label for="age">Age</label>
<input id="age" name="age" type="range" min="18" max="99">
<label for="color">Color</label>
<input id="color" name="color" type="color">
<label for="status">Status</label>
<output id="status" name="status">Pending</output>
<button type="submit">Save</button>
</fieldset>
</form>
</body>Test yourself
-
You want a slider field. What value do you put in the input's type attribute?
- type="slider"
- type="range"
- type="number"
- type="scroll"
Show answer
type="range" — Correct. type="range" gives a numeric slider; min and max set its bounds.
-
Write the output element
<form> <label for="amount">Amount</label> <input id="amount" type="range" min="0" max="100"> <____ id="result" for="amount">0</output> </form>Show answer
<form> <label for="amount">Amount</label> <input id="amount" type="range" min="0" max="100"> <output id="result" for="amount">0</output> </form> -
Match each input type to its role
- type="hidden"
- Hidden data
- type="file"
- File upload
- type="range"
- Slider
- type="color"
- Color picker
- <output>
- Live result