Input attributes
Learn attributes like placeholder, required, pattern, min/max and step.
placeholder and required
You shape an <input>'s behaviour with attributes. placeholder shows a hint while the field is empty; it disappears as the user types. It must not replace a label; it only suggests the expected format.
required makes a field mandatory. If left blank, the browser blocks submission and shows a warning. Validation starts in the browser, not on the server; but server-side checks are still always needed.
pattern, min, max and step
For tighter control on numeric and text fields you add more attributes. pattern takes a regular expression; the input value must match it. A postcode might use [0-9]{5}.
On numeric fields min and max set the lower and upper bounds, while step sets the increment. With step="0.01" you can step in cents.
Exercise Write a validated age field
Add an <input type="number"> to the form. Give it name of yas, min of 18, max of 99, step of 1 and the required attribute. Also set placeholder to Your age.
Show example solution
<form>
<input type="number" name="yas" min="18" max="99" step="1" required placeholder="Your age">
</form>Test yourself
-
Which statement is wrong?
- placeholder shows a hint when the field is empty
- required makes a field mandatory
- pattern validates with a regular expression
- placeholder replaces the label
Show answer
placeholder replaces the label — Correct. placeholder does not replace a label; it only gives a hint.
-
Attribute that shows a hint when the field is empty
<input type="text" ____="Your name">Show answer
<input type="text" placeholder="Your name"> -
Match each attribute to its role
- placeholder
- Hint when empty
- required
- Mandatory field
- pattern
- Regex validation
- step
- Increment amount
- min
- Lower bound