Getting rid of password_confirm labels in module

Question

In a module, the following generates unwanted labels for 'Password' and 'Password confirm':

$form['password'] = array(
  '#type' => 'password_confirm',
  '#maxlength' => 20, 
  '#size' => 10,
);

It produces the following HTML:

<div class="form-item form-type-password form-item-password-pass1">
  <label for="edit-password-pass1">Password </label>
  <input class="password-field form-text" type="password" id="edit-password-pass1" name="password[pass1]" size="10" maxlength="128" />
</div>
<div class="form-item form-type-password form-item-password-pass2">
  <label for="edit-password-pass2">Confirm password </label>
  <input class="password-confirm form-text" type="password" id="edit-password-pass2" name="password[pass2]" size="10" maxlength="128" />
</div>

The object is to get rid of the text labels and replace them with images. I have tried toggling '#title', '#title_display' and '#label_display' but nothing works.

Any ideas?

Answer 1

Replacing a label with an image isn't a good idea, mainly for accessibility reasons (an input without a label is a sure way to fail a WAI compliance test).

One simple option would be to set the dimensions and background image of the labels in CSS, and indent the text so it's not visible.

Something like

.form-item-password-pass1 label {
  display: block;
  width: 50px;
  height: 50px;
  background: url(/images/50x50.png) left top no-repeat;
  text-indent: -9999em;
}

That way you don't actually need to change the markup, and everyone gets the best of both worlds.

Answer 2

I agree with @Clive that it is not a good idea to remove those labels, but there is a way to make them invisible, without to remove them. Drupal 7 has a CSS class for that purpose: element-invisible.

The code I would write is similar to the following one.

function mymodule_form($form, &$form_state) {
  $form['password'] = array(
    '#type' => 'password_confirm',
    '#maxlength' => 20, 
    '#size' => 10,
    '#process' => array('form_process_password_confirm', 'code_testing_process_password', 'user_form_process_password_confirm'),
  );

  return $form;
}

function mymodule_process_password($element) {
  $element['pass1']['#title'] =  '<span class="element-invisible">' . t('Password') . '</span>';
  $element['pass2']['#title'] =  '<span class="element-invisible">' . t('Confirm password') . '</span>';

  return $element;
}

The process functions I am using are the same used from the "password_confirm" form field, except the second one, which is my custom process function I use to make the label invisible.

You could also replace the reference to form_process_password_confirm() if you want to radically change the output for the form fields. The last process function I am using is the one that adds the JavaScript code which checks when the password entered in the two form fields is the same, among other things.