HTML <form> Tag

The HTML <form> tag is a fundamental element used to collect user input and submit it to a web server. Forms are an integral part of any interactive website, enabling the submission of data like login credentials, registration details, feedback, and more. The <form> tag acts as a container for various input elements, such as text fields, checkboxes, radio buttons, and submit buttons.

Syntax of the <form> Tag

html
<form action="URL" method="POST/GET">
    <!-- Input elements go here -->
</form>
  • action: Specifies the URL where the form data will be sent after submission.
  • method: Defines the HTTP method used to send form data. The most common methods are POST (securely sending data) and GET (appending data to the URL).

The <form> tag contains various form elements, such as <input>, <textarea>, <select>, and <button>, which allow users to enter and submit data.

Attributes of the <form>Tag

The <form> tag supports several important attributes that determine how the form functions and how the submitted data is handled.

AttributeDescription
actionSpecifies the URL where the form data should be submitted.
methodDefines the HTTP method (GET or POST) used to send the form data.
enctypeSpecifies how form data should be encoded when submitted to the server (used with POST method).
targetDefines where to display the response after form submission (e.g., _blank, _self, etc.).
novalidateDisables the HTML5 form validation when present.
autocompleteEnables or disables the browser’s autocomplete feature for the form fields.
nameSpecifies a name for the form, useful for identifying the form on the server-side.

These attributes allow developers to control how forms function and provide a better user experience for both the client and server side.

Examples of HTML <form> Tag

Example 1: A Simple Contact Form

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

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

        <input type="submit" value="Submit">
    </form>
</body>
</html>

In this example, the form collects a user’s name and email address and submits the data using the POST method.

Example 2: A Search Form Using the GET Method

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search Form</title>
</head>
<body>
    <h2>Search Our Website</h2>
    <form action="/search_results" method="GET">
        <label for="query">Search:</label>
        <input type="text" id="query" name="query" placeholder="Enter search term">
        
        <button type="submit">Search</button>
    </form>
</body>
</html>

This example demonstrates a search form that uses the GET method to append the search query to the URL.

FAQs About HTML <form> Tag

Q1: What is the purpose of the HTML <form> tag?
A: The <form> tag is used to collect user input and submit it to a server for processing. It contains input elements like text fields, buttons, and checkboxes to gather information.

Q2: What is the difference between GET and POST methods in a form?
A: The GET method appends form data to the URL, making it visible in the browser's address bar. The POST method sends data securely in the request body, without appending it to the URL.

Q3: Can I use the <Form> tag without an action attribute?
A: Yes, but the form data will not be submitted anywhere without the action attribute. If omitted, the form will submit to the current page URL by default.

Q4: What is the enctype attribute in forms?
A: The enctype attribute specifies how form data should be encoded before it is sent to the server. It is important when submitting files (multipart/Form-data) or non-ASCII characters.

Q5: Is form validation possible with the <form> tag?
A: Yes, HTML5 provides built-in form validation features, such as required fields and pattern matching. You can also use JavaScript for custom form validation.

tools

HTML

Related Articles