Simple search-form for bootstrap 3 - twitter-bootstrap-3

Question

I have a linear component I'm developing and I have pretty much all set, JSfifiddle:
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Filter <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</span>
<!--action="{{ url_for('search') }}" method="post">-->
<input type="text" placeholder="Search..." class="form-control">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Go!</button>
</span>
</div>
</div>
</div>
Now, what I want to achieve is to actually POST the "search" when I press on the Go! button. I have no experience in front-end, so I need your help with this one, I tried to add but that breaks the bootstrap awesome look.
TL;DR. how to make the Go! button post the text in the textbox.

Answer 1

You have to include a form element in your code.
<!--Search bar-->
<div class="row" style="margin-top:50px;">
<div class="col-md-6 col-md-offset-3">
<form class="navbar-form" method="post" action="{{ url_for('search') }}" role="search">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Filter
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</span>
<input type="text" placeholder="Search..." class="form-control">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Go!</button>
</span>
</div>
</form>
</div>
</div>
Please find the update of your JSFiddle