Input HarborISSUE #8 of 46

input attributes · required · placeholder · pattern

FormaVSCaptain Invalid Input

Forma saysInput attributes shape behavior: required, placeholder, pattern, min/max, maxlength, readonly, disabled.

Attributes turn a bare input into a smart one. required blocks submission when empty. placeholder shows hint text (not a label!). pattern validates against a regex. maxlength, min/max bound the value. readonly shows but locks a value; disabled locks and excludes it from submission.

These give you real validation and UX for free, before any JavaScript. Combine them — e.g. required pattern="[0-9]{5}" for a US zip code.

Power-ups you unlock

required blocks empty submission · placeholder = hint, not label
pattern="regex" validates the format
min/max/maxlength bound the value
readonly = locked but submitted · disabled = locked and skipped

Captain Invalid Input attacks — common mistakes

Using placeholder as the only label (disappears on type)
Expecting disabled values to be submitted (they are not)
Writing a pattern without anchoring it to the whole value

Boss battleMake a required zip-code input with pattern="[0-9]{5}" and a placeholder. Try submitting "12" and read the browser message.

Example code

<!doctype html>
<html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:sans-serif;padding:20px">
  <form action="#">
    <p><label>zip <input name="zip" required pattern="[0-9]{5}" placeholder="12345" title="5 digits"></label></p>
    <button>submit</button>
  </form>
</body></html>

▶ Open the interactive comic issue

‹ Input Types · Color · Search · Hidden Input Form Attributes · Formaction · Formmethod ›