How to make a GET request with the HTML form elment

This page is a guide on how to make a GET request with the HTML form elment. First I'm going to \n explain form elements, HTTP requests, and GET requests. Then I'm going to walk you through making \n a website that inputs text and sends a GET request containing the text.

\n \n

The form element is a container that holds elements that accept data to be sent\n elsewhere, usually to a server. The elements can accept data in a variety of ways. The user can type \n in the data, check a box, or select from a list. You can also customize things like\n how many inputs are allowed and how many are shown at a time. It sends data though a HTTP request.

\n\n

A HTTP Request is data sent from the client to the server. It always has the minimum of two\n parts and sometimes has a third. The first is the request line that has three pieces of \n information. The first piece of information is the HTTP method. The second is the URL or path\n the information is going to. The third and final piece of information is the HTTP version \n number. The second part of a HTTP Request is a header which contains supplementary information about\n requesting key value pairs. When creating or modifying information, there will be a body

\n\n

A method says what action should be taken and there are five. GET retrieves data.\n POST creates new data. PUT updates data. PATCH updates part of the data. DELETE deletes data.\n However just because a method is originally intended for one thing doesn't mean it can only \n do that. For example GET can send data by modifying the query string. POST is preferred to\n GET for sending data because POST has a body to hold data. If the front end is sending data \n to the backend to be processed, POST is preferred to GET.

\n \n \n

Now I'm going to explain how a path in a URL works.

          https://example.com/users/will\n          └──┬──┘ └────┬────┘ └──┬───┘\n             │         │         │\n          protocol  domain     path

\n \n The protocol states which version of HTTP you're using. The domain name is the human friendly version of the\n IP address of the website. The path is the location of what you're looking for in the website IP\n address. Paths have a hierarchal structure. After a / three things can happen. One thing is a section. Another is /selection/subselection. The final is /resource/identifier. All paths starts with / and if there's nothing after it, it leads to the homepage. Otherwise\n there's another segment, parameter, or extension. A segment is between two slashes and is more \n specific about where something is. For example it might be /book/fiction/.\n In https://example.com/users/profile, that means the path is /users/profile. Parameters go inside sections. They \n determines which section of the website is being shown. Query parameters determine what is being \n searched.

\n\n

You can use const path = new URL(req.url).pathname to get the path value. Then use an if else\n statement and === to see which path the path variable is equal to.

\n\n

A GET request sends data through a query string. Since anyone can see a query string, it is not \n suitable for private information. A query string is the part of the URL after the path. The structure is \\\n ?name=value&another=value2. The ? marks the beginning. If the parameter has a name \n and value, then it's connected by an =. If there are multiple values, they are separated by &.

\n \n

The input element is used to accept text from the user as an input to the website. There are\n many variations. The one we'll be using is input text. You can see all of them here.\n

\n\n

The key value pair you need to send data are the name and value elements. The name value is the \n key that is used to reference the value. The value element is very different depending on which \n type of input element you're using. Since we're using the text element, what it does is add place holder \n text. The text is useful instructions for users.\n

\n\n

The Submit element is is used to allow the user to submit a form.

\n\n

How to make a GET request with the HTML form elment?

If you want to see the end result, go Here.\n

Fork the Template Website. If you want to see the end result, go Here.
Start the form by replace line 11 with an the HTML form tag <form
After that add the method to the form. You do that by placing method=\"GET\" after the form tag on line 11
The next step is to add the input. You do that by adding a new line after line 11 and adding <input type=\"text\"
Then it's time to add the name element. You do that by writing name = what do you want to be the name in quotes.
After the name element, it's time to add the placeholder. It also has the template of placeholder = then what do you want to be the placeholder in quotes. Additionally, since it's the last thing in the line it ends with >.
The final element to be contained in the form is input type submit. There are two differences from line 4. The first differences is that it has submit instead of text in quotes. The second is that it has angle brackets(<>) at the beginning and end because that's the full line.
The final change if you made is adding </form> on line 14 to end the form.

\n\n\n\n

\n\n\n \n`;\n return c.html(html);\n};\n\nconst app = new Hono();\napp.get(\"/\", HTTP_Guide);\nexport default app.fetch;\n\n/*

What is the blank element?

*/\n\n//

What is the action element?

\n//

","deleted","label",[167,168,149],"likelyOutdatedGuides","GETrequest","permalink","https://www.val.town/x/willthereader/HTTP101/code/likelyOutdatedGuides/GETrequest/GETrequestFormGuide","extension","actionData","errors"]