HTML-5 Recipes

AutoFocus Attribute

Automatically selects a form input element.

AutoComplete Attribute

Automatically fills in form input elements.

CSS Styling for Form Fields

Sets a background color for valid, invalid & required fields which will change on input.

The Placeholder Attribute

Displays placeholder text in an input control that suggests to the user the kind of input the control is looking for.

The Pattern Attribute

Constraining form field data with a regular expression using the pattern attribute

The NoValidate Attribute

Used to override validation scripts or attributes when a user is given the option to save a form prior to submission.

The 'Required' Attribute

Indicates to the browser that the form field must be given a value before the form can be submitted.

Using the text selection APIs

Use the Text Selection APIs to select ranges of text in <input> and <textarea> fields.

Designating a Search Field

(Text from Lynda.Com HTML5 Tutorials)
The search input type indicates that the field is used for performing searches. Now this does not necessarily result in a different visual appearance, although some browsers might choose to do that, and some platforms may distinguish between regular text fields and searches.
Usage is really simple. You just simply say input type= "search" and it functions as a regular text box.
In today's browsers, at least the ones that don't support it yet, this will fall back to being a regular text field. However, if you have script code that somehow dresses up search fields or if the browser does it for you then they will receive a different appearance, and in the future browsers may choose to provide additional features for search fields, such as remembering previous searches and narrowing down search choices as you type and so on. So it's a good idea to start using these right now.

<input type="search">

Screening Email Address Syntax

(Text from Lynda.Com HTML5 Tutorials)
The email input type is one of the input types supported by HTML5 web forms and it indicates that the field is supposed to be used for email addresses. To use it, it's pretty simple.
You simply say input type="email" and on browsers that validate form input and support the email field, this will take care of email address validation for you. On platforms like mobile that provide customized keyboards for certain types of data like email addresses, this input type will change the virtual on-screen keyboard to be optimized for email entry.
So platforms for example like WebKit or other browsers that support this, when they see an input type and it has an email, if they provide a specialized keyboard for email entry, it will cause this keyboard to show instead of the standard one.

<input type="email">

Building a web address field

(Text from Lynda.Com HTML5 Tutorials)
The URL input type is another one of these specialized input types that HTML5 forms provide a support for and in this case, it's looking for a web address in the field. Again, the usage is pretty simple. You just simply say type="url" in the input tag. Now on platforms that validate form input and support the URL field, this will take care of URL validation for you.
In addition, on platforms such as mobile that provide customized keyboards for certain types of data entry,
this input type will change the keyboard to be a URL entry keyboard. So platforms that support that, when they come across a URL input type they will switch the keyboard to help you put Web addresses in. So let's have a look at the code.
So here we are in the code and I am in my snippet screen and here is the URL type right here.

<input type="url">

Creating a phone number input field

(Text from Lynda.Com HTML5 Tutorials)
The telephone input type is another one of these HTML5 form inputs that lets you specify that a field is used for telephone numbers.
Its usage is pretty simple. You simply say <input type="tel">. Now, this intentionally does not force any particular syntax on the phone number for validation, and that's because phone numbers have a pretty wide variety of uses throughout the world.
Some of them use periods, some of them use dashes, countries use different numbers of digits, so it's pretty hard to provide enforcement here.
So, browsers don't try to enforce any particular phone number syntax on you. What is useful about this is that certain platforms like mobile devices that provide customized virtual keyboards on screen, this input types will change the keyboard to be optimized for phone number entry.

<input type="tel">

Creating a phone number input field

(Text from Lynda.Com HTML5 Tutorials)
The number input type indicates that the input field is used for numerical input, and to use it you simply use type="number" on the input tag.
On platforms that validate form input, this will validate the field to make sure it contains a numerical value.
And on platforms like mobile, that recognize the number input type and provide customized keyboards on screen, this input type will change the keyboard so that it's optimized for numerical input.
Along with <input type="numbers"<, you can use attributes min, max and step to provide additional user interface controls for the field on browsers which support them.

<input type="numbers">

Creating fields for capturing number ranges

(Text from Lynda.Com HTML5 Tutorials)
The range input type is similar to the number input type in that it indicates that the field is used for a numeric value.
In this case, however, it's more indicative that the field is used for a numeric value that's picked from within a given range.
The way you use it is by declaring type="range" on the input type. Now on platforms that validate form input and understand what this input type is, the browser will validate that the number is within the given range. Some browsers will display input types of ranges as slider controls.
So you can select from a range of numbers using nice little UI paradigm. Unlike the number control, you can also specify attributes like min, max, and step to provide additional UI features for the field.

