Forms & User Input›Extra· 35 min read

Input Attributes & Validation

Fine-tune your fields — placeholders, defaults, read-only, limits — and catch mistakes before the form is sent.

What you will learn

Use input attributes: placeholder, value, readonly, disabled, autofocus
Validate with required, minlength, maxlength, min, max and pattern
Understand what HTML validation can and cannot do

Useful input attributes

Attribute	Effect
`placeholder`	Faint hint text inside an empty field
`value`	A default starting value
`readonly`	Visible but cannot be edited
`disabled`	Greyed out and not submitted
`autofocus`	Cursor starts here when the page loads
`maxlength`	Maximum number of characters

value, readonly, autofocus, placeholder, maxlength

<form>
  <label>Name <input type="text" name="name" value="Asha" autofocus></label><br><br>
  <label>Country <input type="text" name="country" value="India" readonly></label><br><br>
  <label>Coupon <input type="text" name="coupon" placeholder="optional" maxlength="10"></label>
</form>

Live preview

Each attribute tweaks the field: value="Asha" pre-fills the Name box, autofocus puts the cursor there on load, value="India" plus readonly shows India but blocks editing, and placeholder plus maxlength="10" give the Coupon box a hint and a 10-character limit.

Note: Output: Name starts filled with “Asha” and focused; Country shows “India” greyed/locked; Coupon is empty with the hint “optional” and stops accepting input after 10 characters.

Built-in validation

Browsers can check fields for you — no JavaScript needed. Just add attributes.

How browser validation works on submit:

The visitor clicks Submit.
The browser checks every field against its rules (required, minlength, min/max, pattern, and so on).
If any field breaks a rule, the browser stops the submit and shows a message on the first bad field.
Only when all fields pass does the form actually send.

Try submitting with bad values

<form>
  <label>Username (3-10 letters)
    <input type="text" name="user" required minlength="3" maxlength="10">
  </label><br><br>
  <label>Age (18+)
    <input type="number" name="age" min="18" max="99" required>
  </label><br><br>
  <label>PIN code (6 digits)
    <input type="text" name="pin" pattern="[0-9]{6}" required>
  </label><br><br>
  <button type="submit">Submit</button>
</form>

Live preview

Each field carries its own rules: Username must be present and 3–10 characters (required minlength="3" maxlength="10"); Age must be a number from 18 to 99 (min="18" max="99"); and PIN must match pattern="[0-9]{6}" — exactly six digits. Try submitting bad values and the browser blocks it with a hint, all before any data leaves the page.

Note: Output: Submitting a 2-letter username, an age of 10, or a 4-digit PIN each triggers a browser warning on that field and stops the form.

Note: The pattern="[0-9]{6}" means “exactly six digits 0–9”. That is a regular expression — you will meet these again in JavaScript and other languages.

Watch out: HTML validation improves the experience, but a clever user can bypass it. The back-end (Laravel, Node, etc.) must always validate again. Never trust the browser alone for important data.

Q. Which attribute forces a field to be filled before submitting?

Answer: required marks a field as compulsory; the browser blocks submission until it is filled.

✍️ Practice

Make a form with a pre-filled value, a readonly field, and an autofocus field.
Add required, minlength, maxlength and a 6-digit pattern, then test the warnings.

🏠 Homework

Take an earlier sign-up form and add sensible attributes and validation to every field.