Custom Google Search In Webpage [duplicate] - html

Question

This question already has answers here:
How can I add an integrated Google search to my website?
(6 answers)
Closed 9 years ago.
I was wondering how i can make my own custom google search.
Can i do something like this :
<form action="http://www.google.com/search=q?+text input" method="get">
<input type="search">
<input type="submit">
</form>

Answer 1

Try custom search api provided by Google for this. Though it is not pure HTML.
The following code demonstrates how to render a search box, together with search results, in a div, using the explicit parsetag and function callback:
<div id="test"></div>
<script>
var myCallback = function() {
if (document.readyState == 'complete') {
// Document is ready when CSE element is initialized.
// Render an element with both search box and search results in div with id 'test'.
google.search.cse.element.render(
{
div: "test",
tag: 'search'
});
} else {
// Document is not ready yet, when CSE element is initialized.
google.setOnLoadCallback(function() {
// Render an element with both search box and search results in div with id 'test'.
google.search.cse.element.render(
{
div: "test",
tag: 'search'
});
}, true);
}
};
// Insert it before the CSE code snippet so that cse.js can take the script
// parameters, like parsetags, callbacks.
window.__gcse = {
parsetags: 'explicit',
callback: myCallback
};
(function() {
var cx = '123:456'; // Insert your own Custom Search engine ID here
var gcse = document.createElement('script'); gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
})();
</script>
This is the tutorial link.

Answer 2

Please refer the following steps to create google custom search
1.First u have Sign up to Google Account
2.go to this url https://www.google.com/cse/create/new
3.Then specify the website URL (where to search )
4.click on Create button
5.in the next page there are 3 buttons available from that Click on "Get Code" Button.
6.after clicking on that, its generate the code. Copy that code and paste in your webpage.

Answer 3

Google have their own walkthrough,
https://www.google.com/cse/