HTML Input Attributes
Beyond type, the <input> element accepts a long list of attributes that control validation, behaviour, and presentation.
Common input attributes
| Attribute | Purpose |
|---|---|
name | Key used when the form is submitted. |
value | The current (or default) value. |
placeholder | Hint text shown when the field is empty. |
required | Form won't submit until this field is filled. |
readonly | User can't change the value (but it is still submitted). |
disabled | User can't interact, and the value is not submitted. |
min / max / step | Numeric range for number, range, dates. |
minlength / maxlength | String length limits. |
pattern | A regex the value must match. |
autocomplete | Tells the browser what kind of value it is (email, given-name, cc-number…). |
autofocus | Receive focus when the page loads. |
multiple | Accept multiple values (for email, file). |
Tip: Set
autocomplete for known field types. Browsers and password managers fill faster, and passkey flows work better.Example
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Input Attributes</title>
</head>
<body>
<h1>HTML Input Attributes</h1>
<p>This is a demo page for the "HTML Input Attributes" lesson.</p>
</body>
</html>
Try it Yourself »
Exercise
Make this input required before the form can submit.
<input type="email"
>
A boolean attribute — just its name.
Discussion
Loading…