HTML Form Elements
Native form elements cover many common interactions without custom widgets. Select the right control and explain the expected input before adding visual styling.
How it works
- Use select and option for a choice list, textarea for multi-line text, and input for values supported by its type.
- Use fieldset and legend to identify a related group, especially radio-button or checkbox choices. Individual controls still need labels.
- datalist suggests values but usually does not restrict input to those values. output represents a calculated result rather than storing application state automatically.
A practical example
<fieldset>
<legend>Choose a session</legend>
<label><input type="radio" name="session" value="bikes"> Bike repair</label>
<label><input type="radio" name="session" value="tools"> Tool care</label>
</fieldset>
<label for="notes">Access requirements</label>
<textarea id="notes" name="notes" rows="4"></textarea>
Both radio buttons share a name, so they form one choice group. The legend explains the group and the textarea has its own explicit label.