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'))
    );

Answer 2

Another simple way is to add this function to your themes template.php :

function YOURTHEMENAME_form_alter( &$form, &$form_state, $form_id )
{
    if (in_array( $form_id, array( 'user_login', 'user_login_block')))
    {
        $form['name']['#attributes']['placeholder'] = t( 'Username' );
        $form['pass']['#attributes']['placeholder'] = t( 'Password' );
    }
}

This will add HTML5 placeholders to the Username und Password fields in both login forms.

Dont forget to change the beginning of the functions name!

Have fun!

Answer 3

考虑使用此模块https://www.drupal.org/project/form_placeholder实现HTML 5占位符，对于较旧的浏览器，旧浏览器不支持HTML5占位符属性使用Mathias Bynens的jQuery Placeholder插件。