HTML Form and input Data

Question

I am trying to send a GET request to " ...:8000/find/alvin/ "

using a Form I created with the html code below

<form method="get" 
      style="position:absolute;right:0" 
      rel="search" 
      action="/find/">
      
  <input type="text" 
      class=" form-control"  
      name="value" 
      placeholder="Search⌕"/>  
      
  <button type="submit" class="d-none" >SUBMIT</button>
  
</form>

,However after typing a name, and hitting the submit button, I am sent to "...:8000/find/?value=alvin/ "

, how would I send a GET request to my desired URL using a form , a input of type text, and a submit button ?

Any help is truly appreciated , thank you for taking the time to read my question

sincerely, hugo shcottss

Answer 1

Placing the form data in a query string is the normal way of passing data using a form.

If you want to change it to use URLs of the style you are using then there are two approaches:

HTTP redirects

1. Let the form submit to the URL using a query string.
2. Read the query string using server-side code
3. Generate the URL you want
4. Respond with a 302 Found status code and a Location header with the new URL in it

(You can use any language you like for this, and some servers have modules which can be configured to do this (e.g. mod_rewrite) without using an actual programming language).

JavaScript

1. Listen for a submit event on the form
2. Prevent the default behaviour of a form submission
3. Read the values from the form fields
4. Construct the new URL
5. Assign the new URL to location so the browser navigates to it

---

Either way, make sure you escape any values you put in the URL so that the user typing characters with special meaning into the form won't cause you any problems.