Using forms in a web page is the most effective way to gather relevant data from the user. Forms are how users really interact with the application whether it's a search form, a login screen, or a multipage registration wizard. Forms can have inputs such as name, gender, credit card number, password, images, or upload files into the forms.
In this chapter we will cover the following topics:
Web forms and their benefits
The new HTML5
<form>
elementsBuilding a web form
Guidelines to build a web form
Before we start learning about HTML5 forms, let us understand what a web form is.
Forms on a web page provide an interface where information can be shared between a client and a user more easily and securely in comparison to paper-based forms. They are a collection of various <input>
types, such as textbox
, radiobutton
, and checkbox
, which allow users to perform various actions and simplifies decision making.
Forms have always been a fundamental part of the Web. Without them, various web transactions, discussions, and efficient searches would simply not be possible. Web-based forms are supported in most browsers and can be used to give feedback after purchasing a product, retrieve search results from a search engine, contact for any service, and much more.
With a simple example, let us understand what a web form is. Say you once went to a hospital and the receptionist gave you a printed form to fill out. You would have come across many fields that collect information about a patient. Some of them asked you to write the patient's name and address in what looked like a textbox or a text area, and other details such as type of room and so on; you were also asked to choose one or multiple radio buttons or checkboxes from the options. The same concept follows for HTML5 forms. You have to fill out the fields of that form and press a button to send this information to the server, rather than going to the hospital and handing the form over to the receptionist.
Forms in web pages offer plenty of advantages over paper-based forms. Apart from being used to gather data online, web forms offer convenience and speed for both the user and the form owner.
Some advantages of web forms are:
Online forms help the customers to talk to the companies as they contain digitally stored data and deduce that data to meaningful information
The form owners can quickly build and distribute the HTML5 interface, targeting a large audience
The form owner can easily update and modify forms as needed
The Cascading Style Sheets (CSS) and JavaScript attributes allow authors to customize form controls with specific styles and functions
Web forms are time saving and cost effective as they require no manpower to gather information
They provide a visibility for decision making, for example, shopping online on websites such as eBay
As the data is entered directly by the customer,it can be easily sorted to get the required information
Even if forms have many benefits, building them is not the nicest job and can become a headache as some forms can get very complicated if we talk about validation, error handling, and styling. We either validate or catch the errors using a server-side language or we use JavaScript, or even both. Whichever the case, the web forms can take up a lot of your development time and this can be a problem. With HTML5, however, some of this pain has been taken away by the introduction of the new <form>
types, which we can use.
In spite of many enhancements in HTML5, some things are kept the same such as:
Forms still send the values to the server when the user clicks on the Submit button
Forms are still enclosed in the
<form>
element, as shown in the following code snippet:<form action= "#"> <input type= "text" name= "emailaddress"> <input type= "submit" name= "submit"> </form>
Form controls are still fully scriptable
However, for the HTML5 forms, there is no need to enclose the <form>
controls in the <form>
element.
An HTML5 form provides two major advantages over previous versions. They are:
Tedious scripting and styling of forms that was required in earlier versions of HTML was removed because HTML5's new
<form>
types and inbuilt validations takes semantic markup to the next levelEven if scripting is disabled in the browser, users can experience the benefits of HTML5 forms
The HTML5 forms focus on enhancing the existing simple HTML forms to encompass more types of controls and address the limitations that web developers face today. One of the best things about them is that you can use almost all the new input types, elements, and attributes right now and the HTML5 forms are fully backward compatible. The browser, which supports the new HTML5 elements, enhances their features, otherwise the browser, which does not support it, displays them as a textbox.
In this section, we will learn the new HTML5 <form>
elements, such as the <input>
types, elements, and attributes that are introduced to enhance the capabilities of forms.
date
: Thedate
type allows the user to select a date with no time zone.It is supported in
.
Syntax:
<input type= "date" name= "#">
Attributes:
value
: The initial value. The format is yyyy-mm-ddmin
,max
: The range in which the smallest and largest dates can be selected
datetime
: Thedatetime
type allows the user to select a date and a time with the time zone set to UTC.The format is yyyy-mm-dd HH:MM.
It is supported in
.
Syntax:
<input type= "datetime" name= "#">
datetime-local
: Thedatetime-local
type allows the user to select a date and time with no time zone. The format used is yyyy-mm-dd HH:MM.It is supported in
.
Syntax:
<input type= "datetime-local" name= "#">
color
: Thecolor
type results in opening a color chooser pop up and is used to choose a color of the<input>
type#rrggbb
(hex value). It could be represented by a swatch or a wheel picker.The value chosen must be a valid simple color's hex value such as
#ffffff
.It is supported in
.
Syntax:
<input type= "color" id= "#"name= "#">
Attributes:
value
: The initial value
number
: Thenumber
type allows the user to input the numbers in eitherinteger
orfloating point
.It is also called a spinner.
We can set restrictions on what numbers are accepted.
It is supported in
.
Syntax:
<input type= "number" name= "#">
Attributes:
range
: Therange
type allows the user to input the numbers in either integer or floating point from a range of numbers. It is displayed in the form of a slider.Using this, the exact value is not shown unless you use JavaScript, so use
<input type="number" />
if you want the user to choose an exact value.We can set restrictions on what numbers are accepted.
It is supported in
.
Syntax:
<input type= "range" name= "#">
Attributes:
value
: The initial value. The default value is the mid of the slider.min
,max
: The range in which the smallest and largest values can be selected. The default for min is 0 and max is 100.step
: This tells us how much to change the values when we scroll the spinner. The default is 1.
email
: Theemail
type allows the user to enter the text in e-mail address formatemail@example.com
.The entered text is automatically validated when clicked on the Submit button.
If multiple attributes are specified, multiple e-mail addresses can be entered, separated by commas.
It is supported in
.
Syntax:
<input type= "email" name= "#">
Attributes:
Using multiple attributes, that is, more than one e-mail ID, is accepted and each attribute is separated by a comma.
search
: The<input>
typesearch
allows the user to enter text that the user wants to search for.A search field behaves like a standard text field and has inbuilt clear text functionality, such as the cross button in WebKit browsers.
It is supported in
.
Syntax:
<input type= "search" name= "#">
Attributes:
value
: The initial value
tel
: Thetel
type allows the user to input a telephone number.tel
does not provide any default syntax, so if you want to ensure a particular format, you can usepattern
to do additional validation.No browser support till now.
Syntax:
<input type= "tel" name= "#">
Attributes:
value
: The initial value as a phone number
month
: Themonth
type allows the user to select a month and a year with no time zone.It is supported in
.
Syntax:
<input type= "month" name= "#" >
Attributes:
value
: The initial value. The format is yyyy-mm.min
,max
: The range in which the smallest and largest values can be selected.
time
: Thetime
type allows the user to select a time value with hour, minutes, seconds, and fractional seconds with no time zone.It is supported in
.
Syntax:
<input type= "time" name= "#">
url
: Theurl
type allows the user to input an absolute URL.The entered text is automatically validated when clicked on the Submit button.
It is supported in
.
Syntax:
<input type= "url" name= "#" >
Attributes:
value
: The initial value as an absolute URL
week
: Theweek
type allows the user to select a week and a year with no time zone.It is supported in
.
Syntax:
<input type= "week" name= "#">
Attributes:
value
: The initial value. The format is yyyy-mmW.
So far we have learned about the various <input>
types. Now let's see the new HTML5 <form>
elements.
<datalist>
: The<datalist>
element provides a list of predefined options for form controls to the user as they input data. It is used to provide anautocomplete
feature on the<form>
elements.For instance, if a user enters some text in a text field, a list would drop down with prefilled values that they could choose from.
It is supported in
.
For example:
<input list= "browsers" name= "browser"> <datalist id= "browsers"> <option value= "Internet Explorer"> <option value= "Firefox"> </datalist>
<keygen>
: The<keygen>
element is used to provide a secure way to authenticate users.When the form is submitted, the private key is stored in the local keystore and the public key is packaged and sent to the server.
It is supported in
.
For example:
<form action= "keygen.html" method= "get"><input type= "text" name= "username"><keygen name= "security"><input type= "submit"> </form>
<output>
: The<output>
element represents the result of a calculation performed like the one performed by scripts.It is supported in
.
For example:
<form onsubmit="return false" oninput="o.value=parseInt(a.value)+parseInt(b.value)"><input name="a" type="number" step="any">+<input name="b" type="number" step= "any"> =<output name="o"></output></form>
autocomplete
: Theautocomplete
attribute allows users to complete the forms based on earlier inputs. We can have an autocompleteon
option for the form and anoff
option for specific input fields or vice versa.It works with both the
<form>
and<input>
types such astextbox
,datepicker
,range
,color
,url
,tel
,search
, andemail
.It is supported in
.
For example:
<input type="text" name="city" autocomplete="on">
autofocus
: When theautofocus
attribute is added, an<input>
type automatically gets focus when the page loads.For instance, when we open the Google home page or any search engine, the focus automatically goes to the textbox where a user enters the text to perform a search.
It works with the
<input>
types,textbox
,search
,url
,email
,tel
, andpassword
.It is supported in
.
For example:
<input type="text" name="city"> <input type="text" name="state" autofocus>
placeholder
: Theplaceholder
attribute gives users a hint that describes the expected value of an<input>
field.It disappears when the control is clicked on or gains focus.
It should be used only for short descriptions or else use the
title
attribute.It works with the
<input>
types,textbox
,search
,url
,email
,tel
, andpassword
.It is supported in
.
For example:
<input type="text" name="name" placeholder="First Name">
min
andmax
: Themin
andmax
attributes are used to specify the minimum and maximum value to an<input>
type.It works with the
<input>
types,number
,range
,date
,datetime
,datetime-local
,month
,time
, andweek
.It is supported in
.
For example:
<input type="number" min="1" max="5">
list
: Thelist
attribute refers to a<datalist>
element that contains predefined options for an<input>
element.It is used to provide an
autocomplete
feature on the<form>
elements.For instance, if a user enters some text in a text field, a list would drop down with prefilled values from which they could choose.
It works with the
<input>
types,textbox
,search
,url
,email
,tel
.It is supported in
.
For example:
<input list= "browsers" name= "browser"> <datalist id= "browsers"> <option value= "Internet Explorer"> <option value= "Firefox"> </datalist>
formnovalidate
: Theformnovalidate
attribute specifies that the form should not be validated during submission. It overrides thenovalidate
attribute of the<form>
elements.It works with the
<input>
types,submit
andimage
.It is supported in
.
For example:
<input type="email" name="email"><input type="submit" formnovalidate value="Submit">
form
: Theform
attribute specifies one or more forms that an<input>
type belongs to, or in other words, it allows the users to associate any orphaned form control with any<form>
element on the page.It is supported in
.
For example:
<body> <form action="form.html" id="form1"><input type="text" name="fname"><br><input type="submit" value="Submit"></form> <p>The "Last name" field below is outside the form element, but it is still a part of the form</p> <input type="text" name="lname" form="form1"> </body>
formaction
: Theformaction
attribute specifies the URL of a file or application that will submit the form.It works with the
<input>
types,submit
andimage
.It is supported in
.
For example:
<input type="submit" value="Submit" formaction="form.html">
formenctype
: Theformenctype
attribute specifies how the form data is encoded when submitting to the server.It works with the
post
method only.It works with the
<input>
types,submit
andimage
.It is supported in
.
For example:
<input type="submit" value="Submit" formenctype="multipart/form-data">
formmethod
: Theformmethod
attribute specifies which HTTP method such asGET
,POST
,PUT
, andDELETE
will be used to submit the form data.It works with the
<input>
types,submit
andimage
.It is supported in
.
For example:
<input type="submit" value="Submit" formmethod="post">
formtarget
: Theformtarget
attribute specifies the target window to display the response received after submitting the form.It works with the
<input>
types,submit
andimage
.It is supported in
.
For example:
<input type="submit" value="Submit" formtarget="_self">
Values:
blank
self
parent
top
framename
multiple
: Themultiple
attribute allows users to enter more than one value to the<input>
types.It works with the
<input>
types,email
andfile
.It is supported in
.
For example:
<input type= "file" name= "image"multiple>
novalidate
: Thenovalidate
attribute specifies that the form should not be validated when the Submit button is clicked.It is supported in
.
For example:
<form action= "form.html" novalidate> <input type= "text" name= "city"> <input type= "text" name= "state" autofocus> </form>
step
: Let us understand thestep
attribute with an example. Ifstep=
2
, legal numbers could be2
,0
,2
,4
, and6
.It works with the
<input>
types,number
,range
,date
,datetime
,datetime-local
,month
,time
, andweek
.It is supported in
.
For example:
<input type= "range" name= "#" step= "2">
required
: Therequired
attribute, when added, enforces that an input field must be filled out before submitting the form.Currently, the error messages are specific to the browsers and cannot be controlled by the CSS.
It replaces the basic
<form>
validations that were implemented with JavaScript, thus saving development time.It is supported in
.
For example:
<input type= "text" name= "city"required>
pattern
: Using thepattern
attribute, you can declare your own requirements for validation usingRegular Expressions
(regex
).It works with the
<input>
types,text
,search
,url
,tel
,email
, andpassword
.In case, the value entered by a user does not match the pattern, it will display a browser generic message.
It is supported in
.
For example:
<input type= "text" name= "country_code" pattern= "[A-Za-z]{3}" placeholder= "Three letter country code">
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@example.com"> </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.
A good practice or guideline is to design and develop a standard approach, which has always shown better results.
Some of the best practices to create effective forms are as follows:
Use relevant content groupings to organize forms
Minimize the amount of help and tips required to fill out a form
Employ flexible data entry
For long forms, show progress and save options
Maintain a consistent approach
Maintain a clear relationship between the initial selection options
Use inline validation of inputs that have potentially high error rates
Provide actionable remedies to correct errors
Disable the Submit button after a user clicks on it to avoid multiple submissions
Clearly communicate about the submission of data and provide feedback
Maintain separate files for CSS and JavaScript
Using best practices:
In this chapter, we learned about forms and the benefits of using them. We have seen the difference between basic HTML forms and HTML5 forms.
We learned about the new <form>
controls, date
, week
, tel
, email
, range
, numbers
, and many more for which we do not have to rely on JavaScript and how they work in the modern browsers.
We also built a sample form to get well versed with the forms and at the end of the chapter we learned the best practices to create effective web forms.
Overall, we've seen ways to reduce the amount of scripting and development time when users need to create full-featured forms with the help of HTML5.