Placeholder text

An empty form might be a bit intimidating especially if you are uncertain of what might go in to the different input fields. Therefore some developers invented the idea of a sample text inside the fields – so the user would have an idea of what to type in. This is what we nowadays call the placeholder text. Usually the placeholder text would have a light gray color in order to distinguish it from the user’s actual input.

As you might have discovered by now, the ability to set a placeholder text in input fields is not really a part of form validation but it is a long awaited feature that developers up until now have been creating using JavaScript. The placeholder text is displayed inside the input field as long as the field is empty and not focused. As soon as you click the field the placeholder text disappears and if you do not type anything into the field the placeholder text will reappear as soon as the field is no longer focused.

Using the placeholder attribute is quite easy – have a look at the example:

<form>
	First name: <input type="text" name="firstname" placeholder="Jane"/> <br>
Surname: <input type="text" name="surname" placeholder="Doe"/> <br>
<input type="submit" value="Submit now" />
</form>

The placeholder attribute actually has a pretty great support across browsers but if your user uses a browser that does not support the new html5 attribute no harm is done – the browser will just ignore your placeholder text. And of cause you can use a polyfill to make sure the placeholder text is shown in all browsers – check out my recommendations.