Online web forms have a lot of input fields such as text, text area, phone, email and fields related to the application logic. Each of this field may require some hints about data that needs to be typed into these input fields. One way to add such hints would be to display explanation within a field. It is usually done with the help of JavaScript.
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:
<!DOCTYPE html>
<html>
<head>
<title>Sample code for HTML5 placehoder attribute</title>
</head>
<body>
<form id="myForm">
<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/>
</form>
</body>
</html>