How to set a placeholder in drupal 7 on a login form

Question

I need to set a placeholder for a horizontal login form in Drupal 7. This text needs to disappear when clicked on. They will just say 'username' and 'password'. Here is the code for the form as of now. Thanks!

function horizontal_login_block($form) {
$form['#action'] = url($_GET['q'], array('query' => drupal_get_destination()));
$form['#id'] = 'horizontal-login-block';
$form['#validate'] = user_login_default_validators();
$form['#submit'][] = 'user_login_submit';
$form['#prefix'] = '<div id="loginbar">';
$form['#suffix'] = '</div>';
$form['name'] = array(
 '#type' => 'textfield',
 '#prefix' => '<div class="usericon">',
 '#suffix' => '</div>',
 '#maxlength' => USERNAME_MAX_LENGTH,
 '#default_value' => t('Username'),
 '#id' => 'userbar',
 '#size' => 15,
 '#required' => TRUE,
);

Answer 1

This is how to do it in HTML5, using placeholder HTML attribute. However, it's not working in any Internet Explorer version.

    function horizontal_login_block($form) {
    $form['#action'] = url($_GET['q'], array('query' => drupal_get_destination()));
    $form['#id'] = 'horizontal-login-block';
    $form['#validate'] = user_login_default_validators();
    $form['#submit'][] = 'user_login_submit';
    $form['#prefix'] = '<div id="loginbar">';
    $form['#suffix'] = '</div>';
    $form['name'] = array(
     '#type' => 'textfield',
     '#prefix' => '<div class="usericon">',
     '#suffix' => '</div>',
     '#maxlength' => USERNAME_MAX_LENGTH,
/* Don't set default values. HTML5
     '#default_value' => t('Username'), */
     '#id' => 'userbar',
     '#size' => 15,
     '#required' => TRUE,
     '#attributes' =>array('placeholder' => t('Username'))
    );