Adding Placeholder Text in HTML5 Input Fields
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>