HTML5 Placeholder

We tradtionally add input placeholder text with JavaScript. Today, HTML5 introduced how to add it more easily with the placeholder attribute, and this demo shows how to use it.

Since we are using Polyfills, all the placeholder text here in this demo should appear on every browsers, including in IE

Basic Implementation

Using JaveScript

<input type="text" name="foo" value="Placeholder text"
onfocus="if(this.value=='Placeholder text')this.value='';"
onblur="if(this.value=='')this.value='Placeholder text';">

Placeholder Attribute

<input type="text" name="foo" placeholder="Placeholder Text">

Styling Placeholder

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

Attribute Selector

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