Every text-like type, and the fallback
type="banana" isn't a real type, so the browser quietly treats it as text. On a phone, tap each box to see a different keyboard.
<input> is one element with many types: text, email, password, search, tel, url and number each look similar but change the keyboard, the checking and what the value means.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Build a small sign-up section with a text input for the name, an email input, a password input with maxlength="64", and a number input for age. Give each a name.
Add a readonly input that shows a referral code HECTAL10 and check with FormData that it is sent.
Explain it without notes
What changes when you switch an input from type="text" to type="email"?
Why is a placeholder not a replacement for a label?
Explain the difference between readonly and disabled.
Why does a number input's .value give "3" and how do you get the number?
Preview
Console
Nothing logged yet.Expected console output
full is type text
email is type email
pw is type password
q is type search
phone is type tel
site is type url
qty is type number
mood is type text
string 3 3
value + 1 = 31 but valueAsNumber + 1 = 4