I am working on a search project. I am new to html, css, etc., and haven’t the slightest idea of how to accomplish this. Here is my idea in simplest form:
- User visits website.
- User finds search box (form) I created.
- User types something into search box.
- When the user clicks the search button, or presses enter, the website appends what the user typed into the search box and places it in this link and proceeds to follow the link:
https://www.example.com/results.aspx?q=(USER SEARCH HERE)
I have tried researching the topic but have not found anything useful on it. Everything is very unclear. If anyone can find a tutorial, or tell me what I might be doing wrong, that would be greatly appreciated. 🙂
Thanks in advance for any help that was given!
2
Answers
All you need is an
input
element and submitbutton
and asubmit event listener
to call when submitting the form ( when clicking the button for search or click enter ), and on thesubmit event listener
you can get thevalue
of theinput
and add it as a query params.For example.
This is the very default behaviour of a
form
with theaction
attribute applied:Writing "Hello" in the input and pressing the search button or pressing enter, results in a URL like:
Giving the input another name, like
name="search"
, results in a URL like: