5.3 — The Input Element: Classic Types
The <input> element is the chameleon of the HTML ecosystem. It is a void element – no closing tag – yet its entire behaviour changes depending on the single attribute type. From a simple text box to a file uploader, a password mask to a hidden data carrier, the input element adapts to dozens of roles.
One element, many faces: the same <input> tag with different type values produces completely different interactive controls.
textpasswordemailurltelnumbersearchfilehidden (invisible)submitresetbuttonText‑Based Input Types
text – The Default Sandbox
The baseline input type accepts a single line of plain text. If you omit the type attribute entirely, the browser defaults to text.
<input type="text" name="username">
password – Masked Security Input
Replaces visible characters with dots or bullets to shield the screen from prying eyes. Warning: the characters are still transmitted as plain text unless the form uses HTTPS POST.
<input type="password" name="passphrase">
email – Automatic Format Validation
The browser checks for an @ symbol and a domain suffix before allowing submission. On mobile, a dedicated email keyboard is shown.
<input type="email" name="corp-email">
url – Web Address Validation
Requires a valid protocol prefix (like https://) to pass validation. The engine actively blocks submission if the format is wrong.
<input type="url" name="website">
tel – Telephone Registry
No strict format validation (phone numbers vary globally), but on mobile it launches a numeric dial pad instead of a full keyboard.
<input type="tel" name="phone">
number – Strict Numeric Filter
Blocks all alphabetical characters. Unlocks three extra attributes: min, max, and step. Fractional steps are allowed (e.g., step="0.5").
<input type="number" name="quantity" min="1" max="100" step="1">
search – Query Field with Clear Button
Behaves like text but adds a native clear (X) button and hooks into accessibility search landmarks.
<input type="search" name="query">
Special Action & Non‑Textual Inputs
hidden – Invisible Data Carrier
No visual output, but its value is submitted with the form. Ideal for session tokens, database IDs, or server‑side keys that users must never see.
<input type="hidden" name="session-id" value="XYZ-909">
(No preview – hidden inputs are invisible.)
file – Local File Bridge
Opens the operating system’s file picker. Use the accept attribute to limit visible files (e.g., accept="application/pdf"). Add multiple to allow several files at once.
<input type="file" name="document" accept=".pdf,.docx">
submit, reset, button – Form Triggers
- submit – fires the form’s action, sending the serialised payload.
- reset – restores all form controls to their default values.
- button – a blank trigger with no default behaviour; used for custom scripting.
<input type="submit" value="Send">
<input type="reset" value="Clear">
<input type="button" value="Do Something">
image – Graphical Coordinate Capture
Uses a src image as the button. When clicked, the browser sends x and y coordinates of the click position along with the form.
<input type="image" src="submit-btn.png" alt="Submit">
Classic Sizing & Data Constraints
Several attributes work across most text‑based input types to control user input before it reaches the server.
placeholder– a dimmed hint that disappears on first keystroke.required– a boolean; prevents submission if the field is empty.disabled– greys out the field; its value is not included in the form payload.readonly– prevents typing, but the value is submitted and the field stays focusable.maxlength/minlength– enforce character count limits.min/max/step– numeric boundaries (fortype="number").
<input type="text" name="code" placeholder="e.g. AB-12" required maxlength="6">
Enterprise Registration Blueprint – A Complete Walkthrough
The following demonstration assembles a realistic registration form with nearly every classic input type, plus hidden fields, constraints, and action buttons. Observe how each piece fits into the larger structure.
<form action="/api/v1/auth/register" method="post" id="registration-engine">
<fieldset>
<legend>Identity and System Registration</legend>
<label for="reg-username">System Username</label>
<input type="text" id="reg-username" name="username"
placeholder="e.g. admin_alpha" minlength="4" maxlength="20" required>
<input type="hidden" name="session_id" value="SESS-2026-XYZ-909">
<label for="reg-passphrase">Access Passphrase</label>
<input type="password" id="reg-passphrase" name="passphrase"
minlength="12" required>
<label for="reg-email">Corporate Email</label>
<input type="email" id="reg-email" name="email_address"
placeholder="security@domain.com" required>
<label for="reg-phone">Direct Routing Integer</label>
<input type="tel" id="reg-phone" name="phone_number"
placeholder="+1-555-0199">
<label for="reg-cores">Core Allocation Units</label>
<input type="number" id="reg-cores" name="core_allocation"
min="2" max="64" step="2" value="4">
<label for="reg-docs">Clearance Certification (PDF only)</label>
<input type="file" id="reg-docs" name="clearance_manifest"
accept="application/pdf" required>
<input type="submit" value="Initialize Authorization Pipeline">
<input type="reset" value="Reset Matrix Boundaries">
</fieldset>
</form>This blueprint uses explicit labels for accessibility, a fieldset to group the registration fields, hidden data for session tracking, and a mix of classic input types with appropriate constraints. It represents a fully professional, production‑ready form shell.
The <input> element is the most versatile tool in the form toolkit. Its type attribute transforms it from a simple text box into a password mask, an email validator, a file picker, a hidden data carrier, or a submission trigger. Combine these types with constraints like required, placeholder, minlength, and maxlength, and you can build precise, validated data‑entry interfaces without a single line of JavaScript.