Why put search input inside a form tag?

Question

I found that SO put the search input inside a form tag, and i found some other websites do the same, such as google, they put the search input and search button inside this:

<form action="/search" method="get" name="gs" id="tsf">

I want to just know the benefits of doing so, because it seems common and I miss it.

Answer 1

How about you read a tutorial on HTML forms?

The data entered in the form must be send to a server. The action attribute tells the browser which server.

Also, there are two common ways to send the data: through POST (in the HTTP header) and through GET (as part of the query string, the part after the question mark in a URL). Which method must be used is specified in the method attribute.

POST is commonly used when data should be submitted only once or should be private (e.g. registering at or logging in to a site). GET is used for data that may be send as often as necessary (because the resulting URL contains a query string that one can e.g. bookmark). Example: Google search queries are sent using GET, but to log in to your GMail account POST is used. A more elaborate explanation can be found here.

Edit: below you ask why the whole page can't just be wrapped in one form tag. As divo correctly answers: you may have multiple forms that can be submitted to different servers. For example, you can provide two text fields on your webpage: one that allows one to search the site using Google, the other using Yahoo. With a little creativity other uses will come to mind.

Edit 2:

Can you point to a different tutorial? W3Schools has errors. – David Dorward 10 mins ago

If that is so (I didn't check), these two look promising:

• tizag.com
• javascript-coder.com

Answer 2

The action attribute of the <form> element tells the browser which URL on the server is responsible for handling the form.