Mastering HTML5 Forms

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.

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.

Ohioan Jan 27, 2016

I've struggled with web forms, for some reason, so was happy when I ran across this book. Not by accident, as I was looking, for something that gave forms a good treatment on their own and not just as a passing mention as often the case in other books.I particularly liked the section on security and preventing spoofing and cross-site request forgery -- which I had not seen mentioned anywhere before. And given that securing my site is a top priority, this tidbit of knowledge, for me anyway, more than justifies the cost of purchase. But there's lots more.The health related forms provide good examples of form elements in use. And I'm working thru the example code right now to see if I can get working on my own site -- which I then hope to use as a starting point for building the forms I need.Still an introductory test, for sure, but a decent one at that.

Amazon Verified review

Abi Jan 06, 2025

IT IS HELPING BOOK

Subscriber review

Dustin Marx Jan 26, 2014

Mastering HTML5 Forms consists of 5 chapters and about 125 pages of content. The first three chapters introduce and cover the key concepts and syntax of HTML5 forms. The fourth chapter focuses on using PHP and MySQL to store data provided via HTML5 forms in a database. The final chapter introduces responsive web design, covers some key strategies of responsive web design, and discusses using responsive web design to make forms-based applications perform better on devices of different resolutions and capabilities.Although most of Mastering HTML5 Forms is introductory in nature, most of the chapters conclude with lists of guidelines and best practices for further study in each chapter's area. Mastering HTML5 Forms includes several code examples and screen snapshots, though I would have liked to have seen more screen snapshots for all of the various HTML5 elements and input types.HTML5 forms are well covered online, but an advantage of a book devoted to the subject is the ease and convenience of finding this information on HTML5 forms, HTML5 forms validation, HTML5 forms styling, and improving HTML5 forms with responsive web designs can be found in a single location.

Amazon Customer Oct 24, 2016

Not as comprehensive as I'd hoped.

Uwe Jan 12, 2025

It's very basic by showing HTML5 form inputs and ways to style them since it leaves it at mentioning mainly the language features to do so but goes little into depth what works best.

Mastering HTML5 Forms: Create dynamic and responsive web forms with this in - depth, hands-on guide

What do you get with Print?