placeholder, maxlength, readonly and disabled
The placeholder is not a value, readonly is sent, disabled is not. maxlength only limits typing: a script can still set a longer value.
<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
Sent: code=ABC123&nick=
Nickname value is empty? true
maxLength: 10
Script-set value length: 20