Form Element Attributes: novalidate, method, and action
The NOVALIDATE attribute is a Boolean value utilized if the developer does not want the browser to make sure the responses in the form are in a valid form. It will override the inputs with the required attribute as well. It is included in the form tag only. This might be used if a developer is doing their own client-side validation.
The METHOD attribute provides information on how to send a form. There are two values: GET and POST. The GET value places the form data into the URL. This can be helpful when submitting a search query or in general wanting to bookmark responses to a form. However, this is not the method chosen for sensitive data, and URL lengths are limited to 3000 characters. The POST value instead places the form data into the HTTP request and is not seen in the URL. This is the preferred route for any sensitive data shared within a form, or if there is a significant amount of information as there is no character limit.
The ACTION attribute is the URL that processes the form submission and directs where the data from the form submission should be sent. The URL can be an absolute URL or a relative URL.
Form Elements: fieldset and legend
The FIELDSET element groups related elements, such as labels and controls, within a web form. It creates a box around the elements within it. It allows for additional CSS styling. The LEGEND element provides a caption for its parent element, the FIELDSET element.
Form Element: label
The LABEL element provides a label for a variety of input elements and other form elements. Elements that LABEL can be used for are: button, input, meter, output, progress, select, and textarea. This element is critical to use for A11Y reasons as screen readers will read the label out loud when focused on the element. Additionally, when a user clicks on the text within the label, it enlarges the input increasing the ability to hit the area with a finger or other tool. This is important for a user that may struggle to click on smaller objects on a screen, such as a checkbox or radio button.
A critical piece in using the LABEL element is to also include the ID and FOR attributes, which bind the LABEL element to the related element, such as the form. The FOR attribute is located within the LABEL element, and the ID attribute is located in the input element the label is for. The ID and FOR must have the same name or value, otherwise the LABEL element will not work and will not provide the A11y that is needed.
Summary of Documentation
Not too many people know how much work goes into making a web form! Learning about the elements and attributes of building a form, both in lecture and through this documentation, reminds me of the energy and time it takes! A user simply enters information, submits, and poof! Off it goes! I appreciated doing this research as I was still a bit lost on using the element label after web coding, and between the lecture and this documentation I feel like I have a better grasp of it! I still have much curiosity about the mysterious post URL we always submit a form too, but I imagine I will learn about that in this program one day!