HTML form Tag

Last Updated : 11 Jul, 2025

The <form> tag is used to create an HTML form for user input. It serves as a container for various input elements like text fields, checkboxes, and buttons, enabling the collection of data for submission to a server or processing via client-side scripts.

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

index.html

<html>
<body>
<form action="/submit" method="POST">
<h2>User Information</h2>
<label for="fname">
    First Name
            </label>
<input id="fname" name="fname" placeholder="Enter your first name" required="" type="text"/>
<br/>
<br/>
<label for="lname">
    Last Name
            </label>
<input id="lname" name="lname" placeholder="Enter your last name" required="" type="text"/>
<br/>
<br/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>

Common Form 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.

Form with Radio button

In this example we creates a form with radio buttons for gender selection. It's properly structured with opening and closing <form> tags, labels, and radio input elements within a centered layout.

index.html

<html>
<body>
<h1>
   Gender Validation
        </h1>
<form action="#" method="post">
<label for="male">
    Male
            </label>
<input id="male" name="gender" type="radio" value="male"/>
<label for="female">
    Female
            </label>
<input id="female" name="gender" type="radio" value="female"/>
<label for="other">
    Other
            </label>
<input id="other" name="gender" type="radio" value="other"/>
<br/>
<br/>
<input type="button" value="Submit"/>
</form>
</body>
</html>

Form with Checkox

The form will display a list of checkboxes with labels. Users can select one or more options and click the Subscribe button to submit their choices.

index.html

<html>
<body>
<h1>
   Newsletter Subscription
        </h1>
<form action="/submit" method="POST">
<p>Select your interests:</p>
<input id="tech" name="interests" type="checkbox" value="Technology"/>
<label for="tech">
    Technology
            </label>
<br/>
<input id="sports" name="interests" type="checkbox" value="Sports"/>
<label for="sports">
    Sports
            </label>
<br/>
<input id="music" name="interests" type="checkbox" value="Music"/>
<label for="music">
    Music
            </label>
<br/>
<input id="movies" name="interests" type="checkbox" value="Movies"/>
<label for="movies">
    Movies
            </label>
<br/>
<br/>
<input type="submit" value="Subscribe"/>
</form>
</body>
</html>

Now you have clear understanding of HTML <form> so you can implement this knowledge to create some interesting components using CSS and JavaScript –

Using CSS

Using JavaScript

HTML abbr Tag

Vishal_Khoda

Improve

Article Tags :

HTML form Tag

Common Form Elements

Attributes

Form with Radio button

Form with Checkox

Using CSS

Using JavaScript

Similar Reads