Горизонтальні елементи форми


12

Я описав форму, але кожен елемент там розташований під попереднім. Мені потрібно описати форму, де всі елементи будуть розміщені горизонтально, але не вертикально. Це моя форма:

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;
}

Відповіді:


17

Ви можете використовувати код, подібний до наступного, який використовується модулем Node в 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',
  );

Ключ - це параметри рядка, атрибут "#attributes" для "контейнер-вбудований".

Цей код призначений для Drupal 7; еквівалентний код для Drupal 6 починається з наступного коду:

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

Припустимо, що ви використовуєте Drupal 6, то ваш код слід змінити на щось подібне до наступного:

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;
}

Я не поставив опис в рядок, оскільки це було б неправильно відображено, оскільки воно використовує поле форми "елемент". Я також вважаю, що вкладення опису призведе до того, що форма займе занадто багато місця. (Уявіть, що буде, якщо складений опис буде довшим і розміщений в одному рядку.)

Стилі CSS, які Drupal 7 додає до елементів вбудованих контейнерів, є наступними.

/**
 * 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;
}

Вони додаються з system.base.css .


1
І не забудьте застосувати floatдо container-inlineкласу CSS .
tostinni

Чи можна це зробити без коду? Я дуже добре контролюю показ форм, але за винятком кількох стовпців у DS додатково, але нічого деталізованого, як модуль макета веб-форми для введення даних форми
Бруно Вінсент
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.