HTML
form tag


The <form> tag in HTML is used to create an interactive form for collecting user input. Forms are essential for gathering data from users, such as in sign-up forms, search fields, and feedback surveys. The <form> element acts as a container for various form controls, such as text fields, buttons, and checkboxes.

Syntax:

<form action="submit_url" method="post"> <!-- Form controls go here --> </form>

Key Attributes:

  1. action: Specifies the URL where the form data should be sent when the form is submitted. This URL is typically a server-side script or an endpoint that processes the form data.

    <form action="submit_form.php" method="post">
  2. method: Defines the HTTP method used to send form data to the server. The two most common methods are:

    • GET: Appends form data to the URL, making it visible in the browser's address bar. Suitable for retrieving data or performing searches.
    • POST: Sends form data in the body of the request, keeping it hidden from the URL. Suitable for submitting data, such as user registration or login.
    <form action="submit_form.php" method="post">
  3. enctype: Specifies how the form data should be encoded when submitting. Common values include:

    • application/x-www-form-urlencoded (default): Encodes form data as key-value pairs.
    • multipart/form-data: Used for forms that include file uploads.
    • text/plain: Encodes form data as plain text (rarely used).
    <form action="upload.php" method="post" enctype="multipart/form-data">
  4. target: Determines where to display the response after form submission. Possible values include:

    • _self (default): Opens the response in the same window or tab.
    • _blank: Opens the response in a new window or tab.
    • _parent: Opens the response in the parent frame (if applicable).
    • _top: Opens the response in the full window, removing any frames.
    <form action="submit_form.php" method="post" target="_blank">

Example Usage:

Basic Form:

<form action="submit_form.php" method="post"> <label for="name">Name:</label> <input type="text" id="name" name="name" required> <br> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <br> <input type="submit" value="Submit"> </form>

In this example:

  • The form sends data to submit_form.php using the POST method.
  • It includes text input fields for name and email, and a submit button.

Form with File Upload:

<form action="upload.php" method="post" enctype="multipart/form-data"> <label for="file">Upload a file:</label> <input type="file" id="file" name="file"> <br> <input type="submit" value="Upload"> </form>

In this example:

  • The form uses multipart/form-data to handle file uploads.
  • It includes a file input field and a submit button.

Accessibility and SEO:

  • Accessibility: Proper use of the <form> tag, including appropriate labels (<label>) and attributes (e.g., required), enhances accessibility by making forms usable for people with disabilities. Using <fieldset> and <legend> tags to group related form elements can also improve accessibility.
  • SEO: While the <form> tag itself does not directly impact SEO, well-structured and functional forms contribute to a better user experience, which can positively influence SEO indirectly. For instance, forms that are easy to use and accessible can increase user engagement and satisfaction.