<input type="range">

Building a date picker field

(Text from Lynda.Com HTML5 Tutorials)
If you've ever had to suffer through creating a user interface for a form that inputs a date or a time, then have I got an input type for you!
Because HTML5 Forms provides input types that indicate that the field is used for time or date related entries.
It makes the process of inputting dates and times much easier. Now, there are six of these.
There is input type="time", there is type="date", there is type="datetime", which gives you date and the time.
Then, there is datetime-local which is a date time in the local time zone where the machine that's viewing your web page is running.
Then there's type="week" and type="month".
Now, browsers have the choice here.
They can display a custom date or a time picker depending on the type of the field. Date and time fields can also be initialized with value strings and they can use the min, max and atep attributes as well, just like number and range fields can. This table shows how you initialize the value of a given date and time control. So for input type="time", you can set the value string to the following format. There's hours, minutes, there's optional seconds and fractional seconds, but hours and minutes you have to supply.
For the min and max fields you can supply a time string which takes this format, and the default ate value is 60 seconds, should you decide to use a Step attribute.
For date, it's the same thing. You can enter years, months, and days. Min and max you can use string to take this format and if you use step, the default step is 1 Day.
For DateTime you use a string that's a combination of date and time separated by the letter T right there in the middle of it.
So you have the four year digits, two month, two day, the literal letter T, then hours and minutes and optional seconds and fractions of seconds, followed by the literal letter Z. This is for world time.
The min and max will take string of this format and the default step is 60 seconds. The datetime-local is pretty much the same as the DateTime string. Only there is no Z on the end, but you do have to have that T in there. And again, just like the one before it, the min and max values will take a string of this format and the step is 60 seconds.
For the week and month, you supply a four digit year and in the case of weeks the literal character W separated by a dash and then a two digit week number. For min and max, you can supply week strings which are this format right here and the default step is 1 Week.
And then for months, you simply supply the four digit year and the two digit month and you can use a string of the same format for min and max and the default step is 1 month.

Invoking the color picker for field input

(Text from Lynda.Com HTML5 Tutorials)
The color selector input type is the last one we are going to look at in this chapter and as the name indicates it's used to select a color value and to do that you use input type="color".
This is not widely supported.
In fact, at the current time of this recording Opera is the only one that supports this and it's a bit esoteric.
Now, there are jQuery plugins that provide this ability. So if you want to provide the ability to select a color in your web pages, there are ways to do it outside of Opera.
You can just go to the jQuery UI web site and download any one of a number of color picker plugins.

Creating a list of suggested entries using the datalist element

(Text from Lynda.Com HTML5 Tutorials)
In this chapter, we are going to take a look at the new form elements that are supported by HTML5 forms, and we're going to start off by looking at the datalist element. The datalist element allows you to specify a list of common options that are associated with a text field and you can think of these as suggested entries. Now this might remind you of Auto Complete and it's kind of got some of the features of Auto Complete.
But the idea is that the user can still enter a custom value but when they put the focus in the input field and they start to type, the suggested entries will give them an idea of what's expected in that field.
The datalist is specified as a collection of option tags, which I'm sure you are probably familiar with, each of which has a value and the values of those option tags are what is used in the input field. And it kind of looks something like this. So you would define the datalist as a datalist tag and then there are several options and then these options are what appear in the text field when the user goes to type.

Using the progress element to create a progress bar

(Text from Lynda.Com HTML5 Tutorials)
Another new HTML5 web form element you can use in your forms is the progress element. The progress element is used to represent progress towards the completion of a task that is broken up into a discrete set of steps.
So, for example, you can use the progress element to show that the user is in step 2 out of 5 in a form or any other task that is broken up into a number of steps. You can use progress to show where the user is.
The progress element is not intended to be used to indicate measurements like a thermometer or a gauge or something else that shows a value relative to some sort of range of measurement.
That's what the meter element is for and we'll cover that elsewhere in the course. So, the progress element is just used to show progress against a task. Some browsers may choose to show this as say some kind of rectangle filled in with a color a certain way or they can choose how to render this and we'll see an example of that.
The progress element has some attributes and it has some DOM functions available to it. The attributes on the progress element are the value and max attributes. The value attribute is the current value of the control and it has to be greater than 0 and less than or equal to the max attribute.
The maximum value of the progress element is indicated by the max attribute. So in the example we used above say for example step 2 out of 5 in a form, the value would be 2 and max would be 5.
Obviously, value is going to change as the user progresses through the task. The DOM function position returns the calculated position of the control and it's basically equal to the value divided by max.
So in this case, you would divide 2 by 5 and you would get .4 or 40%.

