Often HTML form text boxes have hint text already in them which disappears when the box is clicked on.
This can be effective in terms of screen real estate. With the name of the field outside and more details within showing the expected format. An example might be a date field.
In the example below I am showing the expected format for the date within.
What’s the name for this? And how do I implement it?
There’s the old way with JavaScript and CSS and there’s the new way using HTML 5.
JavaScript
This was the old way.
Add the text and then when the textbox is clicked into (on click) call a function which removes the text content. A change to the colour of the text may also be included.
Also when the focus is moved away from the textbox once more then if it’s empty the hint text should be added once again.
HTML 5
HTML 5 makes the handling of textbox hint text easier to implement.
HTML 5 introduced the placeholder parameter. Simply add this parameter to the textbox definition and that’s it.
Here’s an example text box definition, firstly the simple text box and then with the addition of the placeholder.
<input type=”textbox” id=”Your name” value=”” placeholder=”Your name” />
With the addition of an extra parameter called placeholder to the input textbox its possible to show text illustrating the format of a date or guidance text which disappears when content is added. All without any coding.
