How do I make an HTML text box show a hint when empty?

HTML placeholder explained

The placeholder attribute is a simple in-inbuilt tool in HTML5 for providing user guidance in form inputs. It has the advantage of saving space, offering in-line guidance that politely goes away when not needed.

Placeholder custom styling with CSS

If default styling isn't rocking your boat, you can wave your magic CSS wand and change the look:

::placeholder {
  color: #3fa9f5; /* Turns the placeholder text blue, because why not!? */
  font-style: italic; /* Adds a bit of Italian artistry to your placeholder */
}


Browser compatibility

While the placeholder attribute is a cool kid on the block, not all browsers have joined the party. Fear not, JavaScript or a jQuery plugin such as jQuery HTML5 Placeholder can be used to recreate the behavior for archaic browsers.

Advanced demo: Ajax implementation

Should you challenge yourself to an extra pinch of dynamism, consider Ajax in your next search functionality. Because, who needs a submit button anyhow?

Let's go responsive

Always remember, one size doesn't fit all. Make sure not only your input field but its placeholder text scales gracefully with the screen size.

Accessibility: More than just a good design

While design is important, let's not forget our friends using screen readers. For a more accessible UX, do include respective labels for each form field. The beauty of a form lies in its usability, not just its sleek design!