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>

Featured pages

Overview

Learn about HTML5 architecture, design principles and patterns on HTML5 Overview Tutorial. Become …

Tags

Learn about HTML5 tags and discover a new list of HTML5 tags. Find out about HTML5 tags support by…

Welcome

 Learn HTML5 development techniques, tips and tricks on our website. Find out what is required…

Date Time Picker

HTML5 forms use date and time controls regularly. HTML5 date and time controls are used by booking …