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.
html {
background-color: #333;
margin: 0px;
padding: 0px;
}
body {
font-size:12px;
width: 517px;
padding: 20px;
margin: 10px auto;
background-color: #eee;
font-family: Helvetica, Arial, sans-serif;
color: #333;
}
label{
font-weight:bold;
}
/* General Form */
.heading{
font-size:20px;
}
.gender{
position:relative;
top:-42px;
left:185px;
}
.selectOption{
width:239px;
}
.textboxAddress{
width:474px;
}
.textboxAddressDetail{
width:232px;
}
.legend{
font-weight:bold;
font-size:14px;
}
.submit{
text-align:center;
}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:
<fieldset>
<legend class="legend">Personal Information</legend>
<div>
<label for="name">Name</label><br>
<input type="text" placeholder="First" autofocus>
<input type="text" placeholder="Last">
</div><br>
<div>
<label for="dob">Date of Birth</label><br>
<input type="date" value="">
</div>
<div class="gender">
<label for="gender">Gender</label><br>
<input type="radio" name="gender"><label>Male</label>
<input type="radio" name="gender"><label>Female</label>
</div><br>
<div>
<label for="address">Address</label><br>
<input type="text" class="textboxAddress" placeholder="Street Address"><br>
<input type="text" class="textboxAddress" placeholder="Address Line 2"><br>
<input type="text" class="textboxAddressDetail" placeholder="City">
<input type="text" class="textboxAddressDetail" placeholder="State/Province"><br>
<input type="text" class="textboxAddressDetail" placeholder="Pincode">
<select class="selectOption">
<option value="Country">Select Country</option>
</select>
</div><br>
<div>
<label for="contact">Phone Number</label><br>
<input type="tel" class="textboxAddressDetail" placeholder="Home">
<input type="tel" class="textboxAddressDetail" placeholder="Work">
</div><br>
<div>
<label for="email">Email Address</label><br>
<input type="email" class="textboxAddressDetail" placeholder="[email protected]">
</div>
</fieldset>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:
<fieldset>
<legend class="legend">General Information</legend>
<div>
<label for="info">What is your</label><br>
<input type="text" placeholder="Age?">
<input type="text" placeholder="Weight?">
<input type="text" placeholder="Height?">
</div><br>
<div>
<label for="exerciceinfo">Do you regularly engage in any of the following exercises?</label><br>
<div><input type="checkbox" name="smoke"><label>Walking</label><br>
<input type="checkbox" name="smoke"><label>Running</label></div>
<div><input type="checkbox" name="smoke"><label>Swimming</label><br>
<input type="checkbox" name="smoke"><label>Biking</label></div>
<div><input type="checkbox" name="smoke"><label>Others</label><br>
<input type="checkbox" name="smoke"><label>I don't exercise</label></div>
</div><br>
<div>
<label for="sleep">On average, how many hours a day do you sleep?</label><br>
<input type="number" class="textboxAddressDetail">
</div><br>
<div>
<label for="smoking">Have you ever smoked cigarettes, pipes or cigars?</label><br>
<input type="radio" name="smoke"><label>Yes</label>
<input type="radio" name="smoke"><label>No</label>
</div><br>
<div>
<label for="drugs">Are you currently using or do you have a history of illegal drug use?</label><br>
<input type="radio" name="drugs"><label>Yes</label>
<input type="radio" name="drugs"><label>No</label>
</div><br>
<div>
<label for="alcohol">Do you consume alcohol?</label><br>
<input type="radio" name="alcohol"><label>Yes</label>
<input type="radio" name="alcohol"><label>No</label>
</div>
</fieldset>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:
<fieldset>
<legend class="legend">Medical Information</legend>
<div>
<label for= "disease">Check all that apply to you or your immediate family?</label><br>
<input type="checkbox" name="disease"><label>Asthma</label><br>
<input type="checkbox" name="disease"><label>Cancer</label><br>
<input type="checkbox" name="disease"><label>HIV and AIDS</label><br>
<input type="checkbox" name="disease"><label>Diabetes</label><br>
<input type="checkbox" name="disease"><label>Hypertension</label><br>
<input type="checkbox" name="disease"><label>Malaria</label><br>
<input type="checkbox" name="disease"><label>Seizure Disorder</label><br>
<input type="checkbox" name="disease"><label>Psychiatric Disorders</label><br>
<input type="checkbox" name="disease"><label>Mental Health</label><br>
<input type="checkbox" name="disease"><label>Stroke</label><br>
<input type="checkbox" name="disease"><label>Others</label><br>
<input type="checkbox" name="disease"><label>Not Applicable</label>
</div><br>
<div>
<label for= "symptons">Checkall symptoms you are currently experiencing</label><br>
<input type="checkbox" name="symptoms"><label>Allergy</label><br>
<input type="checkbox" name="symptoms"><label>Eye</label><br>
<input type="checkbox" name="symptoms"><label>Lymphatic</label><br>
<input type="checkbox" name="symptoms"><label>Fever</label><br>
<input type="checkbox" name="symptoms"><label>Eating Disorder</label><br>
<input type="checkbox" name="symptoms"><label>Hemtalogical</label><br>
<input type="checkbox" name="symptoms"><label>Musculoskeletal Pain</label><br>
<input type="checkbox" name="symptoms"><label>Skin</label><br>
<input type="checkbox" name="symptoms"><label>Gastrointestinal</label><br>
<input type="checkbox" name="symptoms"><label>Weight Loss</label><br>
<input type="checkbox" name="symptoms"><label>Others</label><br>
<input type="checkbox" name="symptoms"><label>Not Applicable</label>
</div><br>
<div>
<label for="allergy">Please list any medication allergies that you have</label><br>
<textarea name="allergy" rows="4" cols="57">
</textarea>
</div><br>
<div>
<label for="medications">Please list any medications you are currently taking</label><br>
<textarea name= "medications" rows="4" cols="57">
</textarea>
</div><br>
<div>
<label for="pregnancy">If you are a woman, are you currently pregnant, or is there a possibility that you are pregnant?</label><br>
<input type="radio" name="pregnancy"><label>Yes</label>
<input type="radio" name="pregnancy"><label>No</label>
<input type="radio" name="pregnancy"><label>Not Applicable</label>
</div><br>
<div>
<label for="healthrating">In general, would you say your health is</label><br>
* Taking 1 to be poor and 5 to be excellent<br>
<input type="number" name="healthrating" min="1" max="5">
</div><br>
<label for="ratinghealth">When you think about your health care, how much do you agree or disagree with this statement: "I receive exactly what I want and need exactly when and how I want and need it."</label><br>
* Taking 1 to be strongly dis-agree and 5 to be strongly agree<br>
1<input type="range" name="ratinghealth" min="1" max="5">5
</div>
</fieldset>
<div class="submit">
<input type="submit" value="Submit">
</div>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.