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

We chose Server Intellect for its cloud servers, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.

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:
Code Block
Ask a Question
Download Source
Index.html
Our basic HTML setup
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title> HTML5 </title>
</head>
<body>
    Name: <input type="text" /> <br />
    Email: <input type="text" />
</body>
</html>
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)
Code Block
Ask a Question
Download Source
Index.html
Adding auto focus to the name input
<body>
    Name: <input type="text" autofocus /> <br />
    Email: <input type="text" />
</body>
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:
Code Block
Ask a Question
Download Source
Index.html
Adding placeholder text


<body>
   <input type="text" autofocus placeholder="Enter you name" /> <br />
    <input type="text" placeholder="Enter your email" />
</body>
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!

We stand behind Server Intellect and their support team. They offer dedicated servers , and they are now offering cloud servers! 

Download Source Files