Forms are one of the most fundamental elements used to send and receive data from one we page to another.
The following tutorial will go through the basics of a HTML form. It is by no means a comprehensive resource on forms, their structure or purpose however it will help to explain some of the more common form elements.
The form tag is used to encapsulate all elements in the active form. This is the parent container and all fields, controls and buttons must reside within these tags.
The attributes you should include are:
id: Unique ID for the element on the page
name: Name of the form element
method: Submission type (POST | GET)
action: the page that will process the data being submitted
There are other attributes however these four should always be included.
The <fieldset> tag
<fieldset></fieldset>
The Fieldset is a container used to group similar form fields. This is not a compulsory element.
The <legend> tag
Within the fieldset tag lies the legend tag. This acts as a label for the fieldset and its contents.
The label tag is used to attach a text label with a form input element. The label tag can be used in a couple of different ways.
You can wrap the field and label name inside the label tag
or you can use the ‘for’ attribute to attach the label to the field without it needing to be nested. The value of the ‘for’ attribute must match the value of the ‘name’ attribute for the form field you want the label attached to.
The ‘input’ tag has a number of attributes. The following should always be included:
type: Type of input field (text | email | tel | number | checkbox | radio | submit | reset | button)
id: Unique ID for the element on the page
name: Name of the form element
value: Default value of the input field
More on input types:
There are many ‘types’ of input fields that can be used depending on the information you wish to present.
(button, checkbox, color, date, datetime, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week)
This section only covers a few of the basics. Many of these types are new to HTML5 and may not be supported in older browsers.
The ‘text’, ’email’, ‘tel’, ‘number’ types are all free text input fields. Later browsers that support the newer HTML5 field types (email, tel, number) expect specific types of input. Some browsers will also perform basic validation on these data types. Older browsers that do not support these new fields will typically render the field as a plain text input.
The ‘radio’ type is used for radio buttons where the user can only pick one option from a pre-defined list. If nothing is selected, no data is sent to the server.
The ‘name’ attribute of the checkbox is a little different. by adding the square brackets [] to the end of the filed name, it allows us to easily access the values later.
The ‘submit’ and ‘reset’ types are special button types for html forms that perform specific functions (as named).
The ‘button’ type is a clickable button and is often used in conjunction with Javascript.
The <select> tag
The ‘select’ tag is used for single and multiple select lists.
The ‘option’ tag is is used for individual elements within a select list and must be nested within the select element. Each option tag needs to have a unique ‘value’ attribute. The value attribute is the content that is sent when the form is submitted.