html - How do I get placeholder text in firefox and other browsers that don't support the html5 tag option?

Question

This works in Chrome and any other browser that supports placeholder text in HTML5

<input id="name" name="name"  type="text" placeholder="Please enter your name..." required /> <br />

But, it doesn't work in 3.5 and earlier of Firefox, and obviously IE8, and possibly other browsers.

How do I achieve the same thing (preferably in HTML/CSS - if not I am open to suggestions), to support all the older browsers? If not every single browser, at least Firefox and IE.

Safari and Chrome already support it (or the latest versions anyway).

Thanks.

Answer 1

One day I'll get around to properly documenting this, but see this example: http://dorward.me.uk/tmp/label-work/example.html

In short — position a <label> under a transparent <input> using <div> to provide background colour and borders.

Then use JS to determine if the label should be visible or not based on focusing.

Apply different styles when JS is not available to position the label beside the element instead.

Unlike using the value, this doesn't render the content inaccessible to devices which only display the focused content (e.g. screen readers), and also works for inputs of the password type.