<form>

Definition

The HTML <form> element is used to create an interactive form on a web page. The form element contains various types of form elements, such as text fields, radio buttons, checkboxes, buttons, etc., that allow users to input data and interact with the website.

The form element has several attributes, including action, method, target, and enctype. The action attribute specifies the URL to which the form data is sent, the method attribute specifies the HTTP method to be used to submit the form data (usually either "GET" or "POST"), the target attribute specifies where to display the response that is received after submitting the form, and the enctype attribute specifies the encoding type to be used when submitting the form data.

Examples

Here's an example of a simple HTML form:

<form action="/submit-form" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>

  <label for="message">Message:</label>
  <textarea id="message" name="message"></textarea><br><br>

  <input type="submit" value="Submit">
</form>

This form has three input fields: name, email, and message, and a submit button. When the user submits the form, the data will be sent to the server using the HTTP POST method.

Attributes

This element's attributes include the global attributes.

Best Practices

• Use the "get" method when the form is used for retrieving data, and use the "post" method when the form is used for submitting data that will modify server-side data.
• Use <label> elements to provide clear and concise labels for form fields. The label should be associated with the input field using the for attribute.
• Use appropriate input types for each field. For example, use type="email" for email fields, type="tel" for telephone numbers, etc.
• Use JavaScript or server-side validation to ensure that the user input is valid and secure.
• Provide clear feedback to users after the form is submitted, such as a success or error message.
• Use semantic HTML elements and attributes to improve the accessibility and usability of the form.
• Use progressive enhancement to ensure that the form is usable and accessible even if JavaScript is disabled or not supported.
• Keep forms as simple as possible, with only the necessary fields and labels. Long and complicated forms can be overwhelming to users and may discourage them from submitting the form.
• Test the form thoroughly to ensure that it works as expected in all supported browsers and devices.

Accessibility Considerations

• Use <label> elements to provide clear and concise labels for form fields. The label should be associated with the input field using the for attribute. This makes it easier for screen reader users to understand the purpose of each form field.
• Use appropriate input types for each field. For example, use type="email" for email fields, type="tel" for telephone numbers, etc. This helps assistive technologies to provide appropriate input methods and context for the user.
• Use semantic HTML elements and attributes to improve the accessibility and usability of the form. For example, use <fieldset> and <legend> elements to group related form fields and provide a description for the group.
• Ensure that the form can be navigated using only the keyboard. This means that all form controls should be accessible using the tab key, and that the form can be submitted using the enter key.
• Provide clear feedback to users after the form is submitted, such as a success or error message. This helps all users to understand the outcome of the form submission.
• Use ARIA attributes to provide additional context and information for screen reader users. For example, use aria-describedby to provide a description for a form field.

Browser Compatibility