It isn't done by Javascript. The querystring parameters are interpreted by a server-side process. The <form> which has the textbox submits them via the querystring because it has <form method="get"> instead of post.
Explanation in detail
HTTP has two main request methods: GET and POST.
When you make a straightforward request for a webpage, such as by clicking a link or typing an address into the address bar, the browser will make a GET request, which consists of the path to the resource to get and some headers, that's it. There is no "request body".
A resource path looks like this: /foo/bar?name1=value1&name2=value2
POST requests are different and can only be triggered by a submission of a <form method="post"> (note that method="post" is implied if the method attribute is missing) or AJAX request. They also have a request-body, which is a block of data sent along with the request. This block of data consists of key/value pairs corresponding to each <input> element contained within the <form> element that was posted.
When you have a <form method="get"> (rather than post) each <input> in the <form> is instead converted into a querystring parameter rather than being sent in a request-body, also the method used is GET instead of POST.
In example, this...
<form method="post" action="Page.php">
<input type="text" name="Foo" value="bar" />
<input type="text" name="Baz" value="qux" />
</form>
...results in this being sent from the browser to the client:
POST Page.php
Content-Type: application/x-www-form-urlencoded
Content-Length: 15
Foo=bar&Baz=qux
(the "Foo=bar..." bit is the request body)
However, this...
<form method="get" action="Page.php">
<input type="text" name="Foo" value="bar" />
<input type="text" name="Baz" value="qux" />
</form>
...results in this being sent from the browser to the client:
GET Page.php?Foo=bar&Baz=qux
(note the lack of a request body)
