I am trying to find a way out about five hours now, i have studied and tried a lot of different things but i couldn't find the right drupal way to do what i want... Please help with the following.

I have the search-block-form which displays a search input text field and a button. The markup for the button now is the following (produced by drupal core):

<button class="form-submit" id="edit-submit--2" name="op" value="Search" type="submit">Search</button>

I want to add extra markup inside the <button></button>, like the following:

<button class="form-submit" id="edit-submit--2" name="op" value="" type="submit"><i class="fi-magnifying-glass"></i></button>

I know of course how to set the value=' ' and i have to say that i've already tried #prefix and #suffix parameters. I don't want to add markup prior to the button element or after that. I should put markup inside, between the element's tags. I tried also change the hook theme_button($variables) but my problem is that i want to change only the button for search-block-form and not all the button elements.

As some of you have already understand, i use foundation 5 framework and i want to make the search button like this:

search-bar example screenshot

1 Answer 1


* Updated *

You can do this by overriding theme_button() in your theme. Note that the code here is copied from theme_button(), with the return value adjusted accordingly:

function THEMENAME_button($variables)
  $element = $variables['element'];
  $element['#attributes']['type'] = 'submit';
  element_set_attributes($element, array('id', 'name', 'value'));

  $element['#attributes']['class'][] = 'form-' . $element['#button_type'];
  if (!empty($element['#attributes']['disabled']))
    $element['#attributes']['class'][] = 'form-button-disabled';

  if(isset($element['#search_button']) && $element['#search_button'])
    return '<button' . drupal_attributes($element['#attributes']) . '><i class="fi-magnifying-glass"></i></button>';
    return '<input' . drupal_attributes($element['#attributes']) . ' />';

Then you need to add #search_button = TRUE to the button in hook_form_alter()

function hook_form_alter(&$form, &$form_state, $form_id)
  if($form_id == 'MYFORMID')
    $form['actions']['submit']['#search_button'] = TRUE;

Note: This will render the button as requested. No guarantees that it will actually work with the Form API. That needs separate testing.

  • Thanks for the reply but no. It's all about security. The #value is just plain text.
    – PERIPC
    Commented Dec 26, 2016 at 0:28
  • I just did some testing - this can't be done. Browsers render the value attribute as plain text, so there isn't anything you can do in Drupal that would get around that. It's a browser limitation not a Drupal limitation.
    – Jaypan
    Commented Dec 26, 2016 at 1:32
  • @Jaypan I think you might have misunderstood...the OP is trying to get some extra markup into a FAPI submit button (not input); browsers are happy to render the markup inside a <button>, even of type submit, but it's not necessarily obvious how to get Drupal to play along, especially if you only want to target the one element. You're right that value attributes are rendered as plain text, but FAPI #values are a different thing. This is something that just needs to be attacked at the theme level
    – Clive
    Commented Dec 26, 2016 at 3:03
  • You're right, I did misunderstand. I updated my post with a solution.
    – Jaypan
    Commented Dec 26, 2016 at 3:27
  • 1
    OP = Original Poster (you)
    – Jaypan
    Commented Dec 26, 2016 at 10:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.