Input
Collect input from users with the <input> element.
Input Field
Single-line text fields.
<label for="greeting">What's your preferred greeting?</label>
<input type="text" id="greeting" name="greeting">Placeholders
Add example input values with the [placeholder] attribute.
<label for="pixar">What's the best Pixar movie?</label>
<input type="text" id="pixar" name="pixar" placeholder="Up!">
Heads up! Placeholder text is not a suitable replacement for a
<label> element. They should provide examples and guidance rather than descriptive text.
Input Types
In modern HTML, the <input> element supports many different [type] attribute values that enable special validation features or expose custom keyboards on mobile devices.
<label for="email">Email</label>
<input type="email" id="email" name="email">
<label for="tel">Telephone</label>
<input type="tel" id="tel" name="tel">
<label for="num">Number</label>
<input type="num" id="num" name="num">
<label for="url">URL</label>
<input type="url" id="url" name="url">Readonly
Use the [readonly] attribute to display a field, but prevent users from editing it.
<label for="greeting-readonly">What's your preferred greeting?</label>
<input
type="text"
id="greeting-readonly"
name="greeting"
value="Hey there!"
readonly
>