Create an HTML Email Form Placeholder

In the past, web developers had to resort to using JavaScript to create minor effects that just made the interaction between website user and website admin easier. The ability to add an email field in a form so that a user could enter their email address is a great example. If the developer wanted to include some sample text in the email field, and then make that text disappear when the user clicked within that form field, they had to use some JavaScript to make it happen. Enter HTML5 and the placeholder attribute–which uses no JavaScript at all!

Another advantage of the new HTML5 placeholder attribute that previously, using JavaScript, once the user deleted the email example text and clicked elsewhere on the page, the input will be remain blank. The placeholder attribute solves this problem, and fills it once again with the sample text.

Keep in mind that some web browsers, such as MSIE 8, Firefox and Opera, don’t currently support the placeholder attribute, but hopeful with another update or two, they will include that support. Either way, using it won’t mess up the page, as those browsers will just ignore it anyway. Here is an example of what the placeholder attribute looks like in action:

For those of you not using compliant browsers, here is a graphic that shows it in action using the Chrome browser:

And here is the HTML5 code that is used to achieve that effect:

<input name="email" type="email" placeholder="user@mydomain.com" />

This is just one example of how the use functionality of HTML5 will simplify the development of web pages that are more user-friendly. Stay tuned for other such examples!