2

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?

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.

  • Thanks Clive, I was looking for a PHP module solution and don't like the text-indent trick but wound up using this solution. – user320691 Dec 6 '12 at 2:41
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.

screenshot

  • I was looking for something like this and would have used it but was too far along with the CSS method by the time it was posted. It's good to know though. Thanks! – user320691 Dec 6 '12 at 2:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.