Indicating measurements with the meter element

(Text from Lynda.Com HTML5 Tutorials)
The meter element is another HTML5 web form element that's new, and it's used to represent a value that falls within a known range.
So you can think of this as being sort of gauge, like a thermometer or a tachometer or any other gauge device that would show a value between some minimum value and some maximum value.
The meter element should not be used to demonstrate progress against a series of steps, because that's what the progress element is for and like many other new HTML5 elements, meter and progress have a semantic meaning.
So meter means a measurement and progress means progress.
So since different browsers might choose to render these in different ways you shouldn't attach separate meanings to each of these tags, other than what they're intended for.
So we have more attributes available to us on meter than we do on progress. The first is the value attribute, which is the current value of the control, and that should be greater than or equal to 0 and less than or equal to the max value. Min represents the minimum value of the element and max represents the maximum values. So those are pretty self-explanatory.
Then we have a couple of other attributes that we can use on gauges. We have a high, low, and optimum value.
So think of a gauge that shows, for example, revolutions per minute like a tachometer in a car.
You have a red area which would indicate values that are considered to be high for the car, and then you have a low area where values would be considered low, and then you have an optimum value which indicates an optimum value for whatever it is you're measuring.
The meter element lets you specify these values and again, the browser can choose how to render these.
So if your measurements that you're displaying to the user happen to have ranges which can be indicated as high or low or optimum, you can choose to put these attributes on the meter element.
Then they will be rendered appropriately in the browser.

Displaying the results of a calculation using the output element

(Text from Lynda.Com HTML5 Tutorials)
The output element is the last of the new HTML5 form tags that we are going to take a look at. The output element is another semantic element and it represents the results of a calculation. One of the things that forms are used more and more for is to provide ways for calculating final results of things.
So you can imagine that a form might provide a series of fields that add up numbers and give you a final result and the output element is intended to be the place where calculation results like that go.
To use it is pretty simple.
You simply use an output tag and you typically give it a name or an ID and it has some attributes and some DOM access.
The for attribute indicates the elements that either influenced or directly participated in the calculation that the output element represents.
So this is a space-separated list and the list should contain the IDs of the elements that had something to do with the results that the output tag is displaying, and the value of the output element results of the calculation is accessed via this value attribute.
So it's a pretty simple tag.

Transforming an ordinary form into an HTML5 form

