Forms in HTML
5th August, 2024
What is a Form?
An HTML Form is used to collect input from the user
and send to the server for processing.
“Forms are the bridge between the user and a server”
Common use cases:
- Registration
- Payment
- Search box
- Surveys and feedback
2
Basic Structure of a Form
<form action="/submit" method="post">
<!-- Form elements go here -->
</form>
● action: URL to send the data to.
● method: Type of HTTP request to send
3
Common Input Elements (with label
and id)
<label for="fullname">Full Name:</label>
<input type="text" id="fullname" name="fullname">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
4
Labels and Accessibility
Why use <label> with for and input id?
● Links label to input
● Enhances accessibility (especially for screen readers)
● Clickable label focuses the input
Example:
<label for="username">Username:</label>
<input type="text" id="username" name="username">
5
Select Dropdown
<label for="country">Select Country:</label>
<select id="country" name="country">
<option value="ng">Nigeria</option>
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
</select>
6
When to use Select Dropdown
:
● When the user needs to pick one option from a long or structured list.
● Ideal for:
○ Countries, states, or cities
○ Currencies
○ Product categories
○ Time zones
7
Radio Buttons
<p>Choose Gender:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
8
When to use Radio Buttons
When users must choose only one option from a small set of predefined options.
Examples:
● Gender selection
● Payment method (e.g., card, PayPal, crypto)
● Answering Yes/No questions
● Selecting a product size (S, M, L)
Why use radio buttons instead of a dropdown?
● All options are visible at once — faster selection
● Better for short lists (typically 2–5 items)
● Encourages deliberate choices when visibility matters
9
Checkboxes
<p>What are your favorite after-school activities?</p>
<input type="checkbox" id="gaming" name="activity" value="gaming">
<label for="gaming">Gaming</label>
<input type="checkbox" id="music" name="activity" value="music">
<label for="music">Listening to Music</label>
<input type="checkbox" id="sports" name="activity" value="sports">
<label for="sports">Playing Sports</label>
10
When to use Checkboxes
● When users can pick more than one option.
● Each checkbox is independent — they can select none, one, or many.
Common Use Cases
● Favorite school subjects
● Hobbies or clubs they belong to
● Types of movies or shows they like
● Food or snack preferences
● Dream vacation spots
11
Text Area
Text Area is a multi-line input field for writing longer text. It’s used for open-ended answers instead of
selecting options.
Use Text Area when you want the user to type a sentence or paragraph, not just a few words.
<label for="feedback">Tell us about your day at school:</label><br>
<textarea id="feedback" name="feedback" rows="4" cols="40"></textarea>
12
Fieldset for grouping
<fieldset>
<legend>Contact Info</legend>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</fieldset>
13
The Submit Button
The submit button helps us to submit user’s input. To add the button, we can use either the
<button> tag or <input> tag
● <button type=”submit”>Finish</button>
● <input type=”submit” value=”Finish” />
14
Form Validation and Placeholders
To validate inputs, we can use some attributes:
Required doesn’t allow submissions until the input has been filled
Minlength and maxlength set both the minimum and maximum length of input
Placeholder adds placeholder text
<input type="email" id="userEmail" name="userEmail" placeholder=”your mail” required>
<input type="text" id="username" name="username" minlength="3" maxlength="15">
<input type="text" id="zip" name="zip" pattern="[0-9]{5}">
15
Summary
Use <form> to gather input
✅ Pair <label for=""> with input id
✅ Use select, radio, and checkbox for choices
✅ Validate input with required, minlength, etc.
✅ Submit form data with POST or GET
16
