search from modify html output im having problems to modify html of drupal search form. Currently it looks like this:
&lt;form action=&quot;/&quot; method=&quot;post&quot; id=&quot;search-block-form--2&quot; accept-charset=&quot;UTF-8&quot;&gt;
&lt;div&gt;
    &lt;div class=&quot;form-item form-type-textfield form-item-search-block-form&quot;&gt;
        &lt;label class=&quot;element-invisible&quot; for=&quot;edit-search-block-form--4&quot;&gt;Recipe Finder &lt;/label&gt;
        &lt;input title=&quot;Enter the terms you wish to search for.&quot; placeholder=&quot;Search&quot; type=&quot;text&quot;
               id=&quot;edit-search-block-form--4&quot; name=&quot;search_block_form&quot; value=&quot;Search&quot; size=&quot;15&quot; maxlength=&quot;128&quot;
               class=&quot;form-text&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-actions form-wrapper&quot; id=&quot;edit-actions--3&quot;&gt;
        &lt;input type=&quot;submit&quot; id=&quot;edit-submit--3&quot; name=&quot;op&quot; value=&quot;GO!&quot; class=&quot;form-submit&quot;&gt;
    &lt;/div&gt;
    &lt;input type=&quot;hidden&quot; name=&quot;form_build_id&quot; value=&quot;form-eHe5OqwUBJ_6iNuySpN1domgBeOYb4utKirLlh58QHY&quot;&gt;
    &lt;input type=&quot;hidden&quot; name=&quot;form_token&quot; value=&quot;ADv5U92njeULDgBszbJ6nDHTaGTxTEJMCCL2Qk3SAMk&quot;&gt;
    &lt;input type=&quot;hidden&quot; name=&quot;form_id&quot; value=&quot;search_block_form&quot;&gt;
&lt;/div&gt;


and i need something like this:
&lt;form action=&quot;/&quot; method=&quot;post&quot;&gt;
            &lt;div class=&quot;form-item&quot;&gt;
                &lt;label for=&quot;search&quot;&gt;Recipe finder&lt;/label&gt;
                &lt;input type=&quot;text&quot; name=&quot;search&quot; class=&quot;search&quot; id=&quot;search&quot;&gt;
                &lt;button type=&quot;submit&quot;&gt;Search&lt;/button&gt;
            &lt;/div&gt;
        &lt;/form&gt;

So i need to:

Change input to a button

Put that button in same div as input and label
I dont mind having this invisible elements and i know drupal needs them.


I know i need to use hook_form_alter for this but not rly sure how to do it.
I wanted to do the same thing and after struggling with all kind of hooks/theme functions, I finally found a solution directly inspired from bootstrap.

Here the 2 links of bootstrap implementation:


bootstrap_form_alter 
bootstrap theme function


And for my purpose, I've created a custom module to implement a custom search block. 
So in MYMODULE.module file, I've put:

/**
 * Implements hook_theme()
 */
function MYMODULE_theme() {
  return array(
    'MYMODULE_search_form_wrapper' =&gt; array(
      'render element'  =&gt; 'element',
    ),
  );
}

/**
 * Implements hook_form_alter()
 */
function MYMODULE_form_alter(&amp;$form, &amp;$form_state, $form_id) {
  if ($form_id == 'search_block_form') {
    //other implementations in themes/MY-THEME/template.php
    $form['actions']['submit']['#attributes']['class'][] = 'element-invisible';
    $form['search_block_form']['#theme_wrappers'] = array('MYMODULE_search_form_wrapper');
  }
}

function theme_MYMODULE_search_form_wrapper($variables) {

  $output = $variables['element']['#children'];
  $output .= '&lt;button type="submit" class="btn-foldingsearch"&gt;';
  $output .= t('Search');
  $output .= '&lt;/button&gt;';
  $output .= '&lt;span class="icon-search icon-foldingsearch rotated"&gt;&lt;/span&gt;';

  return $output;
}


Anyway, you'll have to adapt it to your configuration. Hope it helps.