Previously if we wanted to include some placeholder text in an input field we’d have to either use the value attribute or inject it using JavaScript, neither of which are the most accessible.

With HTML5 though, we can now use a new placeholder attribute to add text to the input field using the following:

<input type="email" id="input-email" placeholder="Enter your email address">

Placeholder Attribute Browser Support

The latest versions of Firefox, Safari, Google Chrome and Opera all support the placeholder attribute. However, IE9 and below have no support for the placeholder text so it’s important to consider how input fields will appear on those IE browsers.

I’d fully expect IE10 to support the placeholder attribute but for now and for the foreseeable future while older versions of IE are being phased out, we’ll need to implement a fallback.

Using the Label Element

Regardless of the HTML5 spec not requiring a label element to be associated with an input element, I still think it’s a good idea for accessibility purposes to include a label so it’s clear and easy to see what the form field does.

<label for="input-email">Email Address</label>
<input type="email" id="input-email" placeholder="Enter your email address">

jQuery Placeholder Attribute

As well as using the label element to clearly identify what the input does, I’d also consider using a jQuery solution so that anyone using IE that has JavaScript available will also see the placeholder text.

Daniel Stocks has written an excellent jQuery placeholder plugin which you can download from Github here:

• jQuery Placeholder Plugin

All you need to do, is download the plugin (either the uncompressed or minified version) and include the following lines of HTML and JavaScript, making sure that the jQuery plugin has the correct path.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="jquery.placeholder.js"></script>
<script>
$('input[placeholder], textarea[placeholder]').placeholder();
</script>

Summary

And there you have it, a consistent appearance for the placeholder element across all browsers.

The following two links demonstrate a working version and also a zip file so you can download everything you need to get this working.

• IE rounded corners demo
• ie-rounded-corners.zip

The HTML is pretty straight forward and uses the code from another article – HTML5 tutorial: Getting Started.

In order to get the rounded corners working in IE you’ll need JQuery and the JQuery corner script both of which are included in the above zip file which I’ve then referenced from the HTML.

<script src="js/jquery-1.3.2.min.js"></script>
<script src="js/jquery.corner.js"></script>

Next you’ll simply need to tell the browser which corners you want to be rounded.

<script>
$("#container").corner();
$("section").corner();
$("aside").corner();
$("#main-navigation a").corner("top 5px");
</script>

If you’re familiar with CSS at all then you should be able to easily see how this is applied using JavaScript as we’re simply using the element, ID or class within the quotes to target that part of the HTML.

Summary

And that’s all there is to it. You can create all kinds of rounded corner effects as shown on the rounded corners demo site. Up until now, I’ve always created rounded corners using this method but seeing the simplicity of this Jquery solution, I am tempted to switch for Internet Explorer at least and rely on CSS3 for Webkit and Mozilla browsers.

What do you think? Are you still using images for rounded corner solutions or are the JavaScript and CSS3 methods becoming much more wide spread in the development community?

Therefore, I thought that it would be a good idea to document my progress and have created a blog over at TeachMeJavaScript.com which will detail everything that I learn as I progress.

I realise that TeachMeJavaScript.com might not be to everyone’s liking as it will start off at the very basics and gradually progress as I learn more about the language. So for anyone that has experience with JavaScript, they may find that it initially starts off at a very slow pace.

However, I’m sure that there are plenty of HTML/CSS web designers that are in a similar position to myself and are looking for the next skill to learn, in which case this may be just for you.

I thought it best to keep the JavaScript related articles and topics separate from this site so that anyone purely interested in HTML/CSS and web design can continue to read my posts here but for anyone interested in JavaScript please feel free to check out my new blog: TeachMeJavaScript.com