How do I theme Form API buttons in Drupal?

Question

The default output from Drupal's Form API is:

<input id="edit-submit" class="form-submit" type="submit" value="Save" name="op"/>

How do I theme that so I get:

<button id="edit-submit" class="form-submit" type="submit">
  <span>Save</span>
</button>

I need the inner span-tag so I can use the sliding doors CSS technique.

I guess I need to override theme_button($element) from form.inc but my attempts so far have been unsuccessful.

Answer 1

The basic idea to themeing a form_foo if you're using a plain PHP theme (like Chameleon), is to write a function called theme_form_foo().

You can also theme one element (like this button) specifically, by declaring a theme function just for it. See http://api.drupal.org/api/file/developer/topics/forms_api_reference.html#theme

Note that, with D6, in both cases you'll need to declare the function in the theme registry, otherwise Drupal won't notice this override. This is not necessary in D5. If you're using phptemplate, you'll need it too, although PHPtemplate takes care of the registry outside the forms case: http://drupal.org/node/132442#theme-registry

The documentation for this is available on a.d.o. : http://api.drupal.org/api/file/developer/topics/forms_api.html

Answer 2

I now have a function along the lines of

function mytheme_button($element) {
  return "<button><span></span></button>"; # lots of code missing here for clarity
}

In order to make it work I simply cleared the cache and Drupal noticed and used it automatically.