Skip to main content

HTML Form Elements — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the HTML Form Elements lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Exercises(5)

  1. 1

    Add a dropdown

    easy10 min

    Add a select with two options.

  2. 2

    Add a multi-line field

    easy10 min

    Add a textarea named message.

  3. 3

    Group related fields

    easy10 min

    Wrap two inputs in a fieldset with a legend.

  4. 4

    Label a field

    easy10 min

    Connect a label to an input with for/id.

  5. 5

    Group options

    medium10 min

    Use optgroup to group two options.

Find the bug(5)

  1. 1

    Fix the options outside the select

    easy8 min

    Options only work inside a select.

  2. 2

    Fix the input used for long text

    easy8 min

    A multi-line message needs a textarea.

  3. 3

    Fix the missing legend

    easy8 min

    The fieldset has no legend describing it.

  4. 4

    Fix the unlinked label

    easy8 min

    The label's for does not match the input's id.

  5. 5

    Fix the span used as a label

    easy8 min

    A span carries no labelling semantics.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace