Summary - Survey form
Build a survey form with all advanced form elements.
Bring the survey form together
Bring together what you learned in this group into one survey form. With fieldset you group related fields, with legend you title the group. With placeholder and required you add hints and obligations.
For suggestions use datalist, for autofill autocomplete, for the mobile keyboard inputmode. The right mix makes the form fast and accessible.
Exercise Build the survey form
Build a survey form. Open a <fieldset> inside the form, write a <legend> as its first child with the text Participant details. After the legend add a <label for="ad"> and an <input id="ad" name="ad" required>; the label text should be Your name. Inside the same fieldset add another input: <input type="email" name="eposta" autocomplete="email" placeholder="Your email address">. Close with </fieldset>.
Show example solution
<form>
<fieldset>
<legend>Participant details</legend>
<label for="ad">Your name</label>
<input id="ad" name="ad" required>
<input type="email" name="eposta" autocomplete="email" placeholder="Your email address">
</fieldset>
</form>Survey form complete
Congratulations! You built a survey form from start to end. With fieldset and legend you grouped fields, with placeholder and required you added validation, with datalist you gave suggestions, with autocomplete and inputmode you tuned the mobile feel.
Later we will cover form submission, server response and instant user feedback together. For now, use this structure in your own projects.
Test yourself
-
What is the best practice for a survey form?
- Make every field required
- Use placeholder instead of labels
- Group related fields with fieldset
- Skip id attributes on inputs
Show answer
Group related fields with fieldset — Correct. Grouping related fields with fieldset makes the survey tidy and accessible.
-
First child tag of fieldset
<fieldset><____>Participant details</legend></fieldset>Show answer
<fieldset><legend>Participant details</legend></fieldset> -
Match each tag and attribute to its role
- fieldset
- Field grouping
- legend
- Group heading
- datalist
- Suggestion list
- autocomplete
- Autofill
- placeholder
- Empty field hint