HTML Input Attributes
In this page:
<input type="type" name="name" value="value" placeholder="hint" required>The value and placeholder Attributes
The value attribute sets the default, pre-populated text inside an input field when the page loads.
The placeholder attribute displays a faint, temporary hint inside the field to guide the user on what to type, disappearing as soon as they start entering text.
- Use placeholders to show formatting examples, like '[email protected]' on email fields.
- Accepted attributes:
- value — initial or submitted value
- placeholder — hint text shown while empty
- Placeholder does not replace a label
Example: The value and placeholder Attributes
<input type="text" value="Default text">
<input type="email" placeholder="[email protected]">The readonly and disabled Attributes
The readonly attribute allows users to see and select the text inside a field but prevents them from editing it, still sending the data to the server on submission.
The disabled attribute completely locks the element, graying it out and preventing its data from being submitted.
- Use the readonly attribute to display data (like order numbers) that you want users to copy but not change.
- Accepted attributes:
- readonly — boolean; value is submitted, not editable
- disabled — boolean; not editable, not submitted, not focusable
Example: The readonly and disabled Attributes
<input type="text" value="Order #1234" readonly>
<input type="text" value="Cannot edit" disabled>The required and autofocus Attributes
The required attribute tells the browser that a field must be filled out before the form can be submitted, displaying a native error message if left blank.
The autofocus attribute automatically places the cursor inside a specific field as soon as the page loads.
- Only use autofocus on one single input field per page to keep page navigation smooth.
- Accepted attributes:
- required — boolean; must be filled before submit
- autofocus — boolean; focus on page load (one per page)
Example: The required and autofocus Attributes
<input type="text" required autofocus>Character Limits with minlength and maxlength
The minlength attribute sets the minimum number of characters a user must type in a field, and the maxlength attribute sets the maximum limit, preventing them from entering any characters past that threshold.
- Use maxlength on passcode fields to enforce secure, standard character counts.
- Accepted attributes:
- minlength — non-negative integer
- maxlength — non-negative integer
- Apply to text, search, url, tel, email, password and textarea
Example: Character Limits with minlength and maxlength
<input type="text" minlength="4" maxlength="8">Custom Validation with pattern and title
The pattern attribute allows you to write custom validation rules using Regular Expressions (regex) to check that user inputs match specific formatting structures (like zip codes or phone numbers), while the title attribute displays a custom error tooltip if the validation fails.
- Use pattern attributes to enforce secure, custom input formats without needing complex JavaScript scripts.
- Accepted attributes:
- pattern — regular expression matched against the full value
- title — text explaining the required format
- Applies to text, search, url, tel, email, password
Example: Custom Validation with pattern and title
<input type="text" pattern="[0-9]{5}" title="Enter a 5-digit zip code">- Using placeholders as a replacement for actual label tags, causing web accessibility violations.
- Expecting disabled input fields to submit their data to the server.
- Forgetting to include the hashtag symbol (#) at the start of your hex color inputs.
- Attributes control how input fields behave, what data they accept, and how users interact with them.
- Use placeholder to display formatting hints, required to make fields mandatory, and value to pre-populate default text.
- Use readonly and disabled attributes to restrict inputs, and minlength, maxlength, or pattern to enforce formatting rules.
Standard input attributes are fully supported by all modern and legacy web browsers.
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: