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.
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.