HTML Input Attributes
In this page:
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.
Note: Use placeholders to show formatting examples, like '[email protected]' on email fields.
Warning: Never use placeholders as a replacement for actual label elements, as screen readers may skip them.
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.
Note: Use the readonly attribute to display data (like order numbers) that you want users to copy but not change.
Warning: Disabled input fields are completely ignored during form submission, so their data is not sent to the server.
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.
Note: Only use autofocus on one single input field per page to keep page navigation smooth.
Warning: Applying autofocus to fields located lower on the page can cause the browser to jump past your header content on load.
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.
Note: Use maxlength on passcode fields to enforce secure, standard character counts.
Warning: Ensure your character limits align with your database settings to prevent data truncation errors.
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.
Note: Use pattern attributes to enforce secure, custom input formats without needing complex JavaScript scripts.
Warning: Always write clear title tooltips to explain what formatting errors caused the validation to fail.
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: