HTML Input Attributes

Constraints live on the control

type picks the widget. Other attributes decide whether the field may be empty, what hint appears inside it, which numbers are legal, how long the text may be, and whether a pattern must match. The browser checks these on submit unless the form has novalidate.

Constraints help. They are not a server. Anyone can send a request that skips your HTML. Still write them: they catch honest mistakes before a round trip and they document what you meant.

required, placeholder, and value

required blocks submit while the field is empty. placeholder is a grey hint inside the box. It disappears when the user types. It is not a label — keep the<label>. value is the starting content for an input (and the submitted content until the user changes it).

<form action="#" method="get">
  <label for="name">Name</label>
  <input id="name" name="name" type="text" required placeholder="Ada Lovelace">

  <label for="city">City</label>
  <input id="city" name="city" type="text" value="Lisbon">

  <button type="submit">Send</button>
</form>

Placeholders vanish, so do not put essential instructions only there. “Ada Lovelace” is an example of a shape. “Name” belongs on the label. A value is real data — useful for edit forms and defaults such as today’s city.

min, max, step, and maxlength

Number, range, and date fields understand min, max, and step. Text-like fields understand maxlength (and minlength) as a character count. Mix them up and the extra attribute is ignored.

<form action="#" method="get">
  <label for="loaves">Loaves (1 to 12)</label>
  <input id="loaves" name="loaves" type="number" min="1" max="12" step="1" value="1">

  <label for="pickup">Pickup (this month)</label>
  <input id="pickup" name="pickup" type="date" min="2026-08-01" max="2026-08-31">

  <label for="code">Table code (4 characters)</label>
  <input id="code" name="code" type="text" maxlength="4">

  <button type="submit">Reserve</button>
</form>

• min / max — lowest and highest legal value.
• step — the gap between values. 1 means integers. 0.5 allows halves. any allows any number.
• maxlength — the browser stops extra keystrokes. It does not replace required.

pattern

pattern is a regular expression the whole value must match. It applies to text-like types (text, email, password, and similar), not to numberor date. Give a title that explains the rule — browsers often show that text in the validation bubble.

<form action="#" method="get">
  <label for="code">Table code</label>
  <input
    id="code"
    name="code"
    type="text"
    required
    pattern="[A-Z]{2}[0-9]{2}"
    title="Two capital letters then two digits, for example AB12"
    placeholder="AB12"
  >
  <button type="submit">Find table</button>
</form>

The pattern in the example means two capital letters followed by two digits. Keep patterns short. If the rule is a paragraph, validate on the server (and in JavaScript) instead of stuffing a novel into the attribute.

disabled and readonly

Both stop editing. They are not the same on submit.

<form action="#" method="get">
  <label for="order">Order id</label>
  <input id="order" name="order" type="text" value="EG-1042" readonly>

  <label for="coupon">Coupon</label>
  <input id="coupon" name="coupon" type="text" value="CLOSED" disabled>

  <button type="submit">Pay</button>
</form>

The order id is sent. The coupon is not. If you need a disabled-looking field to submit, keep itreadonly, or add a type="hidden" input with the same value.

Stacking attributes

Attributes combine. A quantity field that must be filled, starts at 2, and stays in range looks like this in prose: required, type number, min 1, max 12, step 1, value 2. Put the label first, then the input, then the button.

• required — must have a value.
• placeholder — hint only; disappears on input.
• min / max / step — numeric and date ranges.
• maxlength — character cap on text-like fields.
• pattern — whole-value regular expression.
• disabled / readonly — cannot edit; only readonly submits.
• value — starting (and submitted) content for input.

What to remember

• required and pattern run on submit. placeholder is a hint, not a label.
• min, max, and step belong on numbers, ranges, and dates. maxlength belongs on text.
• readonly submits. disabled does not. value is the starting content.
• HTML checks are for people filling the form. A server must still check the data it receives.

Next: canvas — a drawing surface you paint with JavaScript, not with form fields.