Beyond type, <input> supports a wide set of attributes that control validation, defaults, and behavior — placeholder, required, disabled, pattern, min/max, and more.

Syntax

<input type="text" placeholder="Enter name" required minlength="2" maxlength="50">

Deep Dive Course

Common `<input>` attributes include: **`placeholder`** (grey hint text, gone once typing starts), **`required`** (blocks submission if empty), **`disabled`** (not editable and not submitted at all), **`readonly`** (visible and submitted, but not editable by the user), **`min`**/**`max`** (numeric or date range limits), **`minlength`**/**`maxlength`** (text length limits), **`pattern`** (a regular expression the value must match), and **`autofocus`** (focuses the field automatically on page load).

1Understanding INPUT Attributes

Common <input> attributes include: `placeholder` (grey hint text, gone once typing starts), `required` (blocks submission if empty), `disabled` (not editable and not submitted at all), `readonly` (visible and submitted, but not editable by the user), `min`/`max` (numeric or date range limits), `minlength`/`maxlength` (text length limits), `pattern` (a regular expression the value must match), and `autofocus` (focuses the field automatically on page load).

💡

disabled and readonly are easy to confuse: a disabled field is skipped entirely and its value is NOT submitted with the form, while a readonly field's value IS still submitted — it just can't be edited by the user.

editor.html

<input type="text" name="promo" value="WELCOME10" readonly>
<input type="text" name="notes" disabled>

localhost:3000

2Practical Example

Here is a real-world application of INPUT Attributes showing how it is used in production HTML.

editor.html

<!-- Pattern validation: exactly 5 digits -->
<input type="text" name="zip" pattern="[0-9]{5}" title="5-digit ZIP code" required>

localhost:3000

3Best Practices

Follow these guidelines when working with INPUT Attributes:

1. Use required, pattern, min/max, minlength/maxlength for built-in validation before reaching for JavaScript

2. Choose readonly (not disabled) when a value should still be submitted but not editable, like a pre-filled reference number

3. Use autofocus sparingly — automatically stealing focus can be disorienting, especially on forms with multiple fields

⚠️

Tip: disabled and readonly are easy to confuse: a disabled field is skipped entirely and its value is NOT submitted with the form, while a readonly field's value IS still submitted — it just can't be edited by the user.

editor.html

<input type="text" name="promo" value="WELCOME10" readonly>
<input type="text" name="notes" disabled>

localhost:3000

Examples

Example 01Basic Usage

<input type="text" name="promo" value="WELCOME10" readonly>
<input type="text" name="notes" disabled>

Example 02Advanced Example

<!-- Pattern validation: exactly 5 digits -->
<input type="text" name="zip" pattern="[0-9]{5}" title="5-digit ZIP code" required>

Best Practices

Use required, pattern, min/max, minlength/maxlength for built-in validation before reaching for JavaScript
Choose readonly (not disabled) when a value should still be submitted but not editable, like a pre-filled reference number
Use autofocus sparingly — automatically stealing focus can be disorienting, especially on forms with multiple fields

Interview Question

What's the practical difference between the disabled and readonly attributes on an <input>?▼

Hint: Think specifically about whether each one's value ends up in the submitted form data.

Both prevent the user from editing the field, but disabled goes further: a disabled input is entirely excluded from the form's submitted data, as if it didn't exist. A readonly input's value IS still submitted along with the rest of the form — the user just can't change it. Use readonly when you need a fixed value to travel with the submission (like a reference code), and disabled when a field should be both uneditable and entirely absent from what gets sent.

Exercises

EasyPractice using INPUT Attributes in a real scenario.

View Solution

<input type="text" name="promo" value="WELCOME10" readonly>
<input type="text" name="notes" disabled>

Frequently Asked Questions

What's the practical difference between the disabled and readonly attributes on an <input>?▼

Related Functions

input-tagINPUT Types