Form Elements

Form Element Attribute

The attributes associated with the form element determine the forms behavior. The three attributes listed below are valid for the submit and image input types only.

novalidate

This attribute is used when the data entered should not be validated before it is submitted to the server.

method

This attribute specifies the HTTP to be used when submitting the data to the server. There are 3 methods. GET is the default. The form data is appended to the URL address to the server so the data is shown in the URL. For this reason this method should not be used when transmitting sensitive or any personal data. It should be used for only very simple forms. The POST method sends the data in the body of the message so it does not appear in the URL. For this reason it is the most appropriate method to use as sensitive and personal data will remain private. This method also allows complex data and file attachments to be transmitted. The last mentioned method is DIALOG which is used when no data is to be transmitted.

action

Action specifies the action to be performed when the form is submitted. This is usually the URL to which the forms data is sent to.

Form Element - Label

The label element is considered to be the most important for the accessibility of the form. A properly configured label element will allow a click or a tap to activate the input. As the label indicates what data is to be entered, it is important to be clear and concise to avoid confusion to the user.

for and id

A label element is linked with the input element using the for and id attributes. The for and id need to match so when the label is activated the form control it is linked to will be triggered. If they are correctly linked, screenreaders will speak the label and any related instructions correctly in a way that will make sense. It can also provide a larger "click" area. These are two ways to insure the accessibility of the form.

Summary

The form element is a way to interact with users to collect data. The collected data is usually sent on to a server which processes the data. This makes the form element a more complex element which means more than just basic HTML is used to get the most functionality from the form. Therefore there are a large number of form elements and associated attributes. These allow various actions to occur as users interact with the form. These can include validation steps, state changes, return messages and the sending of the data.

It was interesting to learn that early on forms were styled by the browser defaults. Because of that not all elements can be styled with an external CSS stylesheet, and why in the stylesheet the browser defaults may need to be overridden.

Sources I used to research this information include: W3Schools.org, developer.mozilla.org and alistapart.com.