Add a select with two options.
Acceptance criteria
- 1.Add a select with two options.
HTML Tutorial · HTML Forms
These 10 tasks go with the HTML Form Elements chapter. 5 of them ask you to build something small from scratch; 5 give you code that is already broken and ask you to work out why. Set aside about 90 minutes for the whole set, though you can do them in any order.
Nothing here is marked by a person. When you press Submit, the editor checks your code against the points listed under each task and tells you straight away what passed and what didn't (you need a free account to submit). If you get stuck, there are hints, and a worked solution once you've had a go. The first 2 tasks are free; the rest are part of the practice plan.
If it's been a while since you read the chapter, here is how it starts: “HTML form elements are the building blocks that make up a form. These elements allow users to interact with a webpage — typing text, selecting options, uploading files, and submitting data. Each element serves a specific purpose to collect the right type of information.” .
1.Add a dropdownexercise · easy · 10 min
Add a select with two options.
Passes when: Add a select with two options.
2.Add a multi-line fieldexercise · easy · 10 min · practice plan
Add a textarea named message.
Passes when: Add a textarea named message.
3.Group related fieldsexercise · easy · 10 min · practice plan
Wrap two inputs in a fieldset with a legend.
Passes when: Wrap two inputs in a fieldset with a legend.
4.Label a fieldexercise · easy · 10 min · practice plan
Connect a label to an input with for/id.
Passes when: Connect a label to an input with for/id.
5.Group optionsexercise · medium · 10 min · practice plan
Use optgroup to group two options.
Passes when: Use optgroup to group two options.
6.Fix the options outside the selectbug fix · easy · 8 min
Options only work inside a select.
Passes when: Options only work inside a select.
7.Fix the input used for long textbug fix · easy · 8 min · practice plan
A multi-line message needs a textarea.
Passes when: A multi-line message needs a textarea.
8.Fix the missing legendbug fix · easy · 8 min · practice plan
The fieldset has no legend describing it.
Passes when: The fieldset has no legend describing it.
9.Fix the unlinked labelbug fix · easy · 8 min · practice plan
The label's for does not match the input's id.
Passes when: The label's for does not match the input's id.
10.Fix the span used as a labelbug fix · easy · 8 min · practice plan
A span carries no labelling semantics.
Passes when: A span carries no labelling semantics.
Between them these tasks cover select, textarea, fieldset and label.
Looking for a different chapter? See every practice set, or switch to the interview theory questions.