A text field — practice exercise

What you'll be asked to do

1. 1.A text fieldexercise · easy · 10 min

   Add a text input named username.

   Passes when: Add a text input named username.

2. 2.An email fieldexercise · easy · 10 min · practice plan

   Add an email input so the browser validates the format.

   Passes when: Add an email input so the browser validates the format.

3. 3.Make it requiredexercise · easy · 10 min · practice plan

   Mark the field as required.

   Passes when: Mark the field as required.

4. 4.Add a placeholderexercise · easy · 10 min · practice plan

   Show a hint inside the field.

   Passes when: Show a hint inside the field.

5. 5.A checkbox with a labelexercise · medium · 10 min · practice plan

   Add a checkbox tied to a label.

   Passes when: Add a checkbox tied to a label.

6. 6.Fix the missing typebug fix · easy · 8 min

   The field should say what kind of value it takes.

   Passes when: The field should say what kind of value it takes.

7. 7.Fix the email field typed as textbug fix · easy · 8 min · practice plan

   An email address has its own input type.

   Passes when: An email address has its own input type.

8. 8.Fix the required field that is optionalbug fix · easy · 8 min · practice plan

   The field is meant to be mandatory.

   Passes when: The field is meant to be mandatory.

9. 9.Fix the hint in the wrong attributebug fix · easy · 8 min · practice plan

   In-field hints use placeholder.

   Passes when: In-field hints use placeholder.

10. 10.Fix the label not tied to the boxbug fix · easy · 8 min · practice plan

    The label's for must match the input's id.

    Passes when: The label's for must match the input's id.

Between them these tasks cover Input types, required and placeholder.

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