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

Next lesson: Required and pattern

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies