📖
HTML Forms
Forms for registration, search and feedback
The <form> tag — form container
html
<form action="/submit" method="POST">
<!-- form fields -->
</form>action— URL where data is sentmethod— method:GET(data in URL, for search) orPOST(in request body, for passwords)
Input fields <input>
<input> is a self-closing tag. The type attribute determines the kind of field:
| type | Appearance | Where used |
|---|---|---|
text | Plain text field | Name, search |
email | Validates email format | |
password | Characters hidden | Password |
number | Numbers only | Age, quantity |
checkbox | Tick box ✓ | Agreement, settings |
radio | Round button ○ | Pick one of several |
submit | Submit button | Send form |
range | Slider | Volume, rating |
Key attributes:
name— key that the data is sent to the server withplaceholder— hint inside the field (disappears on input)required— field is mandatoryvalue— initial value
<label> — field label
Always add a label! Without it, it's unclear what to enter. Two ways:
html
<!-- Method 1: for + id (label and input separately) -->
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<!-- Method 2: wrap input inside label -->
<label>
Email:
<input type="email" name="email">
</label>When a label is linked to an input — clicking the label text automatically focuses the field. Convenient and important for accessibility.
html
💬
A real registration form. The required attribute prevents submission if the field is empty — the browser shows the error itself.
Use <button type='submit'> instead of <input type='submit'> — a button is easier to style with CSS and can contain HTML (like an icon).