HTML Forms
Build forms with input types, labels, validation, and proper accessibility
Free tier: read the explanation here. Upgrade to Pro for Drills, Speed challenges & Mastery badges.
UpgradeKnowledge Debt detected
You can study this freely — but your score may plateau if these foundations have gaps. The Mastery badge requires them to be solid.
Explanation
Forms are how users send data to servers. A well-built form is accessible, validates input before sending it, and handles errors gracefully.
Form skeleton:
html <form action="/login" method="POST"> <label for="email">Email</label> <input type="email" id="email" name="email" required /> <label for="password">Password</label> <input type="password" id="password" name="password" required /> <button type="submit">Log In</button> </form>
Key attributes:
| Attribute | Purpose | |---|---| | action | Where the form data is sent (URL) | | method | HTTP verb — GET (data in URL) or POST (data in body) | | for / id | Links a <label> to its <input> — clicking the label focuses the input | | name | The key sent to the server (like a dictionary key) | | required | Browser blocks submit if the field is empty | | placeholder | Hint text inside the field — not a substitute for a label |
Input types — use the right one:
html <input type="text" /> <!-- Generic text --> <input type="email" /> <!-- Validates email format, mobile shows email keyboard --> <input type="password" /> <!-- Hides typed characters --> <input type="number" /> <!-- Shows numeric keyboard on mobile --> <input type="tel" /> <!-- Phone number — shows dial pad on mobile --> <input type="date" /> <!-- Date picker — no JS needed --> <input type="checkbox" /> <!-- Boolean on/off --> <input type="radio" name="plan" value="free" /> <!-- One-of-many choice --> <input type="file" /> <!-- File upload --> <input type="hidden" name="csrf" value="token" /> <!-- Hidden data -->
Select and textarea:
html <label for="country">Country</label> <select id="country" name="country"> <option value="">-- Select --</option> <option value="us">United States</option> <option value="br">Brazil</option> </select> <label for="bio">Bio</label> <textarea id="bio" name="bio" rows="4" maxlength="500"></textarea>
HTML5 validation without JavaScript:
html <input type="email" required /> <!-- Must be a valid email --> <input type="number" min="1" max="100" /> <!-- Must be 1–100 --> <input type="text" minlength="8" maxlength="20" pattern="[A-Za-z]+" />
Examples
Registration form with validation
Each input has a `<label>` linked by `for`/`id`, type-appropriate validation, and a visible legend for the radio group
<form action="/register" method="POST">
<label for="name">Full Name</label>
<input
type="text"
id="name"
name="name"
required
minlength="2"
maxlength="100"
placeholder="Jane Doe"
/>
<label for="email">Email</label>
<input type="email" id="email" name="email" required />
<label for="age">Age</label>
<input type="number" id="age" name="age" min="13" max="120" />
<fieldset>
<legend>Preferred Contact</legend>
<label><input type="radio" name="contact" value="email" checked /> Email</label>
<label><input type="radio" name="contact" value="phone" /> Phone</label>
</fieldset>
<label>
<input type="checkbox" name="terms" required />
I agree to the Terms of Service
</label>
<button type="submit">Create Account</button>
</form>Dropdown and textarea
`<select>` for a fixed list; `<textarea>` for multi-line text; `type="reset"` clears the form without JS
<form action="/feedback" method="POST">
<label for="topic">Topic</label>
<select id="topic" name="topic" required>
<option value="">-- Choose a topic --</option>
<option value="bug">Bug report</option>
<option value="feature">Feature request</option>
<option value="content">Content issue</option>
</select>
<label for="message">Message</label>
<textarea
id="message"
name="message"
rows="5"
required
minlength="20"
maxlength="2000"
placeholder="Describe your feedback..."
></textarea>
<button type="submit">Send Feedback</button>
<button type="reset">Clear</button>
</form>How well did you understand this?
Next in HTML
HTML Tables