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//

",[],[147,177],[147],{"_107":187,"_99":188,"_148":189,"_150":-5,"_151":137,"_152":190,"_154":155,"_109":191,"_104":33,"_157":158,"_159":-5,"_160":27,"_161":-5,"_162":192,"_102":241},"ed83943a-0343-11f0-950c-569c3dd06744","POSTrequest","ed8394da-0343-11f0-950c-569c3dd06744",216,["D",1742225073095],[193,203,213,223,232],{"_107":194,"_99":195,"_148":196,"_150":189,"_151":137,"_152":197,"_154":155,"_109":198,"_104":199,"_157":171,"_159":200,"_160":27,"_161":-5,"_162":201,"_102":202},"e7aeece0-05d1-11f0-a249-569c3dd06744","POSTrequestClient","38a45afc-05cf-11f0-93a5-569c3dd06744",297,["D",1742505954167],7,"import { blob } from \"https://esm.town/v/std/blob\";\nexport default function POSTrequestClient() {\n return `\n \n \n \n \n \n \n \n\n \n \n `;\n}",[],[188,195],{"_107":204,"_99":205,"_148":206,"_150":189,"_151":137,"_152":207,"_154":155,"_109":208,"_104":209,"_157":171,"_159":210,"_160":27,"_161":-5,"_162":211,"_102":212},"b6575596-0762-11f0-84a4-569c3dd06744","POSTrequestFormCodeExample","36d2e278-0347-11f0-be10-569c3dd06744",328,["D",1742678099568],45,"import { blob } from \"https://esm.town/v/std/blob\";\n\nexport default async function(req: Request): Promise {\n if (req.method === \"POST\") {\n const formData = await req.formData();\n const name = formData.getAll(\"name\");\n let allNames = await blob.getJSON(\"nameList\");\n allNames.push(name);\n await blob.setJSON(\"nameList\", allNames);\n const twoNameList = allNames.slice(0, -1).join(\", \") + ` and ` + allNames.slice(-1);\n const largeNameList = allNames.slice(0, -1).join(\", \") + `, and ` + allNames.slice(-1);\n if (allNames.length === 1) {\n return new Response(\n `

You submitted: ${name}.

`,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n }\n if (allNames.length === 2) {\n return new Response(\n `

You submitted: ${twoNameList}.

`,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n }\n else {\n return new Response(\n `

You submitted: ${largeNameList}

`,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n }\n }\n return new Response(\n `\n \n \n \n \n \n \n \n\n \n \n`,\n {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n },\n );\n}",[],[188,205],{"_107":214,"_99":215,"_148":216,"_150":189,"_151":137,"_152":217,"_154":155,"_109":218,"_104":219,"_157":171,"_159":220,"_160":27,"_161":-5,"_162":221,"_102":222},"d8d795e8-0737-11f0-9115-569c3dd06744","POSTrequestFormGuide","4ba26a1e-0344-11f0-99c2-569c3dd06744",327,["D",1742659689095],26,"/** @jsxImportSource https://esm.sh/hono@latest/jsx **/\nimport { Hono } from \"https://esm.sh/hono@3.10.2\";\n\nexport const HTTP_Guide = (c: any) => {\n const html = `\n\n \n How to make a POST request with the HTML form element\n \n \n \n \n

How to make a POST request with the HTML form element

This page is a guide on how to make a POST request with the HTML form element. First I'm going to\n explain the difference between POST and GET. Then I'll teach you how to change the method to POST. Next \n I'm going to explain what a server is and walk you through making a server that acknowledges it received \n a POST request. After that I'm explaining how to store data and modifying the server to store every request. \n Finally I will explain what a response is, how every part works, and how the server can send responses \n with the data it contains. \n \n

The intended difference between POST and GET is that POST sends data while GET retrieves it. The practical \n difference is that POST's request body can transport more data securely. In theory changing the method\n is as simple as changing GET to POST. In practice POST requests have very little effectiveness unless you add \n a server that can store requests.

\n\n

Usually there are two parts to a server, the hardware and the software. Since we're using Val Town\n we don't need to worry about hardware details like buying or renting a computer. For\n some reason the industry term for that is serverless despite the fact you need to write server code.\n I have no idea why. I just memorized that a serverless product is jargon for the company handling all\n hardware challenges, but not server code despite telling me not to worry about the server. The software aspect \n technically could only be three parts, but most of the time it needs a fourth part to be useful. The first part \n is receiving a request. The second part is processing the request. The third part is sending a response. \n The technically optional part is storing the data.

