Form Elements Overview
<form action="/submit" method="post">
<!-- Text input with label -->
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<!-- Multi-line text -->
<label for="msg">Message:</label>
<textarea id="msg" name="message" rows="5"></textarea>
<!-- Dropdown -->
<label for="country">Country:</label>
<select id="country" name="country">
<option value="">Choose...</option>
<option value="gb">United Kingdom</option>
<option value="us">United States</option>
<option value="in">India</option>
</select>
<!-- Group related inputs -->
<fieldset>
<legend>Preferred contact:</legend>
<input type="radio" id="r-email" name="contact" value="email">
<label for="r-email">Email</label>
<input type="radio" id="r-phone" name="contact" value="phone">
<label for="r-phone">Phone</label>
</fieldset>
<!-- Submit button -->
<button type="submit">Send message</button>
</form>Key Form Elements
| Element | Purpose |
|---|---|
<input> | Single-line data entry (many types) |
<textarea> | Multi-line text entry |
<select> | Dropdown list of options |
<button> | Clickable button (submit, reset, or button) |
<label> | Text label linked to an input |
<fieldset> | Groups related inputs with a border |
<legend> | Caption for a fieldset |
<datalist> | Autocomplete suggestions for an input |
Always pair
<label for="id"> with <input id="id"> — clicking the label focuses the input, which is essential for accessibility and mobile usability.