Form Structure
| Element | Purpose | Key Attributes |
|---|---|---|
<form> |
Container for all inputs. Handles submission. | action (URL), method (GET/POST) |
<fieldset> |
Groups related inputs with a visible border | — |
<legend> |
Title for a fieldset group | — |
<label> |
Labels an input. Clicking it focuses the input. | for (must match input's id) |
<input> |
Single-line user input | type, id, name, value |
<textarea> |
Multi-line text input | rows, cols, name |
<select> + <option> |
Dropdown menu | name, value (on options) |
<button> |
Clickable button | type (submit / button / reset) |
Input Types
| Type | Behavior | Example |
|---|---|---|
text |
Single-line text | <input type="text"> |
email |
Email validation + @ keyboard | <input type="email"> |
password |
Hidden characters (dots) | <input type="password"> |
number |
Numeric input with spinners | <input type="number" min="0"> |
tel |
Phone keypad on mobile | <input type="tel"> |
url |
URL validation | <input type="url"> |
date |
Browser date picker | <input type="date"> |
checkbox |
Toggle on/off | <input type="checkbox"> |
radio |
Choose one (group by same name) |
<input type="radio" name="plan"> |
submit |
Submit the form | <input type="submit" value="Send"> |
hidden |
Invisible field (sends data silently) | <input type="hidden" name="ref" value="google"> |
Validation Attributes
| Attribute | Effect | Example |
|---|---|---|
required validation |
Field must not be empty | <input required> |
minlength validation |
Minimum characters | <input minlength="3"> |
maxlength validation |
Maximum characters | <input maxlength="50"> |
min / max validation |
Number/date range | <input type="number" min="1" max="100"> |
pattern validation |
Custom regex | <input pattern="[0-9]{10}"> |
placeholder |
Hint text (NOT a label substitute) | <input placeholder="e.g. John"> |
Table Structure
| Element | Purpose | Key Attributes |
|---|---|---|
<table> |
Table container | — |
<thead> |
Header section (column names) | — |
<tbody> |
Body section (data rows) | — |
<tfoot> |
Footer section (totals, notes) | — |
<tr> |
Table row | — |
<th> |
Header cell (bold, semantic) | colspan, rowspan, scope |
<td> |
Data cell | colspan, rowspan |
The Label-Input Contract
Always pair every <input> with a <label>. The for attribute on the label must match the id on the input. The name attribute is what gets sent to the server. These are three different purposes — don't confuse them:
id= unique identifier on the page (connects to label)name= the key sent to the serverfor= on the label, points to the input's id
Sources: MDN: <form> · MDN: <input> · MDN: <table>