Forms & Inputs
All HTML topics∙ Chapter 12
Forms & Inputs
Forms collect information from users — login boxes, search bars, contact forms. The <form> tag wraps all input elements.
| Input Type | What it creates |
|---|---|
| type="text" | Single line text box |
| type="email" | Email box (auto-validates format) |
| type="password" | Password box (hides text) |
| type="number" | Number input with up/down arrows |
| type="checkbox" | Tick box — yes/no choice |
| type="radio" | One choice from a group |
| type="range" | Slider control |
| type="submit" | Submit button |
| <textarea> | Multi-line text area |
| <select> | Dropdown menu |
How forms work (beginner)
action is where the data goes (a URL on your server).
method="get" puts data in the URL (good for search forms).
method="post" sends data in the request body (good for login/register).
name on inputs becomes the field key (example: name="email").
✅Accessibility: connect labels to inputs using
for and matching id. This helps screen readers and makes clicking the label focus the input.📝 Edit Code
👁 Live Preview
💡 Try the password field — the text is automatically hidden!