Form Mastery - HTML5 Mastery: Semantics, Standards, and Styling - page 155

Providing placeholder text
There are little things that can be done to a form that help so much to make it more pol-
ished and usable. This is one such thing. Instead of having blank text fields on a form,
you can add text to the fields to hint at what they are for (address, telephone number,
and so on). Traditionally this was done by setting the value attribute on the input
element. The problem with this approach is that the text added initially could be erased,
which didn't make sense for something that really was just a hint and not meant to be
an editable feature. This problem has been solved in HTML5 with the placeholder
attribute. Text added to this attribute will appear in a text field when it is empty. Figure
4-18 shows what this looks like.
Figure 4-18. Four different text-based input fields ( search , email , tel , and url ) with place-
holder text added
Making input read-only
The readonly attribute is available for preventing the content in an input control from
being modified from its initial value. This can be useful if a form field value is updated
via JavaScript without allowing the user to change the value, as may be done if the
value was the result of a calculation in some way. This is a Boolean attribute, so you can
simply add it to the element:
<input type="text" value="You can't delete this" readonly
/>