use span or input element for not editable form field

Question

I just started with twitter bootstrap.

I want to create a disabled form field. In the documention I found this snippet:

<input type="text" placeholder="Disabled input here..." disabled>

But in IE9 the placeholder doesn' work. When I use the value attribute to set the content it works (and overwrite the palceholder text, which worked in other browsers like chrome).

There is an alternative way without using the input element:

<span class="uneditable-input">Some value here</span>

This also works in IE9 and chrome. Which solution is better (compatible with old browsers, like IE8, 7 (and 6) ?

Answer 1

I found out, when I want to use the Prepended and appended inputs of twitter bootstrap I must use the input element. It doesn't work with the span element.

Example:

<div class="input-prepend">
  <span class="add-on">@</span>
  <input class="span2" id="prependedInput" type="text" placeholder="Username">
</div>

<div class="input-append">
  <input class="span2" id="appendedInput" type="text">
  <span class="add-on">.00</span>
</div>

Answer 2

IE 7/8/9 doesn't support the HTML5 placeholder. The best solution must be to use a script/plugin that provide the functionality (when it does not exist)

See https://github.com/miketaylr/jQuery-html5-placeholder

I also have had great experiences with http://jquery-watermark.googlecode.com/

They both use the HTML5 if it is available, and emulate it if it's not.

They are incredible simple to use. To use watermark for instance, just include it and add a line to your document.ready()

$("#my-input").watermark('default text');