HTML5 Placeholder Attribute: Quick Guide

html5 placeholder

Hello friends today we gonna learn about HTML5 Placeholder Attribute: Quick Guide. So read this article, HTML5 Placeholder Attribute: Quick Guide step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

Guide: HTML5 Placeholder Attribute: Quick Guide

One of my favorite new pieces in HTML5 is the ability to add something Placeholder text easy. The text placeholder is the gray text found in an input field that is used to give users a hint as to what input is expected in that field. Once users start typing in the input field, this text disappears.

We used to do this often with JavaScript, as follows;

There is nothing wrong with this practice, but it is easier on HTML5.

HTML5 introduced a new attribute with a logical name; placeholder. Here’s an example:

If we look at it in the browsers, the input should now have the gray text as seen below;

A few things to note: According to the specification, the placeholder attribute should not be used as an alternative to a label, and it is also recommended to apply this attribute only to input types that require text, e.g. Text, password, search, email, text box and tel.

Add placeholder to the input types: radio and checkbox makes no difference.

back to menu ↑

Placeholder and CSS

Additionally, formatting the placeholder text via CSS is also possible, but at the time of writing this is still limited to Firefox and Webkit browsers only.

The following example shows how we change the placeholder text to green, both in Webkit and Firefox;

input :: – webkit-input-placeholder {color: green;} input: -moz-placeholder {color: green;}

placeholder green

However, keep in mind that the :: – webkit-input-placeholder and: -moz-placeholder will only affect the text and cannot be written in parallel.

input :: – webkit-input-placeholder, input: -moz-placeholder {color: green;}

This piece of code will not work.

Attribute selector

CSS3 also came to support this feature with the introduction of the [placeholder] attribute selector;

imports[placeholder] {border: 1px solid green;}

In the example above, we select each entry that has the placeholder attribute and change the border to green.

att selector

back to menu ↑

Browser compatibility

These new HTML5 feature unsurprisingly, it is not supported in old browsers and is currently only fully supported in: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 and Internet Explorer 10 (which has not yet been officially released).

Placeholder Polyfills

However, if we need to display the placeholder in older browsers, but can still use the placeholder attribute, we can use Polyfills. There are many Placeholder Polyfills beyond that, but in this example we’re going to use the PlaceMe.js;

The PlaceMe.js, as you can see in the code snippet above, depends on jQuery. If we now look at it in, say, Internet Explorer 9, all input should now display the placeholder text.

  • Watch demo
  • Download source
back to menu ↑

Final Thought

The HTML5 placeholder attribute certainly makes adding placeholder text easier. Now it is up up to us, web developers and designers, to choose which method to use: JavaScript or HTML5.

Considering that using Polyfills and jQuery to support legacy browsers is redundant, JavaScript is apparently more suitable for the task. But if you can peacefully ignore the old browsers, using HTML5 Placeholder is probably a better way.

back to menu ↑

HTML5 Placeholder Attribute: Quick Guide: benefits

  • The HTML5 Placeholder Attribute: Quick Guide tutorial is free .
  • This guide already helps so many users follow up with interest in a timely manner.
  • The price of the HTML5 Placeholder Attribute: Quick Guide guide is free.

back to menu ↑


Tutorial summary of HTML5 Placeholder Attribute: Quick Guide

In this guide, we told you about the HTML5 Placeholder Attribute: Quick Guide; please read all steps so that you understand HTML5 Placeholder Attribute: Quick Guide in case if you need any assistance from us, then contact us.

How this tutorial helping you?

So in this guide, we discuss the HTML5 Placeholder Attribute: Quick Guide, which undoubtedly helps you.

What is actual time in which this method complete?

The time to complete the HTML5 Placeholder Attribute: Quick Guide tutorial is 10+ minutes.

What are the supported Device?

PC Laptop or Desktop

back to menu ↑

Final note

I hope you like the guide HTML5 Placeholder Attribute: Quick Guide. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends.

For our visitors: If you have any queries regards the HTML5 Placeholder Attribute: Quick Guide, then please ask us through the comment section below or directly contact us.
Education: This guide or tutorial is just for educational purposes.
Misinformation: If you want to correct any misinformation about the guide “HTML5 Placeholder Attribute: Quick Guide”, then kindly contact us.
Want to add an alternate method: If anyone wants to add more methods to the guide HTML5 Placeholder Attribute: Quick Guide, then kindly contact us.
Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off).
Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.