Input types

The type attribute on <input> chooses the native control and validation hints. Specialized types activate better mobile keyboards and basic client-side checks—but the server must always validate again.

Every HTML input type (quick map)

text (default)

General single-line string; no format validation.

search

Same as text semantically “search”; browsers may style or clear differently.

email

Must contain one email-shaped address unless multiple is set.

url

Must parse as absolute URL once the user agent prefixes http:// for validation checks.

tel

Telephone digits; validity is lax—patterns + server rules carry real correctness.

password

Masks characters; autocomplete tokens help managers.

number

Numeric value; honours min, max, step; poor choice for PINs/zips/card numbers (scientific notation, spinner UX).

range

Slider selecting from stepped numeric range.

date, time, datetime-local, month, week

Temporal pickers; UI and precision differ by browser—test Safari.

color

Produces a lowercase hex colour value like #0d9488.

checkbox

Independent on/off per control; duplicates with shared name mimic multi-select.

radio

One selected per equal name group.

file

Binary upload; pair with form enctype="multipart/form-data".

hidden

Not shown; carries tokens—users can tamper in DevTools.

submit, reset, button, image

Behaviour controls; prefer <button> for richer content unless legacy forms require inputs.

Example — textual types (text, search, email, url, tel, password)

<label>Nickname <input type="text" name="nick" maxlength="40"></label>
<label>Site search <input type="search" name="q" autocomplete="off"></label>
<label>Email <input type="email" name="email" autocomplete="email" required></label>
<label>Website <input type="url" name="site" placeholder="https://"></label>
<label>Phone <input type="tel" name="phone" inputmode="tel" autocomplete="tel"></label>
<label>Password <input type="password" name="pw" autocomplete="current-password"></label>

Rendered output — note keyboards on mobile differ per type

tel does not strictly validate international formats—use pattern, libraries, or server checks for NANP/E.164 policies.

Example — number and range

<label>Port <input type="number" name="port" min="1" max="65535" step="1"></label>
<label>Opacity <input type="range" name="opacity" min="0" max="100" step="5" value="80"></label>

Rendered output

When number is the wrong tool: credit-card numbers, postal codes with leading zeros, ticket IDs—you often want type="text" with inputmode="numeric" plus server validation.

Example — temporal types (date, time, datetime-local, month, week)

<input type="date" name="ship_date">
<input type="time" name="slot" step="900">
<input type="datetime-local" name="start">
<input type="month" name="billing_cycle">
<input type="week" name="sprint">

Rendered output — appearance differs by OS/browser

Older Safari versions once lacked some pickers—keep printable ISO strings or textual fallbacks where revenue depends on precise scheduling.

Example — color

<label>Accent <input type="color" name="accent" value="#0d9488"></label>

Rendered output

Example — checkbox and radio

<fieldset><legend>Alerts</legend>
  <label><input type="checkbox" name="alert" value="email"> Email</label>
  <label><input type="checkbox" name="alert" value="sms"> SMS</label>
</fieldset>
<fieldset><legend>Tier</legend>
  <label><input type="radio" name="tier" value="free"> Free</label>
  <label><input type="radio" name="tier" value="pro" checked> Pro</label>
</fieldset>

Rendered output

Example — file

<form method="post" enctype="multipart/form-data">
  <label>Résumé (PDF)<input type="file" name="resume" accept="application/pdf"></label>
</form>

Rendered output — opens OS picker; nothing uploads from this lesson

hidden, submit, reset, button, image

<!-- Hidden: opaque to users — never trust contents -->
<input type="hidden" name="csrf_token" value="opaque-value">

<!-- Button-like inputs; usually prefer real <button> -->
<input type="submit" value="Continue">
<input type="reset" value="Clear">
<input type="button" value="Runs script only">
<input type="image" src="/send.svg" alt="Send form">

No rendered playground for hidden (by design). type="image" submits x/y click coords—mostly legacy.

Common constraints (combine with native types)

• required: must have value before implicit submit constraint validation fires.
• min / max / step: constrain numbers and most temporal inputs.
• pattern: regex over the string contents—pair with readable error hints.
• multiple on email or file: allows several addresses or blobs.
• readonly vs disabled: readonly still submits; disabled does not.

Mobile keyboards recap

Add inputmode="numeric" / decimal / tel when type="text" is correct for semantics but you still want a numeric keypad—for OTP boxes, invoices, SKU codes.

Malicious uploads & hidden tampering

• Virus-scan and size-cap every upload; strip metadata if policy demands.
• Rebuild trust on the server—never elevate users based solely on hidden “role=paid” fields.

Important interview questions and answers

1. Q: Why are native form controls preferred over custom div-based widgets?
   A: They provide built-in semantics, keyboard support, validation hooks, and accessibility behavior.
2. Q: What does `name` do on form fields?
   A: It determines the key sent in form submission payloads; without `name`, values are typically not submitted.
3. Q: When should you use `type="button"` instead of default buttons in forms?
   A: Use `type="button"` for non-submit actions to avoid accidental form submission.

Tip: Use type="email" and type="url" for mobile keyboards and validation hints.