Form Tag in HTML

The <form> tag in HTML is used to create an interactive form on a web page. It allows users to input data, which can then be submitted to a server for processing. Here’s an overview of how to use the <form> tag and its attributes:

Basic Structure

<form action="/submit-route" method="post">
  <!-- Form elements go here -->
</form>

The action attribute specifies the URL where the form data will be sent upon submission.
The method attribute specifies the HTTP method to be used when submitting the form. Common values are get and post.

Form Elements

Within the <form> tag, you can include various form elements such as text fields, checkboxes, radio buttons, select dropdowns, and more.

Text Input

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

Password Input

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

Checkbox

<label for="subscribe">Subscribe to newsletter:</label>
<input type="checkbox" id="subscribe" name="subscribe">

Radio Buttons

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

<label for="country">Country:</label>
<select id="country" name="country">
  <option value="usa">United States</option>
  <option value="canada">Canada</option>
  <option value="uk">United Kingdom</option>
</select>

Textarea

<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>

Submit Button

<button type="submit">Submit</button>

Form Submission

When the form is submitted, the browser sends the data to the URL specified in the action attribute using the HTTP method specified in the method attribute.

For GET requests, the form data is appended to the URL as query parameters.
For POST requests, the form data is sent in the body of the HTTP request.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Example Form</title>
</head>
<body>
  <h1>Contact Us</h1>
  <form action="/submit-form" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br>

    <label for="message">Message:</label>
    <textarea id="message" name="message"></textarea><br>

    <button type="submit">Submit</button>
  </form>
</body>
</html>

Conclusion

The <form> tag in HTML provides a structured way to collect user input on web pages. By using various form elements within the <form> tag and specifying the action and method attributes, you can create interactive forms that allow users to submit data to a server for further processing.