HTML Input Attributes

Input types picked the control face with type. Input attributes stay on the same input tag but refine behavior: hints, required checks, ranges, length caps, patterns, and locked fields. This lesson is an attribute catalog for everyday helpers — not a second type map, and not the later form="id" association trick.

Why input attributes matter

A correct type still leaves gaps: empty required fields, ages outside a sensible range, codes that are too long, and fields that should not be edited. Attributes fill those gaps with browser-side hints and light checks. Treat them as rules and helpers on the field — you still validate important data on the server in real apps.

Direct answer

1) Keep name, id, and value for wiring labels and submitted data.
2) Use placeholder for short hint text inside an empty field — never as a substitute for label.
3) Mark must-fill fields with required.
4) Constrain numbers/dates with min, max, and step; cap text with maxlength; optionally guide format with pattern.
5) readonly shows a value the user cannot edit (still submitted); disabled blocks use and usually skips submit.
6) Attributes refine a chosen type — they do not replace choosing type, and they are separate from the next lesson’s form association attribute.

Profile: required, hints, and length

Build a small profile form: full name required with a placeholder, a short username with maxlength and a simple pattern, and an optional bio-style short note. Labels stay mandatory; attributes only add rules and hints.

Reading the profile demo

• required on name and username blocks empty submit in supporting browsers
• placeholder only shows while the field is empty — the visible name still comes from label
• maxlength="12" stops typing past twelve characters on username
• pattern="[A-Za-z0-9_]+" hints letters, digits, and underscore only
• Optional city has neither required nor a hard pattern
• type="text" was already chosen; attributes refine that text field

Booking: ranges and locked fields

Number and date types gain meaning with min, max, and step. A readonly confirmation code stays visible and can still submit; a disabled promo field cannot be changed and is usually omitted from the payload.

Reading the booking demo

• min / max / step bound the guests number and the calendar night
• value="2" is a starting guests count the user can change
• readonly on the booking code keeps it visible and typically included on submit
• disabled on promo blocks editing and usually drops the field from submit
• Date limits only make sense because type="date" was already set
• Next lesson covers associating an input with a form by form="id" — a different attribute job

Choosing the right helpers

• Must fill: required
• Short empty-state hint: placeholder (+ a real label)
• Numeric or date bounds: min, max, step on matching types
• Character cap: maxlength on text-like fields
• Simple format guide: pattern (keep it readable)
• Show but do not edit; still send: readonly
• Block use; usually do not send: disabled
• Wiring keys: name, id, value — still required for labels and payloads
• Do not re-pick type here — that was the previous lesson

Practice — tighten fields with attributes

1. Copy the profile demo; remove required from username and try submitting empty — then put required back.
2. Replace the name placeholder with nothing and notice how hard the empty field is without a hint (keep the label).
3. Raise maxlength on username to 20 and type a long handle.
4. In the booking demo, set guests below min or above max and try submit.
5. Change the booking code from readonly to editable, then restore readonly.
6. Compare submit expectations: readonly code vs disabled promo — which name should appear?
7. Write one sentence: attributes refine behavior; type chose the face; form="id" association is next.

Easy mistakes

• Using placeholder instead of a visible label
• Disabling a field whose value must still be submitted
• Treating browser required / pattern as full security — always check on the server for real apps
• Putting min/max on types that ignore them
• Over-complex pattern expressions that confuse beginners
• Confusing this attribute catalog with the previous type catalog
• Jumping ahead to form="id" association when you only need required or ranges

Summary

• Attributes refine input behavior after type is chosen
• Everyday tools: required, placeholder, ranges, maxlength, simple pattern
• readonly still submits; disabled usually does not
• Placeholders hint — labels name
• Keep name / id / value for wiring
• Next: input form attributes — associate a control with a form by id