Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
- Interacting with data through HTML forms
- Storing data as comma-separated values
- Saving, retrieving, and displaying data as XML
- Setting up and updating JSON data
- Creating a YAML data file
- Using HTML5 data storage solutions
Skill Level Intermediate
HTML5 brought a lot of cool new toys to the table, but one area was especially welcome and needed and that's forms. There were numerous enhancements to form elements as part of the HTML5 specification, many of which have been implemented in modern browsers. In this lesson, we'll take a look at some of the most valuable changes and how you can best take advantage of them. I have open here the index.htm file from the chapter one 0103 folder of the exercise files.
As you can see there's a pretty basic form here I'll scroll down just a bit more asking for info from potential students. We'll use this to illustrate the various HTML5 attributes and input types. I also have the same page open in my code editor, so we can take a peek under the hood from time to time. Now let's head back to the browser, and I'm going to refresh the page to simulate loading it for the first time, and you'll notice that when I do, the cursor jumps into the first field, ready for entry.
This occurs because the name field has an autofocus attribute. Let me show you that in the code. I'm going to scroll down to where my form starts on line 39, and here in the input field, you see as the second to last attribute autofocus. Now, you'll also notice the place holder text, your full name. Let's head back to the browser and watch what happens when I start typing. Instantly, the placeholder text disappears.
Again, that's controlled by an HTML5 attribute called, naturally placeholder. The text that appears is the placeholder's value, you see it as the attribute just before auto-focus. Now, if I change the placeholder value, lets make it Full name please, save the file and then head back to the browser, when it's refreshed, you see the new placeholder icon.
Both autofocus and placeholder are relatively well-supported in modern browsers. Support for the other attributes used in the name form field required that you see here is a little spottier but it's getting better. Watch what happens when I click submit without entering a name in the browser. We'll go back and just click submit I get a small pop-up asking me to fill out the field. Unfortunately, there's not a lot of controlled for the required validation. You really can't change the message.
And styling is pretty difficult as well. There are numerous other HTML5 attributes, but most don't have enough browser traction yet to be impactful. Lets turn our attention to the new HTML5 input types, there are a slew of new input types, 13 in all. Most of them apply to what are basically text input fields. I've got a number of examples in our form, first there's the email field. Now if we go back to the code and take a look at line 46 here.
You'll notice the type is set to email. In standard desktop browsers, you won't really see much in the way of change, but mobile browsers are a different animal altogether. Let's switch to an iPhone emulator, so you can see a real difference. Now, I have the page open in my emulator and I'm going to scroll down a little bit to where my form is. The form has not been optimized for responsive design, but it's close enough for government workers as my dad used to say. You'll get the idea. Now if I tap into the name field, there's a standard keyboard.
Now let me just enter my name. Click done, and let's go to the email field. The difference is subtle, but it's there. And now I have both an at symbol and a period available to me. Essential characters for any email address. Input types go a long way towards enhancing user experience. Now let me show you what I consider is a major ux enhancement. Let me just go ahead and click done here. And this time, I'll click into the cell phone field.
Now, I've got a numeric keyboard. Perfect for quickly entering phone numbers. This is because the field's input type is set to tel, t e l. As you can see the code on line 50. Now the enhancements aren't just restricted to different types of keyboards. Let's go into the birthday field, and now we have a very lovely date picker, so I can scroll down to something closer to my birthday, pretty quickly, let's see where I end up going. Good enough.