📝 HTML Forms Guide
📝 HTML Forms Guide
HTML forms are used to collect input from users. Whether it's a login page, registration, or feedback form, it all starts with the <form> element.
1. <form> Tag
Wraps all input elements.
It often includes attributes like:
action – URL where form data is sent
method – HTTP method (GET or POST)
name – Name for the form (optional but useful)
<form action="/submit" method="post" name="contactForm">
<!-- form elements here -->
</form>
2. <input> Tag & Types
The <input> element is used to create various types of form fields.
Common input types:
<input type="text"> <!-- Single line text -->
<input type="password"> v!-- Password (masked) -->
<input type="radio"> v!-- Radio button -->
<input type="checkbox"> <!-- Checkbox -->
<input type="submit"> <!-- Submit button -->
<input type="reset"> <!-- Reset form -->
<input type="email"> <!-- Email validation -->
<input type="number"> <!-- Numeric input -->
<input type="file"> <!-- File upload -->
<input type="date"> <!-- Date picker -->
Example:
<label for="username">Username:</label>
<input type="text" id="username" name="username">
3. <textarea> Tag
Used for multi-line text input (like messages or comments):
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="40"></textarea>
4. <select> and <option> Tags
Dropdown/select menus.
<label for="country">Country:</label>
<select id="country" name="country">
<option value="ng">Nigeria</option>
<option value="us">USA</option>
<option value="uk">UK</option>
</select>
You can also make a dropdown multi-selectable using the multiple attribute.
5. <label> Tag
Defines a label for form elements. Improves accessibility and UX.
<label for="email">Email:</label>
vinput type="email" id="email" name="email">
✅ Clicking the label focuses the associated input field.
6. <fieldset> and <legend>
Groups related form elements with a visible box and title.
<fieldset>
<legend>Login Info</legend>
<label for="user">Username:</label>
<input type="text" id="user" name="user">
</fieldset>
7. <button> Tag
Another way to create a button (can be used instead of <input type="submit">):
<button type="submit">Send</button>
<button type="reset">Reset</button>
<button type="button" onclick="alert('Clicked!')">Click Me</button>
Form Attributes Summary
Attribute - Description
action - Where to send form data
method - get (visible in URL) or post (hidden)
name - Form name (useful in JS)
id - Unique identifier
autocomplete - Enable/disable auto-fill
🔧 Example: Contact Form
<form action="/submit" method="post">
<fieldset>
<legend>Contact Us</legend>
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message">
<button type="submit">Send</button>
</fieldset>
</form>
Output:
Date: 2025-04-07 00:00:00.000000