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

Answers:

Answer

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

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

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".

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.