HTML Tutorial: Complete HTML Tutorial
About Lesson

HTML <form> Tag


The <form> tag is the unsung hero of the web, facilitating countless interactions every day. Whether it’s logging into an email account, filling out job applications, or even entering payment details for online shopping, the <form> tag is at the heart of it all. It acts as a container for various form elements like text fields (<input>), checkboxes, radio buttons, and more, allowing users to submit data to a web server for further processing.

Form Elements

The <form> element can house various types of form controls, including:

  • <input>
  • <textarea>
  • <button>
  • <select>
  • <option>
  • <optgroup>
  • <fieldset>
  • <label>
  • <output>

These elements collectively make up the anatomy of a form, allowing for diverse types of user input.


Example 1: User Registration Form

Imagine you’re building a user registration form for a learning platform like AptLearn. Here’s how you could structure it:

<form action="" method="post">
  <label for="fname">First Name:</label>
  <input type="text" id="fname" name="fname" required>
  <label for="lname">Last Name:</label>
  <input type="text" id="lname" name="lname" required>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>
  <input type="submit" value="Register">

Example 2: Feedback Form

Let’s say AptLearn wants to collect feedback from its users. A form for this could look like:

<form action="" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
  <label for="feedback">Feedback:</label>
  <textarea id="feedback" name="feedback"></textarea>
  <label for="rating">Rating:</label>
  <select id="rating" name="rating">
    <option value="5">Excellent</option>
    <option value="4">Good</option>
    <option value="3">Average</option>
    <option value="2">Poor</option>
    <option value="1">Terrible</option>
  <input type="submit" value="Submit Feedback">

Try it out below:


Attributes Table

Attribute Value(s) Description
accept-charset Character set Defines the character encodings for form submission
action URL Designates the URL to which form data is sent
autocomplete on/off Controls whether the browser should autocomplete the form
enctype Various Determines how form data should be encoded (only for method="post")
method get/post Sets the HTTP method for sending form data
name Text Assigns a name to the form
novalidate novalidate Indicates that the form should skip validation upon submission
rel Various Defines the relationship between the form and the linked resource
target Various Specifies where the server’s response will be displayed

Global Attributes

The <form> tag supports all global attributes in HTML.

Event Attributes

The <form> tag also supports all event attributes in HTML.

Browser Support Table

Browser Support
Chrome Yes
Firefox Yes
Safari Yes
Opera Yes
IE Yes

Default CSS Settings

form {
  display: block;
  margin: 20px 0;


The <form> tag is more than just a container for form controls; it’s the backbone of user interactions on the web. Understanding its attributes and capabilities is crucial for any web developer. With it, you can create anything from simple search boxes to complex multi-page forms with validation.

It’s a versatile element that, when mastered, opens up a world of possibilities for user engagement and data collection.