HTML <form> Tag

Concept

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.

Implementation

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="https://www.aptlearn.io/register" 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">
</form>

Example 2: Feedback Form

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

<form action="https://www.aptlearn.io/feedback" 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>
  </select>
  
  <input type="submit" value="Submit Feedback">
</form>

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;
}

Conclusion

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.