Search Button Inside the Search Box Like Bing

Search button inside the search box like Bing

It just looks like it's inside but it's not (you cannot put html inside an input).

The 2 elements (an input and a button) are close together with 0 margin and both have the same height. The button's graphic has a 3px white margin. So it creates this effect.

A possible markup and styling could be:

<input type="text" id="q" />
<input type="button" id="b" value="Search" />

#q, #b { 
   margin: 0 
}
#q { 
   padding: 5px; 
   font-size: 2em; 
   line-height: 30px 
}
#b { 
   /* image replacement */
   text-indent: -99999px; 
   width: 30px; 
   height: 30px; 
   display: block;
   background: gray url(button.png) 0 0 no-repeat;

   /* placing next to input using float or absolute positioning omitted ... */
}

unable to change search box attribute

Notice: Your class="search" div is not closed !!

Here is the code that should work and fullfill all the three conditions of yours

<div class="search">
<div class="searchbox">
    <form action="/search" method="get" class="search_form">
        <input type="text" value="Search Blog..." class="search_text" name="q">
<input type="image" src="http://i42.tinypic.com/fayl43.png" class="button">
    </form>
</div>

Css Code:

.search{position:absolute;
height:28px;
width:190px;
top:140px;
left:100px;
border:2px solid black;
background-color:black;
border-radius:10px;
padding-left:2px;
padding-bottom:4px;
opacity:.8;
}

form#input{
    display:inline-block;
}

.searchbox{

}

.search_text{
    margin-top:4px;
    margin-left:5px;
    border-radius:5px;
    text-align:center;
}

.button{
    margin-top:5px;
    margin-left:2px;
    position:absolute;
    height:20px;
    width:20px;
}
.button:hover{
    -webkit-transform:scale(1.3);
            -moz-transform:scale(1.3);
            -o-transform:scale(1.3);
            opacity: 3;

}

Working JSfiddle Demo - http://jsfiddle.net/vg8Mn/

Hope this helps :)

input search and an iframe to show the result with html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>SearchBing</title>    <base target="iframe1"></head><body style="text-align: center;">    <div>        <input id="input" type="search"  name="q" style="border:2px solid grey; border-radius: 10px; width: 400px; height: 30px;" />        <button id="submit" style="background-color:brown; color:white; height:25px; width:80px; border:none; border-radius:10px; font-size: 18px; ">search</button>        <br/>        <br/>        <iframe id="iframe1" name="iframe1" height="400px" width="800px" style="border: 2px solid black; border-radius: 10px;"></iframe>    </div>    <script>    document.getElementById("submit").onclick = function() {      const value = document.getElementById("input").value;      const iframe = document.getElementById("iframe1");      iframe.src = `https://www.bing.com/search?q=${value}`    }    </script></body></html>

Rectangular area search in google or bing map

Yes, this can be done with Bing Maps. To do the bounding box search for restaurants use the Bing Spatial Data Services with the NAVTEQ EU (Europe) or NA (north America) data source. Using the Query API you can then pass in a bounding box to search within and an entity type ID to filter on (i.e. 5800 for restaurant). Here are some useful links on how to do this.

http://msdn.microsoft.com/en-us/library/hh478189.aspx

http://msdn.microsoft.com/en-us/library/gg585133.aspx

Concatenate search query and preset text to a search

You'll need to use JavaScript to prepend 'site:www.imdb.com/title ' to the input's value when the submit event is fired.

form.addEventListener('submit', function(){
  query.value = 'site:www.imdb.com/title ' + query.value;
})

<form method="get" action="http://www.bing.com/search" id="form">
    <input type="text" name="q" size="25" maxlength="255" value="Hakunamatata" id="query"/>
    <input type="submit" value="Bing Search" />
</form>

How to make this URL box search machine target in a new _blank window?

There is no way to use location to open a new window. Try window.open() with _blank as the second parameter instead.

function GoToURL(){    var URLis;    URLis = document.URLframe.u.value    {        var location=("https://SearchMyPageA.com/?q=" + URLis + "&ia=meanings");
        //this.location.href = location;        window.open(location, '_blank')    }}

<form name="URLframe" id="form" method="post">  <input value="test" type="text" name="u" size="70">  <input type="button" onclick="GoToURL(this)" value=" Search "></form>

Search Button Inside the Search Box Like Bing