In this lesson, we will have a look at how to add different forms to a page.
The form element
Forms make it possible to get user input. They are used on eg. contact and registration pages, and to create newsletter sign-ups, search fields and login.
With HTML alone it is not possible to do anything with the data that the user sends - that part is mostly taken care of backend - but we can insert the forms so that they are ready to be dealt with backend.
Any type of form is inserted into the form element:
The action attribute is used to specify where the formdata is to be sent. Since we're not going to go backend at this point, we will just leave it the way it is.
The form element can contain a number of different elements. We will now have a look at some of them.
The input element
There are a number of different types of input fields. One of them is the type text:
input type="text" and input type="submit"
Surrounding all the different form subelements, we have the form element.
The label is added for best accesibility practices. The for attribute is used to connect the label to the input field with that same id value.
In the input element, the type attribute tells the browser what type of content is expected. In most cases, the text value is used. The value of the name attribute is used in relation to the backend-programming and so the value should relate to the expected input value of the form.
The last input element, the one with type="submit", defines a submit button that is used to submit all form values to a form-handler. As stated, this type of input field is rendered as a button.
Using the email value, a different kind of validation takes place - in this field it is eg. required that an @ is present - otherwise it will return an error:
Try filling in the input field with just a name, not and email, and click the Submit button to see what happens.
Yet another input type is password. By using this type, the characters inserted by the user will get masked:
Try entering some different characters in the form to see the difference.
As the name implies, the input with type="search" is used in connection with search fields:
Checkboxes let the user select one or more options of a limited number of choices.
If you want the user to only choose one option, go for radio buttons instead:
Notice that the name value is the same for both options (and it has to be - otherwise it is not one or the other)
The color type lets the user choose a color.
Be aware that the color type is not supported in neither Internet Explorer 11 nor Safari 9.1 (or any previous versions).
The date type lets the user pick a date in a calendar:
Be aware that the date type is not supported in neither Internet Explorer 11 (or any previous versions) nor Safari.
The textarea element
If you want to give the user the opportunity to write a longer message or note, use the textarea element instead of the input element:
Notice that the textarea element is not an empty element (one that does not have an end tag) - this one actually has an end tag unlike the input element.
Other form subelements
There are a lot of other form subelements, but I'm not going to include them at this point. If you want to see the list and look at some other examples, here's a list of references: