HTML Forms

A form is used to collect information from users. Forms are found everywhere on the web — login pages, registration pages, search boxes, contact forms, and shopping checkouts all rely on HTML forms.

When a user fills in a form and clicks submit, the data is sent to a server for processing.

The <form> Tag

The <form> tag defines the form container. All form elements are placed inside it. It has two important attributes:

• action – The URL of the server-side script that receives and processes the form data
• method – How the data is sent. Either GET or POST

<form action="/submit.php" method="POST">
  <!-- Form elements go here -->
</form>

GET vs POST Method

Form Elements Overview

HTML forms are made up of various input elements, each designed to collect a specific type of data.

1. Text Input

A single-line text field. Used for names, usernames, search queries, etc.

<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter username">

2. Password Input

Same as text input but the characters are hidden (shown as dots or asterisks).

<label for="pwd">Password:</label>
<input type="password" id="pwd" name="password" placeholder="Enter password">

3. Email Input

Validates that the entered text follows an email format (requires @ and domain).

<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="you@example.com">

4. Radio Buttons

Radio buttons allow the user to select only one option from a group. All radio buttons in a group must have the same name attribute.

<p>Select 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>

5. Checkboxes

Checkboxes allow the user to select multiple options at once.

<p>Select your hobbies:</p>
<input type="checkbox" id="reading" name="hobby" value="reading">
<label for="reading">Reading</label>

<input type="checkbox" id="cooking" name="hobby" value="cooking">
<label for="cooking">Cooking</label>

<input type="checkbox" id="gaming" name="hobby" value="gaming">
<label for="gaming">Gaming</label>

6. Dropdown / Select Box

Allows the user to choose one option from a dropdown list.

<label for="country">Country:</label>
<select id="country" name="country">
  <option value="">-- Select Country --</option>
  <option value="in">India</option>
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
</select>

7. Textarea

A multi-line text input for longer messages like comments or descriptions.

<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="40" placeholder="Write your message here..."></textarea>

8. Submit Button

Submits the form data when clicked.

<input type="submit" value="Submit Form">

<!-- Or using the button tag -->
<button type="submit">Submit</button>

Complete Contact Form Example

<h3>Contact Us</h3>
<form action="/send-message.php" method="POST">

  <label for="name">Full Name:</label><br>
  <input type="text" id="name" name="name" placeholder="John Smith"><br><br>

  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email" placeholder="john@example.com"><br><br>

  <label for="subject">Subject:</label><br>
  <input type="text" id="subject" name="subject" placeholder="Reason for contact"><br><br>

  <label for="message">Message:</label><br>
  <textarea id="message" name="message" rows="5" cols="40"></textarea><br><br>

  <button type="submit">Send Message</button>
  <button type="reset">Clear Form</button>

</form>

The <label> Tag

The <label> tag is used to describe an input field. Connecting a label to an input using the for attribute (matching the input's id) improves accessibility and also makes the label text clickable to focus the input.

Key Points to Remember

• All form elements must be placed inside a <form> tag
• Use method="POST" for sensitive data and method="GET" for search/filter forms
• Always connect <label> to its input using matching for and id values
• Radio buttons in a group share the same name; checkboxes are independent
• Use type="reset" button to clear all form fields
• Forms alone do not process data — a server-side language (PHP, Node.js, etc.) is needed