HTML5 has new way of adding this text via input attribute called "placeholder". You can assign text to this placeholder attribute of the HTML5 input form and it will appear upon your HTML5 form load and disappear as soon as you click on the HTML5 input field. It will reappear back if it will loose focus without user typing text into this field.
Sample code of this HTML5 placeholder attribute presented below:
<input type="text" placeholder="Insert your custom text here"/>
There are several limitations for HTML5 placeholder attribute of the input tag. First, several browsers do not support this attribute. As a result, text will now show up in the field. Second, you can add only simple line of text. It does not allow line feed or carriage return. Finally, it does not support images in placeholder attribute of the HTML5 input tag.
Complete sample HTML5 code with the form and form input fields is provided below. You can use it as your boilerplate:
<title>Sample code for HTML5 placehoder attribute</title>
<label for="f_name">Firs Name</label>
<input id="f_name" name="first_name" type="text" placeholder="Insert your first name"/><br/>
<label for="l_name">Last Name</label>
<input id="l_name" name="last_name" type=" text" placeholder="Insert your last name"/><br/>