Lesson 7 of 8
The right type for each field
- 10 min
- 5 checks
- 3 hints
- Go to task
Goal
Bring up the right keyboard
Explanation
On a phone, a field's attributes decide which keyboard the user gets and what autofill suggests, and a well-configured field saves them half the typing.
type="tel" opens the phone keypad, and type="email" opens a keyboard with @ on it and checks the email format without any code from you. autocomplete tells the browser what kind of data the field holds, such as tel and email, or one-time-code, which makes the phone suggest the verification code from a text message right away.
A common mistake is using type="number" for a code or a phone number. A number you never add or subtract isn't a good fit for number: it adds up and down arrows, ignores maxlength, and the mouse wheel can change its value. The alternative is inputmode="numeric", but it only changes the keyboard and validates nothing, so pair it with a pattern.
Your task
Make #phone a phone field and #email an email field, turn #otp into a text field that brings up the number keypad and accepts only six digits, and give each field the right autocomplete value.
Checks
5 checks- The phone field opens the phone keypad
- The email field opens the email keyboard
- The code field is a text field with a number keypad, not type="number"
- The code accepts only six digits
- Each field has the right autocomplete value