HTML Form Elements
A form is built from several elements beyond just <input>. Each one has a specific job.
Form elements
| Element | What it is |
|---|---|
<label> | Caption tied to an input via for/id or by wrapping the input. |
<input> | Single-line control — see HTML Input Types. |
<textarea> | Multi-line text input. rows and cols set the visible size. |
<select> | Dropdown. Contains <option> children. |
<option> | One choice inside a <select>. |
<optgroup> | Group options under a heading. |
<button> | Submit, reset, or generic action button. |
<fieldset> | Visually and semantically group related controls. |
<legend> | Caption for a <fieldset>. |
<datalist> | List of suggestions for an <input> — like an autocomplete. |
<output> | Where you display a calculation result. |
Grouping with fieldset
<fieldset>
<legend>Delivery address</legend>
<label>Street <input name="street"></label>
<label>City <input name="city"></label>
</fieldset>
Tip: A
<datalist> gives free typing plus suggestions — better than a <select> when the user might want to type something not in the list.Example
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Form Elements</title>
</head>
<body>
<h1>HTML Form Elements</h1>
<p>This is a demo page for the "HTML Form Elements" lesson.</p>
</body>
</html>
Try it Yourself »
Exercise
Group these radio buttons inside a labelled box.
<
>
<legend>Plan</legend>
<input type="radio" name="plan">
</
>
Eight letters. Pairs with <legend>.
Discussion
Loading…