So far, what we have learned about HTML5 forms is only theoretical, but now it's time to take this learning to the next level. Taking it to the next level means that in this section, we will build a sample form with some understanding of how they are structured and the new <form>
types, which we have already discussed.
Here we will spend less time on styling or functionality such as design and validations but more on the core of the new <form>
types of HTML5. This form is best supported in browsers that support HTML5 features.
In this example, we will build a health survey form.
This example demonstrates a simple form, using basic HTML elements and new <form>
elements, and the code should be self-explanatory.
Now, let us take a look at the code. The following code is the CSS of the form and is maintained in a separate file with a .css
extension (external CSS file), which is linked to the main HTML page. Having a separate CSS file is also a good practice.
The following code is the main HTML page in which we built the structure of the form. The <fieldset>
tags are enclosed within the <form>
tag.
The structure is broken into sections for better understanding. Moreover, the <form>
types are highlighted in bold.
The following is a code snippet for displaying a form for personal information:
Tip
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
The output of the code is as follows:
This section asks the respondents about their personal information such as name, address, and other details. We have used <label>
with descriptive text and tied it to the form control.
We have also used the autofocus
attribute on the first textbox so that an <input>
element automatically gets focus when the page loads. The placeholder
attribute is used several times in the first textbox as First
to give a hint to the respondents of what is required as content. For date of birth, we have used the <input>
type date
, which opens as a calendar.
The basic HTML elements' <input>
types, such as radiobutton
, textbox
, and the drop-down list have also been used.
Similarly, for the phone number field, the <input>
type tel
is used, and for the e-mail address field the <input>
type email
is used.
The following is a code snippet for displaying a general information form:
The output of the code is as follows:
The top section of the form asks the respondents about general information, such as age, weight, height, and other information about their daily routine.
Here, we have used basic HTML <form>
<input>
types, such as textbox
, radiobutton
, and checkbox
along with the new <form>
attributes such as placeholder,
for taking the inputs from the respondent.
The following code snippet displays a form to store medical information:
The output of the code is as follows:
Our final section of the form asks the respondents about their medical information. To get information about various diseases or symptoms a respondent has, we have used the basic HTML <form>
<input>
type checkbox
.
Textarea
is a free text field, which contains detailed text and, in our case, allows the respondent to enter information, such as medication allergies and medication. The rows and columns of the textarea
determine the displayable size of the textarea
text field in the form. We can also set the limit by setting maxlength
to restrict the respondent from entering lengthy details.
radiobutton
is used to restrict the respondent from choosing only one option from multiple options.
With the <input>
type number
, we created a spinner, which is a precise control for selecting the string represented by a number. Here, we have set the limit by setting the min value to 1
and the max value to 5
.
With the <input>
type range
, we created a slider, which is an imprecise control for setting the value to a string representing a number. Here, we have set the limit by setting the min value to 1
and the max value to 5
.
Finally, the <input>
type submit
sends the data to the server.