\n\n

How to make a server that processes POST requests

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

Fork your val you made for the last guide here.
The first step is to change the GET method in the client to POST.
Now it's time to start working on the server. The location of the server is between what is currently the first \n and second line. The first part of the server is determining if the method is POST. It does that through\n using req.method in an if else statement.
Then if it's the right method, it's time to extract the object containing the request. You \n do that through creating a const variable with the name of formData and the value of await req.formData();.\n I'm being so specific with the name of the variable because that's industry standard.
The next step is to manipulate the request so it can be useful. There are a lot \n of ways to manipulate the object and if you're curious read this documentation.\n The way we're using is .getAll(). The name of the const variable doesn't matter. The input to .getAll() \n is the value of the name attribute. Since I realized my description might not be clear,\n I included what I have. It's const name = formData.getAll(\"name\");.

\n\n\n

Now we have a server that accepts requests and processes requests. A HTTP Response is data sent from the server to the client. It always has three parts. The \n first part is the status line which has three components. The first component is the HTTP\n version number. The second is a three number response that states if there was a problem and if so \n what it was. The second part of a HTTP Response are the headers just like the HTTP Request.\n The final part is the body which contains the requested data. It's usually something like HTML or \n JSON.

\n \n

There are five categories of response status codes. The first category 100–199 is informational and\n means the request is in progress. The second category is 200-299 and means the request is successful.\n The third category is 300-399 and means the request got redirected. The fourth category is 400-499\n and means there's a problem with the request. The fifth category is 500-599 and means there's a problem with \n the server accepting the request. If you want more details read HTTP response status codes documentation.

\n\n

There are four types of response headers: Content-Type, Cache-Control, Access-Control-Allow-Origin, \n and Set-Cookie. Content-Type says what type of data is being sent back to the front end. Cache-Control\n says if the response is worth saving and how long if it is. Access-Control-Allow-Origin determines\n if a website is permitted to use the information. Set-Cookie sends new cookies to the browser to store.

\n\n

How to make a server that sends responses

The location of the response code is in the if else statement near the end and after the const variable \n that uses .getAll. The template is

\nreturn new Response(\"<p></p>\", {

\n headers: { \"Content-Type\": \"text/html\" },

\n });.

\n Between the paragraph tags, add a sentence stating that the input was received and what the input is.\n For example \"You submitted: Will.\"

\n\n\n

The next step is modifying the server so it can store data. It's more complicated than saving data\n to a variable because variables lose all data every time you save a version. On Val Town there are \n two ways to store data long term. They are blob and SQlite. Both of them have 10mb on the free plan and \n 1gb on pro. The difference is that blob storage is just key value while SQlite is a database. Since it \n doesn't make sense to use SQlite's data unnecessarily and it's complex enough to be its own guide, \n we're using blob storage.

\n\n

here

The first step is importing. Paste import { blob } from \"https://esm.town/v/std/blob\"; at the top of the val.
Next you need to either create the key or get the value of the key. You do that by creating a let\n variable with the value of await blob.getJSON(${`key`}).
Then you need to use the push method to add the value of the name variable that came from the POST\n method to the let variable made in the last step.
Now you need to update the the key. You do that with await blob.setJSON(\"${`key`}\", \n ${`let variable with value of key`});
From a pure content point of view, there's only the minor issue of the most recent name being \n last and isn't worth fixing by itself. However from a grammar point of view, it needs work. The primary problem \n is that the only thing that separates words is a singular comma and no space. A secondary problem is \n that there is no word and between the last and second to last name. I solved those issues through a combination\n of slicing and .join.
Now there's only one minor problem left. You get the same response from the website regardless of\n the number of names. I fixed the problem through using .length to see how many names and an if else\n statement to change the response based on the number of names.

\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//

\n//

",[],[188,215],{"_107":224,"_99":225,"_148":226,"_150":189,"_151":137,"_152":227,"_154":155,"_109":228,"_104":94,"_157":171,"_159":229,"_160":27,"_161":-5,"_162":230,"_102":231},"2313ed30-05d2-11f0-b28d-569c3dd06744","POSTrequestMainFile","dff2f3d4-05d1-11f0-b0e6-569c3dd06744",298,["D",1742506053813],"import { blob } from \"https://esm.town/v/std/blob\";\nimport { POSTrequestClient } from \"https://esm.town/v/willthereader/POSTrequestClient\";\nimport { POSTrequestServer } from \"https://www.val.town/x/willthereader/HTTP101/branch/main/code/POSTrequest/POSTrequestServer\";\nexport default async function(req: Request): Promise {\n if (req.method === \"POST\") {\n return POSTrequestServer(req);\n }\n\n return new Response(\n POSTrequestClient(),\n {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n },\n );\n}",[],[188,225],{"_107":233,"_99":234,"_148":235,"_150":189,"_151":137,"_152":236,"_154":155,"_109":237,"_104":199,"_157":171,"_159":238,"_160":27,"_161":-5,"_162":239,"_102":240},"a4704dbc-0661-11f0-a03c-569c3dd06744","POSTrequestServer","3f69c6b6-05ce-11f0-bd32-569c3dd06744",300,["D",1742567688881],"import { blob } from \"https://esm.town/v/std/blob\";\nimport { POSTrequestClient } from \"./POSTrequestClient.js\";\nexport default async function POSTrequestServer(req: Request): Promise {\n // Assume this file is only used for POST requests.\n const formData = await req.formData();\n const name = formData.get(\"name\");\n let allNames = await blob.getJSON(\"nameList\");\n allNames.push(name);\n await blob.setJSON(\"nameList\", allNames);\n const twoNameList = allNames.slice(0, -1).join(\", \") + ` and ` + allNames.slice(-1);\n const largeNameList = allNames.slice(0, -1).join(\", \") + `, and ` + allNames.slice(-1);\n if (allNames.length === 1) {\n return new Response(\n `

You submitted: ${name}.

`,\n { headers: { \"Content-Type\": \"text/html\" } },\n );\n }\n if (allNames.length === 2) {\n return new Response(\n `

You submitted: ${twoNameList}.

`,\n { headers: { \"Content-Type\": \"text/html\" } },\n );\n } else {\n return new Response(\n `

You submitted: ${largeNameList}

`,\n { headers: { \"Content-Type\": \"text/html\" } },\n );\n }\n}",[],[188,234],[188],{"_107":243,"_99":244,"_148":245,"_150":-5,"_151":137,"_152":246,"_154":155,"_109":247,"_104":33,"_157":158,"_159":-5,"_160":27,"_161":-5,"_162":248,"_102":278},"5345aaee-0662-11f0-8a8e-569c3dd06744","PUTrequest","5345abfc-0662-11f0-8a8e-569c3dd06744",301,["D",1742567982206],[249,259,268],{"_107":250,"_99":251,"_148":252,"_150":245,"_151":137,"_152":253,"_154":155,"_109":254,"_104":255,"_157":171,"_159":256,"_160":27,"_161":-5,"_162":257,"_102":258},"600ecdec-0729-11f0-9d05-569c3dd06744","PUT","3de7c060-0667-11f0-999c-569c3dd06744",314,["D",1742653473501],4,"/** @jsxImportSource https://esm.sh/hono@latest/jsx **/\nimport { Hono } from \"https://esm.sh/hono@3.10.2\";\n\nexport const HTTP_Guide = (c: any) => {\n const html = `\n\n \n How to make a GET request with the HTML form elment\n \n \n \n \n

How to make a PUT request with the Fetch API

This page is a guide on how to PUT request with the Fetch API. First I'm going to \n explain what why we're using the Fetch API. Then I'll explain what it is and the Val Town variant. \n Finally I'll walk you through modifying the code example so that it allows you to replacing name with a \n different name.

\n \n

The reason we need to use the Fetch API is that the HTML form only works\n for GET and POST methods.

\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//

\n//

",[],[244,251],{"_107":260,"_99":261,"_148":262,"_150":245,"_151":137,"_152":263,"_154":155,"_109":264,"_104":94,"_157":171,"_159":265,"_160":27,"_161":-5,"_162":266,"_102":267},"d9c299ea-0691-11f0-8891-569c3dd06744","otherPUTexample","7ea6b0be-0691-11f0-98c8-569c3dd06744",310,["D",1742588394179],"import { blob } from \"https://esm.town/v/std/blob\";\n\nexport default async function(req: Request): Promise {\n // Start with the actual HTTP method\n let effectiveMethod = req.method;\n let formData: FormData | undefined;\n\n if (req.method === \"POST\") {\n // Parse form data\n formData = await req.formData();\n\n // Check if a hidden field _method exists and override if present.\n if (formData.has(\"_method\")) {\n const override = formData.get(\"_method\");\n if (typeof override === \"string\") {\n effectiveMethod = override.toUpperCase();\n }\n }\n\n // Alternatively, check for a _method query parameter.\n const url = new URL(req.url);\n if (url.searchParams.has(\"_method\")) {\n effectiveMethod = url.searchParams.get(\"_method\")!.toUpperCase();\n }\n }\n\n // When the effective method is POST, we add a new name;\n // When it is PUT, we modify (update) the name list.\n if (effectiveMethod === \"POST\" || effectiveMethod === \"PUT\") {\n if (!formData) {\n formData = await req.formData();\n }\n const name = formData.get(\"name\");\n if (typeof name !== \"string\" || name.trim() === \"\") {\n return new Response(\"Name is required\", { status: 400 });\n }\n\n // Retrieve the existing name list.\n let allNames = await blob.getJSON(\"nameList\");\n if (!Array.isArray(allNames)) {\n allNames = [];\n }\n\n if (effectiveMethod === \"POST\") {\n // Add the new name.\n allNames.push(name);\n } else if (effectiveMethod === \"PUT\") {\n // Modify the list.\n // For example, update the first name with the submitted name.\n // (You can adjust this logic to update or remove a specific name as needed.)\n if (allNames.length > 0) {\n allNames[0] = name;\n } else {\n // If the list is empty, just add the name.\n allNames.push(name);\n }\n }\n\n await blob.setJSON(\"nameList\", allNames);\n\n // Prepare a response message based on the number of names.\n let responseMessage: string;\n if (allNames.length === 1) {\n responseMessage = `

You submitted: ${name}.

`;\n } else if (allNames.length === 2) {\n const twoNameList = allNames.join(\" and \");\n responseMessage = `

You submitted: ${twoNameList}.

`;\n } else {\n const largeNameList = allNames.slice(0, -1).join(\", \") + \", and \" + allNames.slice(-1);\n responseMessage = `

You submitted: ${largeNameList}.

`;\n }\n\n return new Response(responseMessage, {\n headers: { \"Content-Type\": \"text/html\" },\n });\n }\n\n // Render the HTML form.\n return new Response(\n `\n \n \n \n \n \n Modify Name List\n \n \n

Modify Name List

\n \n \n
\n \n \n \n`,\n { headers: { \"Content-Type\": \"text/html\" } },\n );\n}",[],[244,261],{"_107":269,"_99":270,"_148":271,"_150":245,"_151":137,"_152":272,"_154":155,"_109":273,"_104":274,"_157":171,"_159":275,"_160":27,"_161":-5,"_162":276,"_102":277},"01925612-0670-11f0-bf23-569c3dd06744","put","ff55972e-066f-11f0-840e-569c3dd06744",304,["D",1742573858082],1,"import { blob } from \"https://esm.town/v/std/blob\";\n\nexport default async function(req: Request): Promise {\n // Handle PUT requests for updating names\n if (req.method === \"PUT\") {\n const formData = await req.formData();\n const oldName = formData.get(\"oldName\");\n const newName = formData.get(\"newName\");\n\n // Get the current list of names\n let allNames = await blob.getJSON(\"nameList\");\n\n // Find and update the name\n const index = allNames.indexOf(oldName);\n if (index !== -1) {\n allNames[index] = newName;\n await blob.setJSON(\"nameList\", allNames);\n return new Response(\n `

Updated name from \"${oldName}\" to \"${newName}\".

`,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n } else {\n return new Response(\n `

Could not find \"${oldName}\" to update.

`,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n }\n }\n\n // Handle POST requests (your existing code)\n if (req.method === \"POST\") {\n // Your existing POST handling code here\n }\n\n // Return the form for GET requests\n return new Response(\n `\n \n \n \n \n \n PUT Request Example\n \n \n

Add a new name (POST)

\n \n\n

Update an existing name (PUT)

\n \n \n \n

\n\n \n \n \n `,\n {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n },\n );\n}",[],[244,270],[244],{"_107":280,"_99":281,"_148":282,"_150":-5,"_151":137,"_152":283,"_154":155,"_109":284,"_104":33,"_157":158,"_159":-5,"_160":27,"_161":-5,"_162":285,"_102":306},"36555ace-001d-11f0-9158-569c3dd06744","generalResource","36555b78-001d-11f0-9158-569c3dd06744",211,["D",1741878591406],[286,296],{"_107":287,"_99":288,"_148":289,"_150":282,"_151":137,"_152":290,"_154":155,"_109":291,"_104":292,"_157":171,"_159":293,"_160":27,"_161":-5,"_162":294,"_102":295},"3d658a3c-001d-11f0-8443-569c3dd06744","HTTPguide","296866de-f9d4-11ef-934b-569c3dd06744",214,["D",1741878603251],67,"/** @jsxImportSource https://esm.sh/hono@latest/jsx **/\nimport { Hono } from \"https://esm.sh/hono@3.10.2\";\n// last stable version is 61\nconsole.log(\"[Init] Starting HTML_Guide val\", new Date().toISOString());\n;\nexport const HTTP_Guide = (c: any) => {\n const html = `\n\n \n HTTP 101\n \n \n \n \n

How to use HTTP in Val Town

Introduction to Web Communication

\n\n

Request/Response Cycle

At its core the Internet is one computer requesting information and another computer \n responding with that information. In Val Town the computer requesting information is called frontend or\n client. The computer responding with that information is called backend or server. I made a point of \n using request and response because that's the specific terminology used.

\n \n

When coding in Val Town, you need to start by coding the front end. Then you decide what gets \n inputted and how. Once you decided what the request object has and wrote the code to create it, you can\n work on the backend. In the backend you need to write the code so that when it receives the request \n object, it knows what data should be sent back to the frontend through a response object.

\n \n

One way to think about it is two penpals communicating. The language that penpals communicate in is\n HTTP and the dialect is the version. One penpal writes a letter, makes a request object. Writes the \n address, sending the request object to the server. Drop it in the mailbox, have the server give the \n first penpal the final address. Send it through the postal system, send the request object. The other \n pen pal receives a letter and writes a response, creates a response object. Writes the address, sends \n it to the server. Drop their letter in the mailbox, have the server give them the final address. Send the \n letter through the postal system, send the response object.

\n\n

HTTP

HTTP, Hypertext Transfer Protocol, is a protocol that explains how computers are supposed to \n communicate with each other. It's effectively the common language computers use to communicate. Some \n versions of HTTP cannot communicate with each other. Additionally it can be a security risk for \n different versions to interface since some versions are more secure.

\n\n\n \n

HTTP Request and Reponses

\n\n \n \n

HTTP Request

\n\n

A method says what action should be taken. 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

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\n /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. A query string is the part of the URL after the \n path. The structure is ?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

In order to make a GET request, the first thing you need to do is create an URL object. An URL \n object is different than an URL because it's a class instead of a string. You make one\n with the code const url = new URL(req.url). You can access the information through url.sarchParams.get.\n An example of extracting data is \n url.searchParams.get(\"flavor\"). If there is no value, it will return null.

\n \n\n \n

There are five kinds of request headers. They are Content-Type, Authorization, Accept, and Cookie.\n Content-Type headers tell the server what kind of data is being used so they know how to understand.\n The authorization header acts as ID or security clearance. The accept header states what type of\n data could be understood when the response object is sent back. User-Agent headers say what is\n making the request. That's important because phones and computers need different results \n and different browsers work differently. Cookie headers allow the computer to do things like keep you\n logged in.

\n\n\n\n

If you're using POST to send data, you need the backend to parse the request body. First you need to\n get the FormData object through the formData() method.\n The FormData object\n documentation has several ways to extract the data from the object depending on your needs.

\n\n

You can make a request through the code return new Request(\"\");.

\n\n

There are three ways to make a request object without knowing how to code. One way is to\n type an URL in then press enter. Another way is to press a link or button. The final way is to submit\n a form.

\n \n

HTTP Response

\n \n

A HTTP Response is data sent from the server to the client. It always has three parts. The \n first part is the status line which has three components. The first component is the HTTP\n version number. The second is a three number response that states if there was a problem and if so \n what it was. The second part of a HTTP Response are the headers just like the HTTP Request.\n The final part is the body which contains the requested data. It's usually something like HTML or \n JSON.

\n \n

\n\n

JSON

JSON (JavaScript Object Notation) is a lightweight data interchange format designed so that\n humans and machines can understand it. It's important because that way the programmers know exactly \n what the machine is getting.

\n\n

External Code

\n\n

Fetch

Fetch is a way for one server to request data from another server. A fetch requires \n two const variables. The first is const response = await fetch(url). The second is \n const data = await response.json();. If you want to do something besides just retrieve data,\n you need to add the method. Change the first line from const response = await fetch(url) to\n await fetch(url, {\n method: 'any method except GET',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(data)\n});.

\n\n

\n To make a fetch request with authorization, you would write const response = await fetch('API endpoint')\n followed by const data = await response.json() and include headers: { 'Authorization': 'token' } in \n your request.\n

\n \n

API

An API (Application Programming Interface) is a set of rules and protocols designed to make it easy \n to communicate. For example OpenAI has an API designed to make it easy for ChatGPT to communicate with \n many different kinds of softwares. It's very common for front ends to call APIs. You don't literally \n call an API, you call it's endpoints. There are disadvantages to calling an API like the fact you're\n relying on a third party who can fail you, often a limited amount of requests, and they might cost\n money.

\n \n`;\n\n //

The key vocabulary are: client, server, URL, request, response, HTTP, method, and path.

\n //

The key vocabulary are: HTTP Request/Response, Request Line, Status Line, Headers, Body,\n // Query Params, API, and JSON.

\n\n return c.html(html);\n};\n\nconst app = new Hono();\napp.get(\"/\", HTTP_Guide);\nexport default app.fetch;",[],[281,288],{"_107":297,"_99":298,"_148":299,"_150":282,"_151":137,"_152":300,"_154":155,"_109":301,"_104":302,"_157":171,"_159":303,"_160":27,"_161":-5,"_162":304,"_102":305},"3bc09578-001d-11f0-a1af-569c3dd06744","templateWebsite","d2f798c2-fea8-11ef-b9ac-569c3dd06744",213,["D",1741878600493],3,"export default async function(req: Request): Promise {\n return new Response(\n `\n \n \n \n \n \n \n \n

Template Website

\n \n \n`,\n {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n },\n );\n}",[],[281,298],[281],{"_107":308,"_99":309,"_148":310,"_150":-5,"_151":137,"_152":311,"_154":155,"_109":312,"_104":274,"_157":158,"_159":-5,"_160":27,"_161":-5,"_162":313,"_102":343},"189adae0-001d-11f0-95de-569c3dd06744","probablyIrrelevant","0c69d406-001d-11f0-9838-569c3dd06744",205,["D",1741878541527],[314,324,333],{"_107":315,"_99":316,"_148":317,"_150":310,"_151":137,"_152":318,"_154":155,"_109":319,"_104":320,"_157":171,"_159":321,"_160":27,"_161":-5,"_162":322,"_102":323},"0f248aec-001d-11f0-9838-569c3dd06744","AIcode","bf7871a8-f20b-11ef-9e01-569c3dd06744",202,["D",1741878525652],76,"import { email } from \"https://esm.town/v/std/email?v=11\";\n\nexport default async function(req: Request): Promise {\n if (req.method === \"POST\") {\n // Extract form data from the POST request.\n const formData = await req.formData();\n // Retrieve the value from the input field with name \"flavor\".\n const emailAddress = formData.get(\"email\") as string;\n const flavor = formData.getAll(\"flavor\");\n const flavorList = flavor.slice(0, -1).join(\", \") + `, and ` + flavor.slice(-1);\n const flavorNumber = flavor.length;\n\n if (emailAddress) {\n await email({\n to: emailAddress,\n subject: \"Flavors\",\n text: `The flavor(s) you selected are: ${flavorList}`,\n });\n }\n\n if (flavorNumber === 1) {\n return new Response(\n `

You submitted: ${flavor}

`,\n { headers: { \"Content-Type\": \"text/html\" } },\n );\n }\n else if (flavorNumber > 1) {\n return new Response(`

You submitted these flavors: ${flavorList}

`, {\n headers: { \"Content-Type\": \"text/html\" },\n });\n }\n }\n\n // For GET requests, return the HTML form.\n return new Response(\n `\n \n \n \n \n \n Desert Order\n \n \n

Ice Cream Order

\n \n Enter your favorite flavor:\n

\n \n

\n \n \n vanilla\n \n

\n \n \n chocolate\n \n

\n \n \n moose tracks\n \n

\n \n \n cookies and cream\n \n

\n Email:\n \n
\n \n \n \n \n `,\n { headers: { \"Content-Type\": \"text/html\" } },\n );\n}",[],[309,316],{"_107":325,"_99":326,"_148":327,"_150":310,"_151":137,"_152":328,"_154":155,"_109":329,"_104":199,"_157":171,"_159":330,"_160":27,"_161":-5,"_162":331,"_102":332},"11d99890-001d-11f0-b710-569c3dd06744","getDataTransfer","840b5ea6-f557-11ef-b5d0-569c3dd06744",203,["D",1741878530194],"import { email } from \"https://esm.town/v/std/email?v=11\";\n\nexport default async function(req: Request): Promise {\n if (req.method === \"get\") {\n // Extract form data from the POST request.\n const formData = await req.formData();\n // Retrieve the value from the input field with name \"flavor\".\n const emailAddress = formData.get(\"email\") as string;\n const flavor = formData.getAll(\"flavor\");\n const flavorList = flavor.slice(0, -1).join(\", \") + `, and ` + flavor.slice(-1);\n const flavorNumber = flavor.length;\n\n if (emailAddress) {\n await email({\n to: emailAddress,\n subject: \"Flavors\",\n text: `The flavor(s) you selected are: ${flavorList}`,\n });\n }\n\n if (flavorNumber === 1) {\n return new Response(\n `

You submitted: ${flavor}

`,\n { headers: { \"Content-Type\": \"text/html\" } },\n );\n }\n else if (flavorNumber > 1) {\n return new Response(`

You submitted these flavors: ${flavorList}

`, {\n headers: { \"Content-Type\": \"text/html\" },\n });\n }\n }\n\n // For GET requests, return the HTML form.\n return new Response(\n `\n \n \n \n \n \n Desert Order\n \n \n

Ice Cream Order

\n \n Enter your favorite flavor:\n

\n \n

\n \n \n vanilla\n \n

\n \n \n chocolate\n \n

\n \n \n moose tracks\n \n

\n \n \n cookies and cream\n \n

\n Email:\n \n
\n \n \n \n \n `,\n { headers: { \"Content-Type\": \"text/html\" } },\n );\n}",[],[309,326],{"_107":334,"_99":335,"_148":336,"_150":310,"_151":137,"_152":337,"_154":155,"_109":338,"_104":339,"_157":171,"_159":340,"_160":27,"_161":-5,"_162":341,"_102":342},"132397be-001d-11f0-98e0-569c3dd06744","logicalJadeCow","af5e5ec2-f206-11ef-857c-569c3dd06744",204,["D",1741878532355],14,"export default async function(req: Request): Promise {\n return new Response(\n `\n \n \n \n \n \n cookie\n \n \n

ice cream!

\n \n \n \n`,\n {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n },\n );\n}",[],[309,335],[309],{"_107":345,"_99":346,"_148":347,"_150":-5,"_151":137,"_152":348,"_154":155,"_109":349,"_104":94,"_157":350,"_159":351,"_160":27,"_161":-5,"_162":352,"_102":353},"39df831c-05c8-11f0-9663-569c3dd06744","as","3284f6ba-05c8-11f0-82a7-569c3dd06744",278,["D",1742501797092],"script","import { blob } from \"https://esm.town/v/std/blob\";\nawait blob.delete(\"nameList\");",[],[346],{"_107":355,"_99":356,"_148":357,"_150":-5,"_151":137,"_152":136,"_154":155,"_109":358,"_104":274,"_157":171,"_159":359,"_160":27,"_161":-5,"_162":360,"_102":361},"3281647c-155f-11f0-bbb2-569c3dd06744","guideOutline","9b90496a-155a-11f0-aca7-569c3dd06744",["D",1744215906175],"export default async function(req: Request): Promise {\n

\n First explain the point of the article.\n\n Second, you name the topic the article is about and explain what it is\n\n Third you explain an insight about what you need to do when using the topic. For example, before you write the code\n for an HTML form, you should design it to make sure it's what you want and looks good.\n\n Fourth in order to enable active learning, you provide them with a code template like the model did with\n https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/getting-started/index.html.\n

;\n return Response.json({ ok: true });\n}\n\n//

",[],[356],"files",[145,164,175,186,193,203,213,223,232,242,249,259,268,279,286,296,307,314,324,333,344,354],"counts",{"_366":33,"_367":94,"_368":33,"_369":33},"pulls","branches","forks","envVars","contents",[],"file",{"_107":250,"_99":251,"_148":252,"_150":245,"_151":137,"_152":253,"_154":155,"_109":374,"_104":255,"_157":171,"_159":256,"_160":27,"_161":-5,"_102":375},["D",1742653473501],[244,251],"upstream","screenshots","emptyEnvVars","routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_97":98,"_99":100,"_101":43,"_102":103,"_105":381,"_372":385,"_388":389,"_411":412,"_419":-7,"_420":33,"_421":27},{"_107":108,"_99":100,"_109":382,"_111":-5,"_112":27,"_113":114,"_115":-5,"_116":-5,"_12":117,"_118":-5,"_119":27,"_120":-5,"_121":33,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":27,"_21":383,"_134":384},["D",1740329587152],{"_97":98,"_132":133},{"_104":136,"_99":43,"_107":137,"_138":108,"_139":-5,"_140":-5,"_141":-5,"_142":-5},{"_107":250,"_99":251,"_148":252,"_150":245,"_151":137,"_152":253,"_154":155,"_109":386,"_104":255,"_157":171,"_159":256,"_160":27,"_161":-5,"_102":387},["D",1742653473501],[244,251],"history",[390,392,397,402,406],{"_107":250,"_151":137,"_148":252,"_99":251,"_159":256,"_157":171,"_104":255,"_150":245,"_109":391,"_152":253,"_161":-5},["D",1742653473501],{"_107":393,"_151":137,"_148":252,"_99":251,"_159":394,"_157":171,"_104":302,"_150":245,"_109":395,"_152":396,"_161":-5},"2ca67400-0675-11f0-9291-569c3dd06744","/** @jsxImportSource https://esm.sh/hono@latest/jsx **/\nimport { Hono } from \"https://esm.sh/hono@3.10.2\";\n\nexport const HTTP_Guide = (c: any) => {\n const html = `\n\n \n How to make a GET request with the HTML form elment\n \n \n \n \n

How to make a PUT request with the Fetch API

\n \n

The reason we need to use the Fetch API is that the HTML form only works\n for GET and POST methods.

\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//

",["D",1742576077843],307,{"_107":398,"_151":137,"_148":252,"_99":251,"_159":399,"_157":171,"_104":94,"_150":245,"_109":400,"_152":401,"_161":-5},"28cca94e-0675-11f0-8147-569c3dd06744","/** @jsxImportSource https://esm.sh/hono@latest/jsx **/\nimport { Hono } from \"https://esm.sh/hono@3.10.2\";\n\nexport const HTTP_Guide = (c: any) => {\n const html = `\n\n \n How to make a GET request with the HTML form elment\n \n \n \n \n

How to make a PUT request with the Fetch API

\n \n

The reason we need to use the Fetch API is that the HTML form only works\n for GET and POST methods.

\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//

",["D",1742576071382],306,{"_107":403,"_151":137,"_148":252,"_99":251,"_159":182,"_157":171,"_104":274,"_150":245,"_109":404,"_152":405,"_161":-5},"5738e968-0671-11f0-81cf-569c3dd06744",["D",1742574431278],305,{"_107":407,"_151":137,"_148":252,"_99":251,"_159":408,"_157":171,"_104":33,"_150":245,"_109":409,"_152":410,"_161":-5},"3de7bf8e-0667-11f0-999c-569c3dd06744","export default async function (req: Request): Promise {\n return Response.json({ ok: true })\n}",["D",1742570093842],302,"versions",[413,415,416,417,418],{"_372":390,"_414":392},"previous",{"_372":392,"_414":397},{"_372":397,"_414":402},{"_372":402,"_414":406},{"_372":406,"_414":-5},"versionNumber","page","hasNext","routes/_app","actionData","errors"]

History for PUT