Is there a css equivalent to android hint?

Question

In an Android layout xml file one can do something like this ...

<EditText android:id="@+id/username"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:hint="@string/username" />
<EditText android:id="@+id/password"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:inputType="textPassword"
    android:hint="@string/password" />

which results in a GUI that looks like this:

How would I create that same effect for a HTML form with CSS?

Answer 1

You can use the placeholder HTML5 attribute, for example:

<input type="text" name="username" placeholder="Username" />
<input type="text" name="password" placeholder="Password" />

Most browsers are compatible with this feature, except Internet Explorer (see comment by jcater). You can use, for example, jquery-placeholder to add support for legacy browsers (even IE6!).