it-swarm-fr.com

Éléments de forme horizontaux

J'ai décrit le formulaire, mais chaque élément se trouve sous le précédent. J'ai besoin de décrire la forme où tous les éléments seront placés horizontalement mais pas verticalement. Voici ma forme:

function contact_register_form($form, &$form_state) {
  $form['description'] = array(
    '#type' => 'item',
    '#title' => t('Sign up to be notified when your community launches:'),
  );

  $form['email'] = array(
    '#type' => 'textfield',
    '#title' => t('Email'),
  );

  $form['submit'] = array(
    '#type' => 'submit',
    '#value' => 'Add me',
  );    

  return $form;
}
12
RomanBadiornyi

Vous pouvez utiliser un code similaire au suivant, utilisé par le module Node in node_filter_form() .

  // Build the 'Update options' form.
  $form['options'] = array(
    '#type' => 'fieldset', 
    '#title' => t('Update options'), 
    '#attributes' => array('class' => array('container-inline')), 
    '#access' => $admin_access,
  );

  // ...

  $form['options']['operation'] = array(
    '#type' => 'select', 
    '#title' => t('Operation'), 
    '#title_display' => 'invisible', 
    '#options' => $options, 
    '#default_value' => 'approve',
  );

La clé est les paramètres de ligne l'attribut "#attributes" à "conteneur en ligne".

Ce code est pour Drupal 7; le code équivalent pour Drupal 6 commence par le code suivant:

  $form['options'] = array(
    '#type' => 'fieldset', 
    '#title' => t('Update options'), 
    '#prefix' => '<div class="container-inline">', 
    '#suffix' => '</div>',
  );

Supposons que vous utilisez Drupal 6, votre code doit être changé en quelque chose de similaire au suivant:

function contact_register_form($form, &$form_state) {
  $form['description'] = array(
    '#type' => 'item',
    '#title' => t('Sign up to be notified when your community launches:'),
  );

  $form['email'] = array(
    '#type' => 'textfield',
    '#title' => t('Email'),
    '#prefix' => '<div class="container-inline">', 
  );

  $form['submit'] = array(
    '#type' => 'submit',
    '#value' => 'Add me',
    '#suffix' => '</div>',
  );    

  return $form;
}

Je n'ai pas mis la description en ligne, car elle ne serait pas correctement rendue car elle utilise un champ de formulaire "article". Je trouve également que l'inclusion de la description ferait prendre trop de place au formulaire. (Imaginez ce qui se passerait si la description intégrée était plus longue et placée sur une seule ligne.)

Les styles CSS que Drupal 7 ajoute aux éléments de conteneur en ligne sont les suivants.

/**
 * Inline items.
 */
.container-inline div,
.container-inline label {
  display: inline;
}
/* Fieldset contents always need to be rendered as block. */
.container-inline .fieldset-wrapper {
  display: block;
}

Ils sont ajoutés à partir de system.base.css .

17
kiamlaluno