Input Attributes
Use placeholder, required, value, and more to control inputs.
Syntax
<input type="text" placeholder="Your name" required>Input elements support several helpful attributes.
placeholder— hint text shown when empty.value— a default value.required— the field must be filled before submitting.readonly— the value cannot be changed.disabled— the control is greyed out and ignored.
Example
Loading editor…
Press Run to see the result.
When to use it
- A sign-up form uses required on name and email inputs so the browser blocks submission when fields are empty.
- A password field uses minlength="8" and pattern attributes to enforce complexity rules without JavaScript.
- A quantity selector uses min="1" max="99" on a number input to limit values to a valid product count.
More examples
Required and placeholder attributes
required triggers built-in validation; placeholder shows hint text; autocomplete helps password managers.
<input type="email" name="email"
placeholder="[email protected]"
required
autocomplete="email">Min max and step on number input
min, max, and step constrain acceptable numeric values and control the increment arrows in the input.
<label for="qty">Quantity (1-10)</label>
<input type="number" id="qty" name="qty"
min="1" max="10" step="1" value="1">Pattern for custom format validation
pattern accepts a regex; the browser rejects submission and shows title as an error hint if it fails.
<label for="phone">Phone (US format)</label>
<input type="tel" id="phone" name="phone"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
placeholder="555-123-4567"
title="Format: 555-123-4567">
Discussion