HTML forms are used to collect information from users in many different ways and are found on almost every website. They collect items such as names, emails, messages, selections, or login information. When building a form, the form element acts as the container for the form controls and can include attributes that control how the form behaves when submitted.
Form Elements Attributes - novalidate, method and action
Some of the form element attributes include novalidate, method, and action. The action attribute tells the browser where to send the form data after the user submits the form. This typically consists of a server URL that processes the information after submission. The method attribute tells the browser how to send the data. There are two main methods: get and post. get, which is the default method, sends the data through the URL and is useful for non-sensitive information. post sends the data in the request body, making it better for longer or more sensitive submissions. The novalidate attribute tells the browser not to run built-in form validation when the form is submitted. This is useful if you want to handle validation using JavaScript instead.
Form Elements - fieldset and legend
The fieldset element is used to group several form controls and their associated labels together. This is helpful for organizing a form into sections, such as personal information, shipping information, or payment details. The legend element provides a caption or title for the fieldset so users can understand what that group of form fields represents.
Form Element - label
The label element is a caption used to describe a form control for things like input boxes, checkboxes, and dropdown menus. Labels are important because they make forms easier to understand and more accessible. When a label is connected to an input, such as a checkbox, users can click the label text to activate the form field. Labels are also essential for users who rely on assistive technology, as screen readers will read the label to help users understand what information should be entered.
Form Element - for and id
To support assistive technology, the for and id attributes work together to connect a label to a specific form control. First, you add the id attribute to the input, giving it a unique value. Then, you add the for attribute to the label and use the same value. This links the label and input together and provides maximum compatibility with assistive technologies. Screen readers use this connection to announce the correct label when a user focuses on a form field. Without this connection, users may not know what information the form requires. It also creates a larger clickable area, which is helpful for users with motor impairments and improves usability on mobile devices, especially for radio buttons and checkboxes.
Summary
Overall, HTML form elements and attributes help create forms that are organized and accessible. The action, method, and novalidate attributes control how the form submits and validates data. The fieldset and legend elements help group related form fields, while the label element makes the fields easier to understand. Using for and id correctly connects labels to inputs, helping make forms more accessible for everyone.