HTML Input Attributes

Value, Placeholder, and Name Attributes

The value attribute sets the initial value of an input field or the data sent when a button/checkbox/radio is selected.

The placeholder attribute displays hint text inside the input field that disappears when the user starts typing.

The name attribute is essential - it identifies the field's data when submitted to the server.

Without a name attribute, the field's data will not be submitted with the form.

<!-- Value sets initial/default content -->
<input type="text" name="country" value="United States">

<!-- Placeholder provides a hint -->
<input type="email" name="email" placeholder="Enter your email">

<!-- Name identifies the data -->
<input type="text" name="username">
<input type="password" name="password">
<!-- Submits as: username=user&password=pass -->

<!-- Radio with value -->
<input type="radio" name="size" value="large"> Large
<!-- Submits as: size=large -->

Required and Readonly Attributes

The required attribute makes a field mandatory - the form cannot be submitted until it's filled.

Browser validation prevents submission and shows an error message for empty required fields.

The readonly attribute makes a field read-only - users can see the value but cannot modify it.

Readonly fields are still submitted with the form, unlike disabled fields.

The disabled attribute completely disables a field - it cannot be edited or submitted.

<!-- Required field (must be filled) -->
<input type="text" name="username" required>
<input type="email" name="email" required>

<!-- Read-only field (cannot edit, but submits) -->
<input type="text" name="user_id" value="12345" readonly>

<!-- Disabled field (cannot edit, does NOT submit) -->
<input type="text" name="old_value" value="Deprecated" disabled>

<!-- Required checkbox -->
<label>
  <input type="checkbox" name="terms" required>
  I agree to the terms (required)
</label>

Min, Max, and Step Attributes

The min attribute sets the minimum allowed value for number, date, and range inputs.

The max attribute sets the maximum allowed value.

The step attribute specifies the legal number intervals (e.g., step="2" allows only even numbers).

These attributes enable browser validation and affect the behavior of spinner controls.

Use step="any" to allow any decimal value without constraints.

<!-- Number with min and max -->
<label for="age">Age (18-100):</label>
<input type="number" id="age" name="age" min="18" max="100" required>

<!-- Number with step (increments by 5) -->
<label for="quantity">Quantity (multiples of 5):</label>
<input type="number" id="quantity" name="quantity" min="0" max="100" step="5" value="10">

<!-- Price with decimal step -->
<label for="price">Price:</label>
<input type="number" id="price" name="price" min="0" step="0.01" value="9.99">

<!-- Date range -->
<label for="appointment">Appointment (next 30 days):</label>
<input type="date" id="appointment" name="appointment" 
       min="2025-01-01" max="2025-12-31">

Maxlength and Size Attributes

The maxlength attribute limits the maximum number of characters that can be entered.

Browser prevents typing more characters once the limit is reached.

The minlength attribute sets the minimum number of characters required.

The size attribute sets the visible width of the input field in characters (CSS width is preferred).

Maxlength works for text, password, email, search, tel, and url input types.

<!-- Limit input length -->
<label for="username">Username (3-15 chars):</label>
<input type="text" id="username" name="username" 
       minlength="3" maxlength="15" required>

<!-- Phone number with max length -->
<label for="phone">Phone (10 digits):</label>
<input type="tel" id="phone" name="phone" 
       maxlength="10" pattern="[0-9]{10}">

<!-- Size attribute (visible width) -->
<label for="code">Code:</label>
<input type="text" id="code" name="code" size="6" maxlength="6">

Pattern Attribute

The pattern attribute specifies a regular expression that the input value must match.

Provides custom validation beyond the built-in types.

The title attribute should describe the expected pattern to help users.

Pattern validation occurs when the form is submitted.

Works with text, tel, email, url, password, and search input types.

<!-- ZIP code pattern (5 digits) -->
<label for="zip">ZIP Code:</label>
<input type="text" id="zip" name="zip" 
       pattern="[0-9]{5}" 
       title="Five digit ZIP code" required>

<!-- Phone pattern (xxx-xxx-xxxx) -->
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" 
       pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" 
       placeholder="123-456-7890"
       title="Format: 123-456-7890">

<!-- Username pattern (letters and numbers only) -->
<label for="username">Username:</label>
<input type="text" id="username" name="username" 
       pattern="[A-Za-z0-9]+" 
       title="Letters and numbers only">

Autocomplete Attribute

The autocomplete attribute controls whether the browser should autofill the field.

Values include 'on' (enable autocomplete), 'off' (disable), or specific autofill hints.

Specific hints include: name, email, username, current-password, new-password, street-address, tel, etc.

Browsers use autocomplete hints to fill forms intelligently based on saved user data.

Disabling autocomplete improves security for sensitive fields but may reduce convenience.

<!-- Enable autocomplete -->
<input type="text" name="name" autocomplete="name">

<!-- Disable autocomplete -->
<input type="password" name="password" autocomplete="off">

<!-- Specific autocomplete hints -->
<input type="email" name="email" autocomplete="email">
<input type="tel" name="phone" autocomplete="tel">
<input type="text" name="address" autocomplete="street-address">

<!-- New password (don't suggest old passwords) -->
<input type="password" name="new_password" autocomplete="new-password">

Other Useful Attributes

The autofocus attribute automatically focuses the input when the page loads (use sparingly).

The multiple attribute allows multiple values in email and file inputs.

The accept attribute restricts file types for file inputs.

The list attribute links to a <datalist> for autocomplete suggestions.

The form attribute associates an input with a form by id, even if the input is outside the form element.

<!-- Auto-focus first field -->
<input type="text" name="search" autofocus placeholder="Search...">

<!-- Multiple files -->
<input type="file" name="photos" multiple accept="image/*">

<!-- Multiple emails -->
<input type="email" name="recipients" multiple>

<!-- Link to datalist -->
<input type="text" name="browser" list="browsers">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
</datalist>

<!-- Input outside form (linked by form id) -->
<form id="myForm" action="/submit"></form>
<input type="text" name="field" form="myForm">