(Narration from Lynda.Com HTML5 Tutorials)
00:00 So we have reached the point in the course now where we've learned enough to 00:03 take an existing web form and upgrade it to use the new HTML5 web form features 00:10 and provide some scripting fallback for older browsers that don't yet support 00:14 all the new HTML5 web form tags. 00:18 So here I am in the examples folder and this is the ExploreCalifornia example. 00:23 Let's take a look at the form that we are going to change. 00:26 So I will bring up the index page and this is the index for the sample 00:30 Explore California site and I am going to click on the contact form. 00:34 So this is the form that we are going to dress up and you can see that there are 00:38 fields for Name, Email, Phone, there is an Address field, Zip Code. 00:42 There is some information about the Tours you are interested in, a field for 00:47 when you are thinking of going to tour, and there's a Date field. 00:50 How many people are coming with you, comments and so on. 00:52 So you can see however that the form needs some help. 00:55 First of all when I click on the form there is no required field, so that's a problem. 01:00 The date field doesn't give me any help, there is no nice little picker that 01:03 comes up, things like that. 01:05 So let's go fix up this form. 01:07 So I am going to close this and let's go to the code. 01:11 So in the code we're here in the snippets section for the ExploreCalifornia. 01:14 This is the code I will be using and you can follow along with me. 01:18 Let's go ahead and open up the start site. 01:21 So the contact form is the one we're going to be working on. 01:24 I have also supplied a finished version in case you want to see the finished 01:28 version right away or you can follow along with me here. 01:31 So let's open up the start point. 01:33 This is the form we are going to change. We'll scroll down to it. 01:35 Here is where the form starts, and here is the form tag right there. 01:41 Here are the input fields for, let's see, Name, Email, Phone, and we have got the Address. 01:46 all the states, the Zip Code field, we've got the tour checkboxes and we have 01:53 the date field, and the number of people. 01:55 So let's go ahead and use what we've learned so far about HTML5 forms just to 02:00 fix up the input fields. 02:01 So let's scroll back up. Let's change these guys first. Let's go to the 02:06 snippets and scroll down. 02:08 Here's all the updated fields that we are going to be using. Let's just take a 02:12 quick look at the existing ones. 02:13 You can see that they are all type text. As we scroll over, there is no 02:17 information about required or using nice things like these placeholders. 02:21 There is no attribute that says which field gets the focus when the page loads, 02:26 so we can fix all of that just by using these tags. 02:30 So I am going to copy the Name and replace the existing Name input with the new 02:35 one and I will do the same thing for Email and I'll replace the Email tag there 02:42 and replace the phone one as well and replace the Zip Code, copy, and I am 02:50 going to scroll down to the Zip Code that's right there, and let's replace the 02:57 date and number of people fields while we are at it. There is the date and the number of people. 03:10 So let's go back and review what we have done so far. 03:14 Scroll right up to the beginning. So let's scroll over and take a look. 03:17 So the first thing we have done is we have changed each one of these fields to 03:20 have an input type that is corresponding to what kind of data it is. 03:25 So for the Email field we made it a type of email. 03:28 for Phone we made it a type of tel, and for the Zip Code, we left it as type text, 03:36 but we added a pattern attribute that has a regular expression that says 03:42 it's got to be five digits right there and those five digits have to fall 03:47 within the 0-9 range and it's got to be the beginning of input there and the 03:53 end of input there, and we have given it a title to help the user know what to 03:56 type-in and we've also made it required. 04:00 Let's scroll back up. So let's scroll on over. 04:06 So we've made the name field required. We give it the autofocus when the page 04:11 loads and we've given it a placeholder. 04:13 So the user can see some placeholder text with a little hint of what to put there. 04:16 Same thing for email. We gave it a placeholder hint, and for the phone number we 04:20 gave it a placeholder hint. 04:22 We made the email required and we also gave these tags titles as well, so that 04:28 the user gets a nice little explanation of what they are. And let's scroll back 04:32 down to the date and people field. 04:35 So here is the date you are thinking of traveling, we made that a date, and you 04:41 can see that we also gave it a title. And on the number of people field we made 04:45 it a number and we put in attributes for minimum, maximum, and step. 04:52 So just using these changes, let's see what the effect in the browser is. 04:57 So let's save, go back to the folder, and I am going to open this up to begin 05:02 with, let's try it in FireFox and see what happens. 05:05 So here is the same file. So you can see we have already made some progress. 05:09 There is placeholder text now, which is great. 05:13 So Firefox doesn't support the date-picker but that's okay. 05:16 Our number field is now number. That's all good. 05:20 Let's see what happens when we try to submit this empty form? 05:23 You can see that we are getting the required field behavior. That's all good. 05:27 Okay, so just by changing those tags we've made some significant progress. 05:30 Let's go over to Opera, because currently Opera has some of the most complete 05:34 support for these form tags. 05:38 So here is the same form in Opera now and you can see again we are getting 05:41 the placeholder stuff. 05:43 We've got little nice autofocus behavior when the page first loaded. 05:47 We've got a date-picker for our date field now. 05:51 The number field has the step counter support, which is nice, and you can see it 05:57 maxes out at 6 and it's stepping by one each time. So far so good. 06:02 if we try submit it, what happens? Yeah, we are getting the required field behavior. 06:06 So just by changing those tags we have made some significant progress. 06:09 Let's check it out in IE. So we will bring this up in IE, same form. 06:18 So we are not yet getting support for the placeholders or the autofocus. 06:22 We are not yet getting support for the date. 06:27 If we click Send, yeah, we still haven't fixed the required field yet. 06:30 All right, so clearly we need to do some additional scripting work to get this to work. 06:34 So let's go back to the code. 06:36 So now we are going to go back and for browsers that don't have support for 06:40 these fields we need to add our scripting support. 06:43 So let's scroll to the top and back into the snippets. 06:46 I'm now going to put in the scripts that we need. 06:50 I am going to start with the webforms2 script that we've been using throughout 06:54 the course, and I am going ahead and paste this in and I will paste this is at 07:00 the bottom of the script section, right there. 07:03 So just by doing that let's see what the effect in IE is. 07:05 So I will refresh. So now you can see that just by adding that script we now get 07:12 the autofocus support. So that's nice. 07:13 We still don't have date, so let's try to send. You can see that we are getting 07:18 the nice required behavior. 07:20 So just by adding that one script we're getting some good support. 07:22 Let's go back and finish though. 07:24 Let's go back to the snippets and add the rest of our code. 07:27 So we are going to add support now for the numeric spin counter on the number 07:32 field and that's right there. 07:33 So we will copy that and we will paste that in and recall when we downloaded 07:38 and installed our tools earlier in the course this was the numeric spinner that 07:42 we went and got. And we will also put in support for Modernizr and we will put 07:47 in support for the placeholder script, which I showed earlier, because we are 07:51 going to need those. 07:54 Now we are going to put in some script that does some of the necessary stuff. 07:58 So let's go ahead and copy this script tag right here and we will paste that in 08:06 and we will put in a closing script tag. 08:09 So now we are ready to add some other stuff. 08:14 Let's start by doing the placeholder support. 08:16 So I'm going to copy these three lines and put them into my script area and I 08:22 also need to put in support for the jQuery load function to make it run. So let's do that. 08:32 So let's go ahead and refresh the page and see what happens in IE. 08:36 Now that we have done the placeholder stuff. So let's refresh. 08:38 So you can see that now we are getting the autofocus and we're getting the 08:43 placeholder behavior. 08:44 So, so far so good. 08:45 Let's go back to the code. 08:47 Let's copy in the rest of our scripts. 08:49 So we need to add support for the numeric spin counter and that's this code right here. 08:55 so we are going to test Modernizr to see if the browser supports the number 08:59 input type, and if it doesn't work we're going to use the jQuery plug-in to do that, and 09:05 that's going to go right there. 09:07 Let's refresh. All right, let's scroll down to the field. 09:10 You can see now that we are getting support for our little numeric spin counter 09:14 via that jQuery plug-in. 09:16 We're getting the nice spin behavior. 09:18 It's maxing out at 6. 09:20 It's got a min of 1 and it's stepping by 1 each time. 09:22 That's great, so far so good. Now let's go ahead and add support for the date 09:26 field. It looks like that's the last thing left to do and we will copy the snippet 09:32 which is this right here, and once again we're using Modernizr to see if the 09:37 Browser supports the date field and if it does not support the date field then 09:41 we have some script that goes through, looks for input types of dates, and does 09:46 the magic needed via the jQuery UI plug-in to add the date field. 09:51 So we will look for input types of dates and for each one of those we just 09:56 simply say, hey, this date is now a date-picker. Same thing we do for the 09:59 numeric spin counter. 10:01 So let's save, we will go refresh the form, and then scroll down, and now you can 10:09 see that we are getting a nice little date picker. 10:11 This is the jQuery date picker. We can pick dates now. 10:14 So it looks like we've gone through and done all we needed to do. 10:18 Let's go ahead and check the Submit behavior. 10:20 I am going to put in some text. I'll put in and I am at 1234. 10:31 I live at 1 html5 lane and I live in California and I will put in some 10:37 nonsense for zip code. 10:38 I have got my date, got my number of people, let's click Send. Yeah, 10:44 it looks like we are getting the error because that's not a valid zip code, so 10:48 we will just type 94100. 10:52 That's obviously a valid zip code and we will submit. 10:55 And now everything is working. That's great. 10:56 Okay, let's go back and make sure we didn't break any of the existing browsers. 10:59 So let's go back over to Opera. Here we are in Opera, so we will refresh this. 11:04 Okay, still getting the same behavior. 11:08 It looks like we didn't break Opera's existing date, we didn't break Opera's 11:12 existing numeric spin counter because we were testing using Modernizr, and that 11:16 code is not executing, so that's good. 11:19 Let's go back over to Firefox. 11:21 Make sure everything is okay there. 11:23 Let's go ahead and refresh this. 11:26 That's still working. 11:27 The placeholder is still working. That's good. 11:29 Date picker is working. 11:32 That's also really good, because remember that Firefox obviously don't have a 11:35 built-in date picker. The numeric spin counter is also working so we didn't 11:39 break anything there. 11:40 All right, it looks like we are all good. 11:42 So using the HTML5 web form types and some JavaScript you can see we are able to 11:48 create a pretty nice-looking modern form with support for modern browsers and 11:54 we've used some script techniques to add support for older browsers that don't 11:58 get support in new HTML5 types. 12:00 But let's go back to the code. You can see that we did it in a way such that 12:04 when those browsers do support those new things like placeholders and 12:08 numbering date types, this code will stop executing and let the browser just 12:13 do the right thing.