HTML — Input Attributes

Friendly Intro (what & why)

When you create a form, you don’t just decide what type of field it is— you also decide how it behaves.
Input attributes let you set the field’s default text, make it mandatory, or limit its length.
They also help the browser understand the data you expect, improving both usability and validation.

Common Input Attributes

Textual and Initial Value

<label for="first">First name:</label>
<input type="text" id="first" name="first" placeholder="Your first name">

What the browser displays

A single-line text box with the gray hint “Your first name” inside it.

Value and Default

The value attribute sets what the field shows when the page loads.

<input type="text" value="John Doe">

What the browser displays

The text box already contains “John Doe” when the page opens.

Identification Attributes

Every input usually needs an id and a name.

<input type="email" id="user-email" name="email">

What the browser displays

A empty email field; the id ties the label, the name is used when submitting.

UI Behavior Attributes

These attributes change how the field feels to the user.

autofocus

When the page loads, the cursor jumps straight to this field.

<input type="text" autofocus>

What the browser displays

The field is automatically focused; the cursor is blinking inside it.

readonly

Shows data that the user can read but not edit.

<input type="text" value="Read only" readonly>

What the browser displays

The value “Read only” is visible but cannot be changed.

disabled

The field is grayed out and ignored when the form is submitted.

<input type="text" value="Disabled" disabled>

What the browser displays

A gray input that cannot be focused or typed into.

autocomplete

Helps the browser fill in the field based on past entries.

<input type="password" autocomplete="current-password">

What the browser displays

When you type, the browser may offer saved passwords.

Validation Attributes

These attributes let the browser check the data before you send it.

required

The form won’t submit unless this field is filled.

<input type="tel" required>

What the browser displays

If left empty, the browser shows a message like “Please fill out this field.”

minlength / maxlength

Control how many characters the user can type.

<input type="text" minlength="3" maxlength="10">

What the browser displays

You can type 3 to 10 characters; trying to paste more than 10 is truncated.

pattern

Use a regular expression to enforce a specific format.

<input type="text" pattern="[A-Za-z]{3,}">

What the browser displays

The browser will reject values that don’t match the pattern when you try to submit.

min / max / step

Numeric fields can have ranges and increments.

<input type="number" min="1" max="10" step="2">

What the browser displays

The up/down arrows jump by 2, and values outside 1‑10 are rejected.

Size Attribute

Controls the visible width of a text field.

<input type="text" size="30">

What the browser displays

A text box that is 30 characters wide, regardless of content.

List Attribute

Links an input to a datalist for suggestions.

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
</datalist>

What the browser displays

As you type, the browser shows a dropdown with the listed options.

Table of Common Attributes

Attribute	Purpose	Typical Value
placeholder	Hint text	"Enter name"
value	Default content	"John"
required	Must be filled	true
minlength	Minimum chars	3
maxlength	Maximum chars	10
pattern	Regex rule	"[A-Za-z]+"
autocomplete	Browser suggestions	"email"
readonly	View only	true
disabled	Ignore input	true
autofocus	Auto focus	true

Blockquote Tip

Good to know: The required attribute works only with form‑submittable inputs (e.g., <input>, <textarea>). It won’t block a form if the field is hidden with CSS.
Common mistake: Forgetting that readonly still submits the value. If you don’t want the value sent, use disabled instead.

Common mistakes checklist

• Using required on a hidden field that the user can’t see.
• Setting maxlength but forgetting to test with long inputs.
• Using readonly when you actually want to prevent submission.
• Forgetting to include a name attribute— the data won’t be sent.
• Mixing min and max values that conflict with step.

Mini Practice

1. Create a text input that is required, has a placeholder, and limits input to 5‑15 characters.
2. Make a password field that is required, uses autocomplete="new-password", and is readonly after the user types anything.
3. Build a number input that only accepts values 0‑100 in increments of 5, and show a tooltip when the value is out of range.
4. Add a datalist of three favorite fruits to a text input and make it readonly if the user chooses one.
5. Verify that a disabled input is not included in the form data when you submit.

That's all for Input Attributes. Next, we'll explore Input Form Attributes.

How Attributes Interact

Some attributes affect each other. For example, if a field is disabled, the browser ignores required.
If you set both min and required on a number, the field still must be filled, but the value must also respect the range.
The readonly attribute still submits data, so if you need to keep the value hidden, pair it with hidden or use a separate hidden input.
The autocomplete attribute can be overridden by the browser’s stored data unless you set it to off.
When using list, the browser may still allow free typing unless you also set required.

Here’s a quick checklist of interactions:

Attribute	Interaction
disabled	disables required, pattern, min/max
readonly	still submits, ignores autocomplete
required + pattern	both must pass
min/max + step	step must fit within range

Remember to test the form in multiple browsers— they may implement some attributes slightly differently.