<form name="myForm" action="http://www.PuStudy.Com/resources/html-forms-action.html"> <input name="myInput" placeholder="Placeholder text..."> <button>Submit</button> </form>
The above example demonstrates usage of the
<input> element with the
placeholder attribute can be used to provide a short hint to the user as to the type of input that is required. When used on an input control, the placeholder text is usually displayed within the input control, in a slightly dulled out color. When the user clicks in the control and starts typing, the placeholder text disappears and the user's text appears. If the user clears his text, the placeholder text should re-appear.
placeholder attribute should not be used in place of the
<label> element. The contents of the
<label> element is displayed at all times, whereas the
placeholder value disappears once the user starts interacting with the control. Furthermore, it remains invisible once the form is complete. Usability is reduced if the user is forced to rely on the (disappearing) placeholder text to remember what the purpose of the field is. Furthermore, once the form is complete, all placeholder text will have disappeared. This could result in the user wondering whether he/she has completed the form correctly (seeing as there are no
<label> elements to guide him/her).
Another potential usability issue with placeholder text, is that it could be confused with a pre-filled value. It's recommended to design the form in a way that reduces this possibility.