A Brief Introduction

HTML5 has given us a plethora of new ways to work with plain old boring form elements. We’ve introduced the slider element in a previous tutorial, and today we’ll be looking at a way to make your input elements slightly more dynamic. Placeholder text is default text inside of your input elements that goes away upon focusing on the element, and reappears upon the element having no text. Auto focus allows you to choose which input element the cursor is inside of when your page is loaded. Let’s take a look at how this works


Part 1: The Auto Focus Attribute

There’s nothing much to the index.html file at all. It’s a standard HTML5 document setup that contains 2 input fields. Have a look at the file:

Load the page up in your browser and you should see 2 inputs asking for a name and an email. Take note that when the page loaded, neither of the input elements had a cursor inside of them. When a cursor is inside of an input element, it is said to have the focus. This is where the new autofocus attribute comes into play. Before, accomplishing this task required a bit of javaScript. Now, we can get it done in one line. Let’s add the autofocus to our name input: (autofocus is not supported in ie)

See how easy that was? All we had to do was add the word autofocus into the code and now when we load the page up in a browser, the name field will have the focus.

Part 2: Placeholder Text

Placeholder text is an extremely handy way to let a user know exactly what belongs inside of a text box, while also saving some space in the design. We could essentially remove the “Name:” and “Email:” labels and fill our text boxes in with placeholder text. In fact, since the idea has been raised, let’s go ahead and do that now:

The placeholder attribute allows us to specify default text for our fields when there is no text inside of them. This is extremely helpful, and can make our forms more accessible and user friendly.

A Few Last Words

HTML5 provides a lot of ways to improve your forms, and using auto focus and placeholder text will give them that extra pizazz that people are coming to expect from the internet nowadays. Join us next time when we discuss how to implement the use of local storage in HTML5. See you then!

Download Source Files