Place two text fields within a single <div> class

Question

I have assigned class names to both user name & password text fields in user login block separately like this and it's working.

function mymodule_form_alter(&$form, &$form_state, $form_id, $element) {
   if ( TRUE === in_array( $form_id, array( 'user_login', 'user_login_block') ) ) {
       $form['name']['#attributes']['class'] = array('mgnB10', 'fntXL', 'drkFg1');
       $form['pass']['#attributes']['class'] = array('fntXL', 'drkFg1');
   }
}

I want to include these fields inside a single '' and assign class name for design purpose, like this.

<div class="class-name">
  username field
  password field
</div>

I am using the following code but I didn't get the expected output.

function mymodule_form_alter(&$form, &$form_state, $form_id, $element) {
   if ( TRUE === in_array( $form_id, array( 'user_login', 'user_login_block') ) ) {
       $form['user_login']['#attributes']['class'] = array('#prefix' => 'myclass');
       $form['name']['#attributes']['class'] = array('mgnB10', 'fntXL', 'drkFg1');
       $form['pass']['#attributes']['class'] = array('fntXL', 'drkFg1');
       $form['user_login'] = array('#suffix' => '</div>');
   }
}

Answer 1

Hope this will help you,

In Drupal 7 you can achieve it by using the #prefix and #suffix properties in hook_form_alter().

   /**
    * Implements hook_form_alter().
    */
    function hook_form_alter(&$form, &$form_state, $form_id) {
      switch ($form_id) {
        case 'user_login':
        case 'user_login_block':
          $form['name']['#prefix'] = '<div class="username-password-wrapper">';
          $form['pass']['#suffix'] = '</div>';
          break;
      }
    }

Answer 2

Instead of doing this programmatically, you can use the Field Group module, which allows you to group fields using the Manage Fields tab in the UI.

<div> can be selected as the group type.