I want to create a search box like this one. Can anybody help me?
Use the HTML5 input placeholder attribute:
http://www.w3schools.com/tags/att_input_placeholder.asp
For the image of the search icon check out this:
search icon inside search box
You can do it with bootstrap:
https://jsfiddle.net/oa9wj80x/
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
Related
how to create a navbar same as stack overflow navbar with search form icon.
i use it but cant find a way.
<div class="form-group">
<input type="text" name="search" class="form-control" placeholder="Search here..">
</div>
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
</form>```
You use DIV's to contain each group of code and arrange them using CSS. I changed the div class form-group to contain the entire form in one container. And you can use the class topnav to contain the images or text you want next to the search bar. Just a little CSS and your on your way!
<div class="topnav">
<a>Stack Overflow</a>
<div class="form-group">
<form>
<input type="text" name="search" class="form-control" placeholder="Search here..">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
Can anyone give me some advice on how to transform this:
<p>Find Entry/Exit: #Html.TextBox("SearchString", null, new { #placeholder = "Search..." }) <input class="btn btn-danger btn btn-xs" type="submit" value="Search" />`
to bootstrap button add on?
I want to do something like this:
<div class="col-lg-4">
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">Search</button>
</span>
</div>
</div>
, but I don't know where to put "Search String" in it. Thanks in advance!
try following
<div class="col-lg-4">
<div class="input-group">
<input type="text" class="form-control" id="SearchString" name="SearchString" placeholder="Search String"/>
<span class="input-group-btn">
<button class="btn btn-default" type="button">Search</button>
</span>
</div>
</div>
Please make sure to add bootstrap css and JS libraries in your page.
Reference to bootstrap
I need to change the style on a working search box to match the theme.
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
<!-- /input-group -->
<div class="search_box">
<form id="form_search" name="form_search" method="get" action="<?php echo site_url();?>">
<input type="text" name="s" id="search_top" />
<input type="button" name="btn1" id="btn_top" value="" />
</form>
</div>
The first div is the style I need, the second is the working search box.
Respectively, here is what each looks like currently:
http://gyazo.com/ecd1b696f723879d5512588b1d384017
Manage the width of your parent container as per your requirement, but the get the search bar, as you are showing: check the linked fiddle:
https://jsfiddle.net/happy2deepak/d4jad6ah/
<div class="input-group">
<input type="text" class="form-control input-lg" placeholder="Search">
<span class="input-group-btn">
<button type="button" class="btn btn-dark btn-lg">Go!</button>
</span>
</div>
I used an input group straight from the bootstrap documentation, and for some reason the button is way bigger than the text input.
Here's the HTML:
<div class="jumbotron">
<div class="input-group">
<input ng-model="businessName" ng-model="chosenPlace" googleplace type="text" class="form-control input-lg">
<span class="input-group-btn">
<button ng-click="findGPlace2()" class="btn btn-default" type="button">Find!</button>
</span>
</div>
</div>
I haven't made any changes to the css, just vanilla bootstrap.
Try to use the samples in Boostrap page. This is the bootply link you can customize it.
<div class="jumbotron">
<form class="form-horizontal" role="form">
<div class="input-group">
<input ng-model="businessName" ng-model="chosenPlace" class="form-control input-lg">
<span class="input-group-btn">
<button ng-click="findGPlace2()" class="btn btn-default btn-lg" type="button">Find!</button>
</span>
</div>
</form>
</div>
I'm helping with a website and learning all of these skills as I go. I saw similar questions but did not find a helpful resolution.
You can see on the upper right of this screenshot that the search box and button refuse to be on the same line.
http://i.imgur.com/fiurnYs.png
HTML code for the search box looks like this:
<div class="col-sm-3 col-md-3 pull-right">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="icon-search"> </i></button>
</div>
</div>
</form>
</div>
CSS code looks like this:
https://raw.github.com/immenselyalive/dresswithease/master/bootstrap.css
You could use the supplied block of code from the docs as a baseline for your code.
<div class="input-append">
<input class="span2" id="appendedInputButton" type="text">
<button class="btn" type="button">Go!</button>
</div>
http://getbootstrap.com/2.3.2/base-css.html#forms
(search for Buttons instead of text)