Mark a search region — practice exercise

What you'll be asked to do

1. 1.Mark a search regionexercise · easy · 10 min

   Wrap a search form in the search element.

   Passes when: Wrap a search form in the search element.

2. 2.Use the search input typeexercise · easy · 10 min · practice plan

   Give the field the search type.

   Passes when: Give the field the search type.

3. 3.Label the fieldexercise · easy · 10 min · practice plan

   Tie a label to the search field.

   Passes when: Tie a label to the search field.

4. 4.Add a submit buttonexercise · easy · 10 min · practice plan

   Give the search form a submit button.

   Passes when: Give the search form a submit button.

5. 5.A complete search regionexercise · medium · 10 min · practice plan

   Build a labelled search form with a button.

   Passes when: Build a labelled search form with a button.

6. 6.Fix the div used as a search regionbug fix · easy · 8 min

   Site search is its own landmark.

   Passes when: Site search is its own landmark.

7. 7.Fix the text field used for searchbug fix · easy · 8 min · practice plan

   A search box has its own input type.

   Passes when: A search box has its own input type.

8. 8.Fix the unlabelled search fieldbug fix · easy · 8 min · practice plan

   The field needs a name a screen reader can read.

   Passes when: The field needs a name a screen reader can read.

9. 9.Fix the search with no submitbug fix · easy · 8 min · practice plan

   There is no way to run the search.

   Passes when: There is no way to run the search.

10. 10.Fix the label outside the regionbug fix · easy · 8 min · practice plan

    The label belongs with the field it names.

    Passes when: The label belongs with the field it names.

Between them these tasks cover Search landmark, Forms and Accessibility.

Looking for a different chapter? See every practice set, or switch to the interview theory questions.