How can I avoid extraneous divs in my form?

Question

When I create a form using the form API, the resulting html includes all sorts of unwanted divs. For example, if I use:

$form = array(
    'myFieldset' => array(
        '#type' => 'fieldset'
    )
);

The resulting html looks like this:

<form action="/drupal-7.15/?q=chercheur" method="post" id="form-chercheur" accept-charset="UTF-8">
    <div>
        <fieldset class="form-wrapper" id="edit-myfieldset">
            <div class="fieldset-wrapper">
            </div>
        </fieldset>
        <input type="hidden" name="form_build_id" value="form-87Dv5ezVpaLI5mD345ofMkLgPhsv_dawudUp73ePQTc" />
        <input type="hidden" name="form_token" value="sXXINWr7rmParm0tRJoEb6QKGIH_QH-ffRSOtnvxYY0" />
        <input type="hidden" name="form_id" value="form_Chercheur" />
    </div>
</form>

As you can see, two extraneous divs are added here. They are making the javascript I'm writing uselessly complicated, so I was wondering if there was a way to remove the extraneous divs. Ideally, I would like to obtain something like this:

<form action="/drupal-7.15/?q=chercheur" method="post" id="form-chercheur" accept-charset="UTF-8">
    <fieldset class="form-wrapper" id="edit-myfieldset">
    </fieldset>
    <input type="hidden" name="form_build_id" value="form-87Dv5ezVpaLI5mD345ofMkLgPhsv_dawudUp73ePQTc" />
    <input type="hidden" name="form_token" value="sXXINWr7rmParm0tRJoEb6QKGIH_QH-ffRSOtnvxYY0" />
    <input type="hidden" name="form_id" value="form_Chercheur" />
</form>

Is this possible?

Answer 1

The first <div> is hard coded into the theme_form() function, so you can override that in your theme's template.php file if you want to. You should be aware, though, that the wrapping <div> is actually there to ensure XHTML compliance; if you remove it your page will fail validation.

That said, this is the code to do it (replacing MYTHEME with the name of your theme):

function MYTHEME_form($variables) {
  $element = $variables['element'];
  if (isset($element['#action'])) {
    $element['#attributes']['action'] = drupal_strip_dangerous_protocols($element['#action']);
  }
  element_set_attributes($element, array('method', 'id'));
  if (empty($element['#attributes']['accept-charset'])) {
    $element['#attributes']['accept-charset'] = "UTF-8";
  }

  return '<form' . drupal_attributes($element['#attributes']) . '>' . $element['#children'] . '</form>';
}

The only change from the original function is the removal of the <div> and </div> from the last line, and the removal of the XHTML compliance comment as that no longer applies.

Overriding the fieldset theme is pretty much the same, except you'll be borrowing the code from theme_fieldset():

function MYTHEME_fieldset($variables) {
  $element = $variables['element'];
  element_set_attributes($element, array('id'));
  _form_set_class($element, array('form-wrapper'));

  $output = '<fieldset' . drupal_attributes($element['#attributes']) . '>';
  if (!empty($element['#title'])) {
    // Always wrap fieldset legends in a SPAN for CSS positioning.
    $output .= '<legend><span class="fieldset-legend">' . $element['#title'] . '</span></legend>';
  }

  if (!empty($element['#description'])) {
    $output .= '<div class="fieldset-description">' . $element['#description'] . '</div>';
  }
  $output .= $element['#children'];
  if (isset($element['#value'])) {
    $output .= $element['#value'];
  }

  $output .= "</fieldset>\n";
  return $output;
}

Once you clear Drupal's caches the extraneous markup should just disappear.