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

Next lesson: Autocomplete and inputmode

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies