Creating HTML Forms with the `<form>` Element: A Comprehensive Guide

Learn how to build effective and user-friendly HTML forms using the `<form>` element. This tutorial covers form structure, essential attributes (`action`, `method`, `enctype`), common input types (`text`, `radio`, `checkbox`, etc.), and best practices for creating accessible and functional web forms.

Creating HTML Forms with the `<form>` Element

Understanding the `<form>` Element

The HTML `<form>` element is a fundamental tool for creating interactive web forms that allow users to input data. This data is commonly sent to a server for processing. Form data is typically submitted to a server-side script using either the GET or POST HTTP method. The `<form>` element acts as a container for various input elements (`<input>`, `<textarea>`, `<select>`, etc.) that collect user input.

Key Attributes of the `<form>` Element

Several attributes control the `<form>` element's behavior:

Attribute	Description
`accept-charset`	Specifies the character encodings accepted for form submission.
`action`	Specifies the URL where form data is submitted (usually a server-side script).
`autocomplete`	Enables or disables browser autocompletion of form fields.
`enctype`	Specifies how form data is encoded (for POST method only).
`method`	Specifies the HTTP method for submission (GET or POST).
`name`	Provides a name for the form (used for referencing it).
`novalidate`	Disables HTML5 form validation.
`target`	Specifies where to display the response after submission (e.g., `_blank` for a new tab, `_self` for the same window, etc.).
`rel`	Defines the relationship between the form and the current document (e.g., for SEO).

The `<form>` element also supports standard HTML global and event attributes.

Example Forms

Here are examples of simple forms using different input types:

Example: Basic Text Input Form


<form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname"><br>
  <input type="submit">
</form>

Example: Form with Checkboxes


<form>
  <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car"> I have a car<br>
</form>

Example: Form with Radio Buttons


<form>
  <input type="radio" name="fav_language" value="HTML"> HTML<br>
  <input type="radio" name="fav_language" value="CSS"> CSS<br>
</form>