MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How HTML5 Placeholder attribute supports different browsers

In this article we will see the working of HTML5 placeholder attribute and how it supports different browsers.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

HTML5 has changed the way we build websites and online applications. It introduces lots of new features, many of which make inclusive design much more achievable. Happily you can start making your HTML5 more inclusive with a minimum of effort. One simple way is to make your forms easier for people to complete by using the HTML5 placeholder attribute.

What is the HTML5 placeholder attribute?

The HTML5 placeholder attribute lets you provide a short hint that helps people enter the right information into a form field. The hint might be an example of the required information, or a description of the expected format. The placeholder hint or description is displayed inside the empty form field, and is removed as soon as the field is given focus. In other words, the HTML5 placeholder attribute replaces one of the most common uses of JavaScript on the web.

How is the HTML5 placeholder attribute Applied?

You can apply the placeholder attribute to <input> fields like text, email, tel, search or URL. It can also be applied to a <textarea>.

Listing 1: Applying the placeholder attribute

<label for=”email”>Email address:
<input type=”email” id=”email” name=”email” placeholder=”you@example.com”/></label>

What isn’t the HTML5 placeholder attribute?

The placeholder attribute is not a replacement for a label. It’s tempting to think that it could be, especially when screen real estate is at a premium and space for a visible label is limited.

The trouble is that once the field is given focus and the placeholder text disappears, there’s nothing left to explain what kind of information should be entered. That makes things awkward for most of us, but it’s particularly challenging for people with memory difficulties because there’s no text label to remind them what information is expected.

It’s also inconvenient for keyboard users. Instead of tabbing onto a field and reading the label, they need to look ahead to read the placeholder before moving focus to the field itself. Using a placeholder without a label makes the task of completing a form counter intuitive and much harder work.

Can the HTML5 placeholder attribute be styled?

By default the placeholder text is displayed in light grey. This is to create the impression that the text is temporary and not something that has been entered by the person completing the form. It also makes it difficult to read.

It’s a good idea to style the placeholder text to give it greater visibility. Choosing a foreground color that meets the 4.5:1 contrast ratio recommended by WCAG 2.0 SC1.4.3 is a good way to do this.

The drawback is that styling for the placeholder attribute is not well supported yet. It’s necessary to use vendor specific prefixes, and even then support is limited.

input::-webkit-input-placeholder {color: ##912cee ;}
input:-moz-placeholder {color: ##912cee ;}

Can the HTML5 placeholder attribute be used now?

The HTML5 placeholder attribute is supported in recent versions of Chrome, Firefox, Opera and Safari/Webkit. It isn’t currently supported in Internet Explorer, but is changed with the introduction of IE10.

Until the web sheds itself of all those pesky versions of Internet Explorer, it’s a good idea to use a script such as jQuery.placeholder to handle support for legacy browsers. With that in mind though, you can go right ahead and use the HTML5 placeholder attribute to make your forms easier for everyone to complete.

Most of the attention for HTML5 has been given to the new elements and the use of video. However, one of the most useful features when creating forms is the introduction of the placeholder attribute for input elements.

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.

We 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, we 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.

Listing2: Using the label element

<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, we have also consider using a jQuery solution so that anyone using IE that has JavaScript available will also see the placeholder text.

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.

Listing3: Including the below lines while downloading plugin

<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>

If you are a developer chances are you are taking advantage of the new placeholder attribute that can be used with form elements. It can be used on text, textarea, search, url, tel, email, and password fields. One thing to ensure is that older browsers function similarly to ensure consistency and proper user experience. The following snippet can be ran to test for placeholder support, fallback older browsers, and ensure default values are not submitted in those older browsers.

Listing4: Snippet to be run for placeholder support

$(document).ready(function() {
 
    if ( !("placeholder" in document.createElement("input")) ) {
        $("input[placeholder], textarea[placeholder]").each(function() {
            var val = $(this).attr("placeholder");
            if ( this.value == "" ) {
                this.value = val;
            }
            $(this).focus(function() {
                if ( this.value == val ) {
                    this.value = "";
                }
            }).blur(function() {
                if ( $.trim(this.value) == "" ) {
                    this.value = val;
                }
            })
        });
 
        // Clear default placeholder values on form submit
        $('form').submit(function() {
            $(this).find("input[placeholder], textarea[placeholder]").each(function() {
                if ( this.value == $(this).attr("placeholder") ) {
                    this.value = "";
                }
            });
        });
    }
});

Conclusion

This brings us to a consistent appearance for the placeholder element across all browsers. Hope you enjoyed the learning.



Software Developer from India. I hold Master in Computer Applications Degree and is well versed with programming languages such as Java, .Net, C and C++ and possess good working knowledge on Mobile Platforms as well.

What did you think of this post?
Services
Know how to keep MrBool Online
SUPPORT US
SUPPORT US
With your help, we can keep providing free content and helping you to be a better professional
support us
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually � in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits � in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login