Recently I developed a landing page with two simple input fields like this
The design didn't have any labels in front or anywhere near, so the user can't know what goes in there. That's where the placeholders come in play.
A placeholder is nothing else but a text, that is displayed in the input field, before you actually enter your own string,
and it looks something like this:
The fun starts if you want to support them in older browsers. The simplest way to support them, is to implement a javascript fix. There are quite few on the web, one of them can be found here:http://mathiasbynens.be/demo/placeholder
Another thing that I had to work through, was how to center the text in input field vertically in ie8, since the input field was about 60px in height and font size was only 20px.
Since the fields was static and not responsive, and I knew the size of the letters, I solved this with padding. 20px of padding on top 20px of padding on bottom, set height to 20px and font-size to 20px and voila. Remember that the actual height includes top and bottom paddings. The style rule would look like this.
input {
font-size:20px;
height:20px;
padding:20px 0 20px 0;
}
The other solution is (or so i read), to set the line height to the same value as the height. But then chrome gives you this giant blinking cursor, until you actually start typing, which i don't like.
That's it about the placeholders for now, have a nice weekend.
Respond below with your thoughts on this. (oh right you can't yet. Well check again soon, I'll enable comments any day now.)