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

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

Ayesh K

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

Raisch

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!

Consider using this module https://www.drupal.org/project/form_placeholder implements an HTML 5 placeholder and for older browsers older browsers not "supporting HTML5 placeholder attribute uses jQuery Placeholder plugin by Mathias Bynens".

来源：https://stackoverflow.com/questions/9830736/how-to-set-a-placeholder-in-drupal-7-on-a-login-form

标签

javascript

php

css

forms

drupal-7