Подсказки в input и textarea (placeholder)

Еще одна довольно частая задача в веб-проектах - это показывать подсказки в input и textarea, чтобы сэкономить место, да и просто для красоты.
Например, такие:

До HTML5 это приходилось решать примерно так:

<input onblur="if (!this.value) {this.style.color= '#ccc';this.value = this.defaultValue}" onfocus="if (this.value == this.defaultValue) {this.value = ''; this.style.color= '#ccc'}" style="color: #ccc;" type="text" value="Поиск" />

Для тех, кто не знает про замечательный атрибут defaultValue, поясню - в нём сохраняет то значение, которое было у поля при загрузке страницы.
На самом деле уже заметно, что делается это нетривиально, но на этом сложности не заканчиваются.
При сабмите формы нужно тоже смотреть, если у поля this.value == this.defaultValue, то нужно сбрасывать это значение, чтобы оно не было отправлено на сервер.
В итоге получаем, что для решения задачи нам нужно написать несколько строк javascript, которые ну никак не красят код страницы + без JS это работать не будет.

К счастью, в HTML5 позаботились об этом и ввели атрибут placeholder http://dev.w3.org/html5/spec/common-input-element-attributes.html#the-placeholder-attribute
И теперь достаточно указать этот атрибут, чтобы получить подсказки для полей:

<input placeholder="Подсказка" type="text" />

Рабочие примеры: