HTML input attributes control field behavior, client-side validation requirements, character length limits, default values, and focus behavior without requiring custom JavaScript code.
Applying HTML5 input validation attributes ensures cleaner user data entries before form submission:
<input
type="text"
name="username"
value="JohnDoe"
placeholder="Enter username"
required
readonly
disabled
maxlength="20"
minlength="4"
pattern="[A-Za-z0-9]+"
autofocus>
Key attributes explained:
required: Mandates that the user fill out the field before submitting the form.placeholder: Displays short background hint text that disappears when typing starts.value: Sets the default initial value of the input field.readonly: Prevents users from modifying the field value, but includes the data during form submission.disabled: Disables interaction completely and excludes the field data from form submission.minlength & maxlength: Restricts the minimum and maximum character length allowed.pattern: Enforces custom regular expression (regex) validation rules on text input.flowchart LR
A["Input Attributes"] --> B["readonly -> User cannot edit, value sent in form"]
A --> C["disabled -> User cannot edit, value NOT sent in form"]
A --> D["required -> Browser blocks submit if empty"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Input Attributes Example</title>
</head>
<body style="font-family: system-ui, sans-serif; background-color: #0f172a; color: #f8fafc; padding: 2rem;">
<h2>Account Setup Form</h2>
<form style="background-color: #1e293b; padding: 1.5rem; border-radius: 8px; max-width: 400px;">
<div style="margin-bottom: 1rem;">
<label for="promo-code" style="display: block; margin-bottom: 0.5rem;">Coupon Code (Uppercase Only):</label>
<input
type="text"
id="promo-code"
name="promo_code"
placeholder="e.g. SAVE20"
pattern="[A-Z0-9]{6}"
maxlength="6"
required
style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #334155; text-transform: uppercase;">
</div>
<button type="submit" style="background-color: #2563eb; color: #ffffff; padding: 10px 16px; border: none; border-radius: 6px; cursor: pointer;">
Apply Code
</button>
</form>
</body>
</html>
placeholder as a replacement for <label>: Placeholders disappear once text is typed, leaving screen reader users and form users without context.disabled for unavailable fields and readonly for fixed values: Remember that disabled field values are not sent to backend servers on submit.Create a text input for a zip code that requires input (required), has a maxlength="5", and includes a placeholder "10001"!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.