How to Create a Google Search Form on Your Website



HTML


In this article, we show how to create a google search form on your website.

This is a simple form in which you can enter a query into the search text book. Once you click 'Search' button on the form, you will then be brought to the google site with the searhc query that you entered inside of the google search field.

It's a very basic form, but it illustrates a lot of powerful concepts about HTML forms, particularly the GET method, whcih is what we use in this form.

So below is the form that we will create, which you can test yourself.


Search google:



So if you test out this form, you will see that you will be be brought to google's site with the search query that you entered into the text field in the google search bar.

Note that this is not a perfect form.

Once you go to google, you likely will have to press 'Enter' into the search bar, in order for the search results to be returned.

Ideally, you would want the search results to be returned automatically without having to press 'Enter', but this search form is more educational than actually practical.

Let's now go over the code used to create this search form.

The code is shown below and it is pure HTML without the use of any server-side language.



So let's now go over this code.

So in order to create a form in HTML, you may have to the form tags.

Inside of this opening form tag, you specify a method and an action always.

The method specified can either be GET or POST.

When you use the POST method, the data is sent to the server.

When you use the GET method, the data from the form is attached to the URL.

In the case of using google search, we want the data from the form attached to the URL.

What URL are we referencing is the URL in the action attribute. We'll get to this more in a minute.

Next, we have the action attribute which forms the base URL. The data we then have in the form gets appended to this URL.

We then have our search google text field. We give this a name attribute of "q", because search queries in google are represent by a q. We put a placeholder just to show a user what the search field does.

We then have a submit button that we give the name, "Search"

We then close the form.

So let's go over how this works in totality. We have a form. It is of the GET method, so the data from the form gets appended to the URL. The URL is https://www.google.com, so our data gets appended to this URL. The search field has a value of q; therefore, q is the first thing appended to the URL. Next, our data that we enter into the text field is appended on.

So, if we search, "kyrie iriving", the URL that is formed is, https://www.google.com/?q=kyrie+irving

We get redirected to this URL by the search form.

So this is actually a powerful illustration of HTML forms, particularly how the GET method works in conjunction with the name of the text field and the data entered into the text field.


Related Resources

How to Embed an Image in an HTML Page

How to Create Links to Within the Same Page in HTML

How to Create a Popup Title When a User Hovers Over a Link in HTML

How to Create a Definition List in HTML

How to Create a Table in HTML

How to Create a Table with Rows of Alternating Colors Using HTML and CSS

How to Add a Class or ID to an Anchor Tag in HTML

How to Change the Name of a Submit Button in HTML

How to Create a Reset Button in HTML

How to Create a Text Box that a User Cannot Type Inside Of

How to Create a List Box in HTML

How to Create a Multi-line Text Input (Textarea) in HTML

How to create a drop down list in HTML

How to Play an Audio File Using HTML

How to Display a Video Using HTML




HTML Comment Box is loading comments...