How to implement the Forms in HTML ?

Last Updated : 01 Feb, 2024

The HTML <form> Tag is used to create an HTML form. A form is a crucial part of web development that allows users to input data, which can then be sent to a server for processing.

The <form> Tag serves the following purposes:

Input Collection: It provides a container to collect user input, such as text, checkboxes, radio buttons, and more.
User Interaction: Forms facilitate interactive elements like buttons and drop-down menus, enhancing user engagement.
Data Submission: When a user submits a form, the data entered into the form fields is sent to the server for further processing.
Action and Method Attributes: The ‘action’ attribute specifies the URL where the form data should be submitted, and the ‘method’ attribute defines the HTTP method (e.g., GET or POST) used for the submission.

Syntax

<form action="/submit" method="POST">
    <!-- Form fields go here -->
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
    <input type="submit" value="Submit">
</form>

Note: In this example, the form is set to submit data to “/submit” using the POST method when the user clicks the “Submit” button. The actual form fields can vary depending on the information you want to collect.

Example:

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
          "width=device-width, initial-scale=1.0">
    <title>HTML form tag</title>
</head>
 
<body>
    <h2>HTML <form> tag</h2>
 
    <form action="/submit" method="post">
        <label for="username">Username:</label>
        <input type="text"
               id="username"
               name="username" required>
        <br><br>
        <label for="password">Password:</label>
        <input type="password"
               id="password"
               name="password" required>
        <br><br>
        <input type="submit"
               value="Submit">
    </form>
</body>
 
</html>