Text Inputs
Collect text inputs from users with the <input> and <textarea> elements.
Text Field
Single-line text fields.
<label for="greeting">What's your preferred greeting?</label>
<input type="text" id="greeting" name="greeting">Text Area
Multi-line text fields.
Coming Soon! Kelp will have a web component that will automatically expand a
textarea element as the user types.
<label for="vacation">What's your favorite vacation spot?</label>
<textarea type="text" id="vacation" name="vacation"></textarea>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
>
<label for="vacation-readonly">What's your favorite vacation spot?</label>
<textarea
type="text"
id="vacation-readonly"
name="vacation"
readonly
>
Anywhere with sun and sand!
</textarea>