Open In App

HTML form Tag

Improve
Improve
Like Article
Like
Save
Share
Report

The HTML <form> tag creates input areas for user data, users can interact with the form, feedback collection, and data submission to the database as well as servers. Integrating forms in your content enhances user engagement, boosts interactivity, and the site more attractive.

Note: The <form> tag supports the Global Attributes and Event Attributes in HTML.

Syntax

<form> Form Content... </form>

Supported Elements

Attributes

Attributes

Descriptions

name

It provides a name for the form.

target

It specifies where to display the response after form submission (like a new window or the current window).

Action Attribute

Sends form data to the server upon submission.

Enctype Attribute

  • application/x-www-form-urlencoded: Standard form data submission.
  • multipart/form-data: Used for file uploads like images, documents, etc.

Methods

  • Get Method: Limited URL character length, and used when we have to get data from somewhere like server.
  • Post Method: No size limits, submissions cannot be bookmarked and used when we sends data to server.

accept-charset

It specifies the character encodings that is to be used for the form submission

autocomplete

It specifies whether a form should have autocomplete on or off

novalidate

It specifies that the form should not be validated before submitting

rel

It specifies the relationship between a linked resource and the current document.

Example 1: In this example we will see about form tag with an example.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>User Form</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f4;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
 
        form {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 300px;
        }
 
        h1 {
            text-align: center;
            color: #333;
        }
 
        input {
            width: 100%;
            padding: 8px;
            margin-bottom: 16px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
    </style>
</head>
 
<body>
 
    <form>
        <h1>User Information</h1>
 
        <label for="fname">First Name</label>
        <input type="text" id="fname" name="fname"
               placeholder="Enter your first name"
               required>
 
        <label for="lname">Last Name</label>
        <input type="text" id="lname" name="lname"
               placeholder="Enter your last name"
               required>
 
        <input type="submit" value="Submit">
    </form>
 
</body>
 
</html>


Output:

Screenshot-2023-12-11-135126

Example 2: In this example we will see about form tag with an example.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Radio Button Form</title>
</head>
 
<body>
    <center>
        <h1 style="color: green;">
          GeeksforGeeks
          </h1>
 
        <form action="#" method="post">
            <label for="male">Male</label>
            <input type="radio" id="male"
                   name="gender" value="male">
 
            <label for="female">Female</label>
            <input type="radio" id="female"
                   name="gender" value="female">
 
            <label for="other">Other</label>
            <input type="radio" id="other"
                   name="gender" value="other">
            <input type="submit" value="Submit">
        </form>
    </center>
</body>
 
</html>


Output:

Screenshot-2023-12-14-233331

Supported Browsers 

  • Google Chrome 1 and above
  • Edge 12 and above
  • Firefox 1 and above
  • Opera 15 and above
  • Safari 4 and above


Last Updated : 20 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads