Loading...
Loading...
Build forms that collect user input with text fields, checkboxes, and radio buttons
Forms are how users send data to a website — login forms, search bars, signup pages, contact forms. The element wraps all your inputs, and each field collects a specific piece of data.
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Send</button>
</form>| Element | What it does |
|---|---|
| ` | Wraps all inputs. `action` = where data goes, `method` = how |
| ` | Text label for an input. `for` matches input's `id` |
| `` | The actual input field. `type` determines what kind |
| ` | Sends the form data |
HTML offers many input types — the browser adapts the interface for each:
<!-- Text (single line) -->
<input type="text" placeholder="Enter your name">
<!-- Email (validates @ symbol automatically) -->
<input type="email" placeholder="you@example.com">
<!-- Password (hides characters) -->
<input type="password">
<!-- Number (shows up/down arrows) -->
<input type="number" min="0" max="100">
<!-- Checkbox (yes/no toggle) -->
<input type="checkbox" id="agree">
<label for="agree">I agree to the terms</label>
<!-- Radio buttons (choose ONE from group) -->
<input type="radio" name="color" value="red" id="red">
<label for="red">Red</label>
<input type="radio" name="color" value="blue" id="blue">
<label for="blue">Blue</label>The for attribute on matches the id on — this makes the label clickable (clicking the label focuses the input) and improves accessibility.
<!-- Clicking "Email" focuses the input -->
<label for="email">Email:</label>
<input type="email" id="email" name="email">| Attribute | What it does |
|---|---|
| `placeholder` | Hint text inside the field (disappears on typing) |
| `required` | Prevents submission if field is empty |
| `disabled` | Grayed out, can't be interacted with |
| `readonly` | Can see but can't edit |
| `min` / `max` | For number inputs — range limits |
| `maxlength` | Maximum characters allowed |
| ❌ Wrong | Why | ✅ Right |
|---|---|---|
| `` without ` | Fails accessibility — screen readers can't identify the field | Always pair with ` |
| Multiple inputs with same `id` | IDs must be unique — use `name` for grouping | Each `id` is unique; `name` groups radios |
| Forgetting `name` attribute | Form data is sent as `name=value` — without `name`, the data is lost | Add `name="field_name"` to every input |
| ` | Wont submit the form data | Put submit button inside ` |
Create a simple signup form with:
<form action="/signup" method="POST"> <label for="fullname">Full Name:</label> <input type="text" id="fullname" name="fullname" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <input type="checkbox" id="agree" name="agree"> <label for="agree">I agree to the terms</label> <button type="submit">Sign Up</button> </form>