The <input> element is HTML's single most versatile form control — a void element whose behavior changes completely based on its type attribute.
Syntax
<input type="text" name="fieldname" id="fieldname" value="" placeholder="hint">Basic Example
<label for="username">Username</label>
<input type="text" id="username" name="username">Browser output: a single-line text box — its exact appearance and behavior (a checkbox, a date picker, a file chooser) is entirely determined by type. See input-types for the full reference.
How It Works
Whatever value the user enters is sent on submission under the key given by name — <input type="text" name="username"> submits as username=whatever-was-typed. Without a name, an input's value is never sent at all, no matter how it's filled in.
Important Attributes
| Attribute | Purpose |
|---|---|
type | Determines the control's entire behavior — see input-types |
name | The key this field's value is submitted under — required for the value to be sent at all |
id | Connects the field to its <label> |
value | The field's current or default value |
placeholder | Hint text — see placeholder |
required, pattern, min, max | Built-in validation — see form-validation |
Real-World Example
<label for="age">Age</label>
<input type="number" id="age" name="age" min="16" max="99" required>A single, compact tag doing a lot of work — numeric input, a valid range, and mandatory completion, all without a line of JavaScript.
Common Mistakes
- Missing
name, so the field's value is silently dropped from the submitted data - Missing
id/<label for>pairing, making the field harder to identify for screen reader and mouse users alike - Using the wrong
typefor the data — see input-types for the full picture
Best Practices
- Always include
name,id, and a matching<label for> - Choose the most specific
typeavailable for the data being collected
Accessibility Considerations
An <input> without an associated <label> may be entirely unidentifiable to a screen reader user — this is one of the single most common, most damaging form accessibility failures on the web.
SEO Considerations
No direct ranking effect.
Browser & Modern HTML Notes
HTML5 dramatically expanded the number of valid type values — from a handful in HTML4 to over 20 today, each with native browser UI and validation behavior.
Mini Practice
- Build a labeled text input with a correctly matched
id/forpair. - Explain what happens to a field's value on submission if it has no
nameattribute.
