Home Web Development Mastering HTML5 Forms

Mastering HTML5 Forms

By Gaurav Gupta
books-svg-icon Book
eBook $19.99 $13.98
Print $32.99
Subscription $15.99 $10 p/m for three months
$10 p/m for first 3 months. $15.99 p/m after that. Cancel Anytime!
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook + Subscription?
Download this book in EPUB and PDF formats, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with video?
Stream this video
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
What do you get with Exam Trainer?
Flashcards, Mock exams, Exam Tips, Practice Questions
Access these resources with our interactive certification platform
Mobile compatible-Practice whenever, wherever, however you want
BUY NOW $10 p/m for first 3 months. $15.99 p/m after that. Cancel Anytime!
eBook $19.99 $13.98
Print $32.99
Subscription $15.99 $10 p/m for three months
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook + Subscription?
Download this book in EPUB and PDF formats, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with video?
Stream this video
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
What do you get with Exam Trainer?
Flashcards, Mock exams, Exam Tips, Practice Questions
Access these resources with our interactive certification platform
Mobile compatible-Practice whenever, wherever, however you want
About this book
HTML5 has given web developers the ability to easily develop sites and applications which, previously, were extremely time consuming. Now, they can not only build visually stunning forms and web pages, but can also increase the scope of their applications, as well as collect valuable user inputs and data through customized forms. This practical guide will teach you how to create responsive forms, and how to link them to the database. This will enable you to take advantage of the power behind HTML5 elements for building forms, and make the user interfaces attractive and more interactive. Explore the benefits of web forms, and learn how to create them using new HTML5 form elements. This guide will take you through a number of clear, practical examples that will help you to take advantage of the forms built and customized using HTML5 and related technologies, quickly and painlessly. Your ability to build responsive forms will be enhanced throughout the book.You will also learn about the necessity of validations, CSS3 properties for improving the look of the form, and how to link the form to the server. Lastly, you will learn to make the standard forms responsive by making them compatible with desktops and mobile devices.
Publication date:
November 2013
Publisher
Packt
Pages
148
ISBN
9781782164661

 

Chapter 1. Forms and Their Significance

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> elements

  • Building a web form

  • Guidelines to build a web form

 

Understanding web forms


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.

Benefits

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.

 

HTML versus HTML5 forms


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 level

  • Even if scripting is disabled in the browser, users can experience the benefits of HTML5 forms

 

The form <input> types, elements, and attributes


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.

The <form> <input> types

  • date: The date 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-dd

    • min, max: The range in which the smallest and largest dates can be selected

  • datetime: The datetime 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: The datetime-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: The color 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: The number type allows the user to input the numbers in either integer or floating 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:

    • value: The initial value

    • min, max: The range in which the smallest and largest values can be selected with the up/down arrows

    • step: This tells us how much to change the values when we scroll the spinner

  • range: The range 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: The email type allows the user to enter the text in e-mail address format email@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:

    • value: The initial value (a legal e-mail address)

    Using multiple attributes, that is, more than one e-mail ID, is accepted and each attribute is separated by a comma.

  • search: The <input> type search 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: The tel 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 use pattern to do additional validation.

    No browser support till now.

    Syntax:

    <input type= "tel" name= "#">

    Attributes:

    • value: The initial value as a phone number

  • month: The month 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: The time 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: The url 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: The week 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.

The <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 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 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>

Now let us see the new HTML5 <form> attributes.

The <form> attributes

  • autocomplete: The autocomplete attribute allows users to complete the forms based on earlier inputs. We can have an autocomplete on option for the form and an off option for specific input fields or vice versa.

    It works with both the <form> and <input> types such as textbox, datepicker, range, color, url, tel, search, and email.

    It is supported in .

    For example:

    <input type="text" name="city" autocomplete="on">
  • autofocus: When the autofocus 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, and password.

    It is supported in .

    For example:

    <input type="text" name="city">
    <input type="text" name="state" autofocus>
  • placeholder: The placeholder 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, and password.

    It is supported in .

    For example:

    <input type="text" name="name" placeholder="First Name">
  • min and max: The min and max 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, and week.

    It is supported in .

    For example:

    <input type="number" min="1" max="5">
  • list: The list 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: The formnovalidate attribute specifies that the form should not be validated during submission. It overrides the novalidate attribute of the <form>elements.

    It works with the <input> types, submit and image.

    It is supported in .

    For example:

    <input type="email" name="email"><input type="submit" formnovalidate value="Submit">
  • form: The form 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: The formaction attribute specifies the URL of a file or application that will submit the form.

    It works with the <input> types, submit and image.

    It is supported in .

    For example:

    <input type="submit" value="Submit" formaction="form.html">
  • formenctype: The formenctype 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 and image.

    It is supported in .

    For example:

    <input type="submit" value="Submit" formenctype="multipart/form-data">
  • formmethod: The formmethod attribute specifies which HTTP method such as GET, POST, PUT, and DELETE will be used to submit the form data.

    It works with the <input> types, submit and image.

    It is supported in .

    For example:

    <input type="submit" value="Submit" formmethod="post">
  • formtarget: The formtarget attribute specifies the target window to display the response received after submitting the form.

    It works with the <input> types, submit and image.

    It is supported in .

    For example:

    <input type="submit" value="Submit" formtarget="_self">

    Values:

    • blank

    • self

    • parent

    • top

    • framename

  • multiple: The multiple attribute allows users to enter more than one value to the <input> types.

    It works with the <input> types, email and file.

    It is supported in .

    For example:

    <input type= "file" name= "image"multiple>
  • novalidate: The novalidate 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 the step attribute with an example. If step= 2, legal numbers could be 2, 0, 2, 4, and 6.

    It works with the <input> types, number, range, date, datetime, datetime-local, month, time, and week.

    It is supported in .

    For example:

    <input type= "range" name= "#" step= "2">
  • required: The required 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 the pattern attribute, you can declare your own requirements for validation using Regular Expressions (regex).

    It works with the <input> types, text, search, url, tel, email, and password.

    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">
 

Building an HTML5 form


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.

 

Guidelines


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:

  • Improves cross-browser compatibility

  • Increases performance

  • Saves time and reduces cost

  • Project understanding becomes easy

  • Code maintenance becomes easy

 

Summary


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.

About the Author
  • Gaurav Gupta

    Gaurav Gupta is a young and budding IT professional and has a good amount of experience of working on web and cross-platform application development and testing. He is a versatile developer and a tester and is always keen to learn new technologies to be updated in this domain. Passion about his work makes him stand apart from other developers. Even at a relatively early stage of his career, he is a published author of two books, named Mastering HTML5 Forms and Mastering Mobile Test Automation with Packt Publishing. A graduate in computer science, he currently works for a reputed Fortune 500 company and has developed and tested several web and mobile applications for the internal use. Gaurav is a native of Chandigarh, India, and currently lives in Pune, India.

    Browse publications by this author
Mastering HTML5 Forms
Unlock this book and the full library FREE for 7 days
Start now