HTML Input Attributes
Input attributes control how each individual form field behaves — what it accepts, how it looks, and whether the user must fill it in. This topic covers every commonly used input attribute with clear examples and diagrams.
The name Attribute
The name attribute identifies the input field when the form is submitted. The server receives the data as name-value pairs. Without a name attribute, the input's value is not included in the submitted data.
<input type="text" name="username"> Submitted as: username=Alice
The id Attribute
The id attribute gives an input a unique identifier on the page. It is used to connect the input to its <label> tag and to target the input with JavaScript or CSS.
<label for="email">Email:</label> <input type="email" id="email" name="email">
The for attribute on the label must match the id on the input. This connection lets users click the label text to focus the input — important for accessibility and usability.
The value Attribute
The value attribute sets the initial value of an input field. The user can change it, but the field starts with this content already filled in.
<input type="text" name="city" value="Delhi">
For buttons, value sets the button's label text:
<input type="submit" value="Send Message">
The placeholder Attribute
The placeholder text appears inside the field as a hint when the field is empty. It disappears the moment the user starts typing.
<input type="email" name="email" placeholder="you@example.com">
Visual Diagram — placeholder vs value
placeholder (hint text, disappears when typing): +---------------------------+ | you@example.com | ← gray hint text visible +---------------------------+ value (pre-filled content, user must delete it): +---------------------------+ | Delhi | ← black editable text +---------------------------+
The required Attribute
The required attribute makes a field mandatory. The browser blocks form submission and shows an error message if the field is empty.
<input type="text" name="username" required> <input type="email" name="email" required>
This is a boolean attribute — simply writing required enables it. You do not need to write required="required", though both work.
The disabled Attribute
The disabled attribute prevents users from interacting with the field. The field appears grayed out. Disabled fields are not included in form submissions.
<input type="text" name="referral" value="PROMO10" disabled>
The readonly Attribute
The readonly attribute lets users see the field content but not change it. Unlike disabled, readonly fields are still included in form submissions.
<input type="text" name="userid" value="USR-00442" readonly>
Visual Diagram — disabled vs readonly
disabled: +------------------------+ | PROMO10 | ← grayed out, cannot click, NOT submitted +------------------------+ readonly: +------------------------+ | USR-00442 | ← looks normal, cannot edit, IS submitted +------------------------+
The type Attribute
The type attribute is the most important input attribute. It controls what kind of data the input accepts and how it looks.
type="text" → single-line text field type="email" → email address (validates format) type="password" → hides characters with dots type="number" → number with up/down arrows type="tel" → phone number type="url" → web address type="date" → date picker type="time" → time picker type="checkbox" → tick box type="radio" → one-choice button type="file" → file upload browser type="hidden" → invisible field (data submitted but not shown) type="submit" → submit button type="reset" → clears all fields type="button" → custom button (does nothing without JavaScript)
The min and max Attributes
Use min and max on number, date, and range inputs to limit what values the user can enter.
<input type="number" name="age" min="1" max="120"> <input type="date" name="dob" min="1900-01-01" max="2026-12-31"> <input type="range" name="volume" min="0" max="100">
The step Attribute
The step attribute controls the intervals the value can jump by. For a number input with step="5", the field accepts 0, 5, 10, 15, and so on.
<input type="number" name="quantity" min="0" max="100" step="5">
The maxlength and minlength Attributes
These attributes limit the number of characters a text input accepts.
<input type="text" name="username" minlength="3" maxlength="20">
The browser prevents typing beyond maxlength and shows an error if the field contains fewer characters than minlength on form submission.
The size Attribute
The size attribute sets the visible width of a text input in characters. It does not limit the number of characters the user can type — only maxlength does that.
<input type="text" name="pincode" size="6">
The autofocus Attribute
The autofocus attribute places the keyboard cursor inside the field as soon as the page loads. Only one field per page should use autofocus.
<input type="search" name="q" autofocus placeholder="Search...">
The autocomplete Attribute on Inputs
This attribute controls whether the browser suggests previously entered values for this specific field.
<input type="email" name="email" autocomplete="email"> <input type="password" name="password" autocomplete="current-password"> <input type="text" name="otp" autocomplete="off">
Setting specific autocomplete values like "email" or "current-password" helps password managers and autofill tools understand what kind of data the field expects.
The pattern Attribute
The pattern attribute accepts a regular expression. The input validates against this pattern when the form submits. If the value does not match, the browser shows an error.
<!-- Only allows exactly 10 digits -->
<input type="tel" name="phone" pattern="[0-9]{10}"
placeholder="10-digit phone number">
<!-- Only allows letters and spaces -->
<input type="text" name="fullname" pattern="[A-Za-z ]+"`>
The multiple Attribute
For file inputs and email inputs, multiple allows the user to select or enter more than one value.
<!-- Upload multiple files at once --> <input type="file" name="photos" multiple> <!-- Enter multiple email addresses separated by commas --> <input type="email" name="cc" multiple placeholder="email1@x.com, email2@x.com">
The accept Attribute
For file inputs, accept filters what types of files the file picker shows to the user.
<!-- Only image files --> <input type="file" name="photo" accept="image/*"> <!-- Only PDF files --> <input type="file" name="resume" accept=".pdf"> <!-- JPG and PNG only --> <input type="file" name="avatar" accept=".jpg,.png">
The list Attribute and datalist
The list attribute connects an input to a <datalist> element to provide a dropdown of suggested values. The user can still type anything — the suggestions are hints, not restrictions.
<input type="text" name="city" list="cities" placeholder="Type a city..."> <datalist id="cities"> <option value="Delhi"> <option value="Mumbai"> <option value="Chennai"> <option value="Bengaluru"> </datalist>
Visual Diagram — list + datalist
User starts typing "M": +---------------------------+ | M | +---------------------------+ | Mumbai | ← dropdown suggestion appears +---------------------------+
The checked Attribute
For checkboxes and radio buttons, checked makes the option selected by default when the page loads.
<input type="checkbox" name="newsletter" checked> Subscribe to newsletter <input type="radio" name="gender" value="male" checked> Male
Quick Reference Table
Attribute Works On Purpose ----------- ----------------- ---------------------------- name All inputs Identifies the field in submitted data id All inputs Links label to input value All inputs Sets initial or default value placeholder Text inputs Shows hint text required All inputs Makes field mandatory disabled All inputs Grays out, excludes from submission readonly Text inputs Visible but not editable min / max Number, date, range Restricts value range maxlength Text inputs Limits character count autofocus Any input Auto-focuses on page load pattern Text inputs Validates against regex multiple File, email Allows multiple selections accept File Filters file type picker list Text inputs Connects to datalist suggestions checked Checkbox, radio Pre-selects the option
Mastering these attributes gives you precise control over every input field in your forms, making them more user-friendly, secure, and reliable.