Theming / modifying the markup of default search block form

Question

I'm trying to modify the basic search block form that comes with Drupal 7 core. I have a custom theme and inside my templates folder I copied the search-block-form.tpl.php and modified it like so

<form action="/fi" method="post" accept-charset="UTF-8" class="ng-pristine ng-valid form-inline" novalidate role="form">    
<div class="form-group">            
    <div class="input-group">           
        <input 
            title="<?php print t('Type in your search terms'); ?>" 
            type="text"                 
            name="search_block_form" 
            value=""                
            maxlength="128" 
            class="form-text" />
    </div>      
    <?php print $search['hidden']; ?>
</div>  
<button 
    type="submit"               
    name="op"               
    class="btn btn-default">
    <span class="glyphicon glyphicon-search"></span>
</button>

But when I look my rendered markup on page it is totally different.

<form action="/fi" method="post" id="search-block-form" accept-charset="UTF-8" class="ng-pristine ng-valid">
<div>
    <div class="form-group">
        <div class="input-group">           
            <input title="Type in your search terms" type="text" name="search_block_form" value="" maxlength="128" class="form-text">
    </div>      
    <input type="hidden" name="form_build_id" value="">
    <input type="hidden" name="form_id" value="search_block_form">
</div>  
<button type="submit" name="op" class="btn btn-default">
    <span class="glyphicon glyphicon-search"></span>
</button>
</div>
</form>

Why is there an extra div inside the form and where is my form-inline class and who put that id on my form? Why isn't my markup rendered as I wrote it? I also tried to remove all unnecessary preprocessing by overriding xxx_preprocess_search_block_form and xxx_form_alter but nothing seems to work.

And yes I have tried to clear theme cache many times.

This is driving me insane about Drupal. All this "magical" stuff that keeps happening when I'm trying to accomplish even the most simplest templating tasks. Could someone please explain what is going on? Thanks!

Answer 1

First of all nothing is "magical" and if you are new to drupal then you have not looked into the Form API or ignored it.

What you are trying to do resides on hooking into the form api using the hook_form_alter or hook_form_FORM_ID_alter functions. The "magical" inline elements on your form are being handled by the form API I spoke of. You are trying to enter form elements and a button into a template file which is not only a security issue but is not the way that drupal handles forms.

You will need to create a custom module and add your hook_form into there and use the form api I spoke of to handle what you are trying to do.