Forms and Links

A basic form

<form method="post" action="/submit">n    <label for="name">Name</label>n    <input type="text" id="name" name="name" required>nn    <label for="email">Email</label>n    <input type="email" id="email" name="email" required>nn    <button type="submit">Send</button>n</form>

Every <input> should have a matching <label> connected via for/id — this is not decoration, it is what lets a screen reader announce what a field is for, and it also makes clicking the label itself focus the input, which sighted users rely on more than they realize.

Common input types

<input type="text">n<input type="email">n<input type="password">n<input type="number">n<input type="checkbox">n<input type="radio" name="plan" value="basic">n<textarea rows="4"></textarea>n<select>n    <option value="a">Option A</option>n</select>

Using the right type gets you free validation and better mobile keyboards — type="email" shows an @ key on a phone’s keyboard and rejects obviously invalid input before the form is even submitted, with zero JavaScript required.

The required attribute

required triggers the browser’s own built-in validation — it will refuse to submit and highlight the empty field automatically. This is client-side, front-line validation only; a real application always re-validates on the server too, since anyone can bypass front-end HTML entirely.

Links

<a href="/courses">Browse courses</a>n<a href="https://example.com" target="_blank" rel="noopener">External site</a>n<a href="#section-2">Jump to Section 2</a>

target="_blank" opens a link in a new tab; pair it with rel="noopener", which prevents the new page from gaining a security-relevant reference back to the original tab — a small but genuinely recommended security habit for any link leaving your own site.