Elemen bentuk horizontal

Saya telah mendeskripsikan formulir, tetapi setiap elemen di sana terletak di bawah yang sebelumnya. Saya perlu menggambarkan bentuk di mana semua elemen akan ditempatkan secara horizontal tetapi tidak secara vertikal. Ini formulir saya:

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

Anda dapat menggunakan kode yang mirip dengan yang berikut, yang digunakan oleh modul Node di 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',
  );

Kuncinya adalah pengaturan garis atribut "#attributes" ke "container-inline."

Kode itu untuk Drupal 7; kode setara untuk Drupal 6 dimulai dengan kode berikut:

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

Andaikan Anda menggunakan Drupal 6, maka kode Anda harus diubah menjadi sesuatu yang mirip dengan yang berikut:

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

Saya tidak memasukkan deskripsi sebaris, karena tidak akan ditampilkan dengan benar karena menggunakan bidang formulir "item". Saya juga menemukan bahwa menguraikan deskripsi akan menyebabkan formulir terlalu banyak digunakan. (Bayangkan apa yang akan terjadi jika deskripsi yang digariskan akan lebih panjang, dan ditempatkan dalam satu baris.)

Gaya CSS yang ditambahkan Drupal 7 ke elemen container-inline adalah sebagai berikut.

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

Mereka ditambahkan dari system.base.css .