HTML Form Elements
Beyond <input>, forms use several other elements: <label> associates descriptive text with a field, <select>/<option> create dropdown menus, <textarea> allows multi-line text, and <fieldset>/<legend> group related fields visually.
Properly associating a <label> with its input (via the for attribute matching the input's id) is essential for accessibility, allowing screen readers to announce the field's purpose and letting users click the label to focus the field.
<label for="name">Name</label>
<input id="name">label, select, textarea
<label for="id">Text</label> links to an input's id. <select> with nested <option> tags creates a dropdown. <textarea> is a resizable multi-line text box.
fieldset and legend
<fieldset> visually and semantically groups related form controls, with <legend> providing a caption for the group, common for things like billing vs shipping address sections.
<label for="country">Country</label>
<select id="country" name="country">
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
</select>Country: [United States ▾]select and option create a dropdown, with label properly associated via for/id.
<fieldset>
<legend>Contact Info</legend>
<label for="email">Email</label>
<input id="email" type="email">
</fieldset>Contact Info
Email: [______]fieldset and legend group and caption related fields together.
Key points
- <label for="id"> associates text with an input by matching id.
- <select>/<option> create dropdown menus.
- <textarea> allows multi-line free text input.
- <fieldset>/<legend> group and caption related fields.