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}",[],[171,179],{"_104":190,"_95":191,"_153":192,"_155":172,"_156":138,"_157":193,"_159":182,"_106":194,"_100":195,"_161":185,"_163":196,"_164":22,"_165":-5,"_166":197,"_98":198},"11d99890-001d-11f0-b710-569c3dd06744","getDataTransfer","840b5ea6-f557-11ef-b5d0-569c3dd06744",203,["D",1741878530194],7,"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}",[],[171,191],{"_104":200,"_95":201,"_153":202,"_155":172,"_156":138,"_157":203,"_159":182,"_106":204,"_100":205,"_161":185,"_163":206,"_164":22,"_165":-5,"_166":207,"_98":208},"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}",[],[171,201],[171],{"_104":211,"_95":99,"_153":212,"_155":-5,"_156":138,"_157":213,"_159":22,"_106":214,"_100":215,"_161":185,"_163":216,"_164":22,"_165":-5,"_166":217,"_98":218},"26d7a674-001d-11f0-9787-569c3dd06744","4db7dbe6-fec5-11ef-b88e-569c3dd06744",207,["D",1741878565414],12,"export default async function(req: Request): Promise {\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}",[],[99],{"_104":220,"_95":221,"_153":222,"_155":-5,"_156":138,"_157":101,"_159":22,"_106":223,"_100":224,"_161":185,"_163":225,"_164":22,"_165":-5,"_166":226,"_98":227},"28bf45b4-001d-11f0-81a8-569c3dd06744","GETrequestFormGuide","aa87308a-febe-11ef-8d74-569c3dd06744",["D",1741878568606],20,"/** @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 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 1. Fork the Template Website .

\n 2. Start the form by replace line 11 with an the HTML form tag .\n 7. The final element to be contained in the form is input type submit. There are two differences from line 4.\n The first differences is that it has submit instead of text in quotes. The second is that it has angle\n backets(<>) at the beginning and end because that's the full line.\n 8. The final change if you made is adding 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//

",[],[221],{"_104":229,"_95":230,"_153":231,"_155":-5,"_156":138,"_157":232,"_159":22,"_106":233,"_100":234,"_161":185,"_163":235,"_164":22,"_165":-5,"_166":236,"_98":237},"ab43d7fa-fdf4-11ef-b554-569c3dd06744","HTTPguide","296866de-f9d4-11ef-934b-569c3dd06744",166,["D",1741641275882],66,"/** @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

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. You can make a response through the code return new Response(\"\");. If you want to add a header or status code, it gets its own line \n below the line creating the response.

\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;",[],[230],{"_104":239,"_95":240,"_153":241,"_155":-5,"_156":138,"_157":242,"_159":22,"_106":243,"_100":175,"_161":185,"_163":244,"_164":22,"_165":-5,"_166":245,"_98":246},"d499fff8-fea8-11ef-b27a-569c3dd06744","templateWebsite","d2f798c2-fea8-11ef-b9ac-569c3dd06744",168,["D",1741718654652],"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}",[],[240],"files",[150,169,177,189,199,210,219,228,238],"counts",{"_251":32,"_252":253,"_254":32,"_255":256},"pulls","branches",2,"forks","envVars",{"_257":32,"_258":32},"count","emptyCount","contents",[],"file",{"_104":211,"_95":99,"_153":212,"_155":-5,"_156":138,"_157":213,"_159":22,"_106":263,"_100":215,"_161":185,"_163":216,"_164":22,"_165":-5,"_98":264},["D",1741878565414],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":273,"_148":278,"_247":306,"_261":307,"_259":309,"_310":-5,"_311":-5,"_312":-5,"_313":-5,"_314":315},{"_104":105,"_95":96,"_106":274,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":275,"_132":276,"_135":277,"_147":22},["D",1740329587152],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_100":137,"_95":43,"_104":138,"_139":105,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":96,"_146":94},[279,282,294,297,300,303],{"_104":151,"_95":152,"_153":154,"_155":-5,"_156":138,"_157":158,"_159":22,"_106":160,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":280,"_98":281},[],[152],{"_104":170,"_95":171,"_153":172,"_155":-5,"_156":138,"_157":173,"_159":22,"_106":174,"_100":175,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":283,"_98":293},[284,287,290],{"_104":178,"_95":179,"_153":180,"_155":172,"_156":138,"_157":181,"_159":182,"_106":183,"_100":184,"_161":185,"_163":186,"_164":22,"_165":-5,"_166":285,"_98":286},[],[171,179],{"_104":190,"_95":191,"_153":192,"_155":172,"_156":138,"_157":193,"_159":182,"_106":194,"_100":195,"_161":185,"_163":196,"_164":22,"_165":-5,"_166":288,"_98":289},[],[171,191],{"_104":200,"_95":201,"_153":202,"_155":172,"_156":138,"_157":203,"_159":182,"_106":204,"_100":205,"_161":185,"_163":206,"_164":22,"_165":-5,"_166":291,"_98":292},[],[171,201],[171],{"_104":211,"_95":99,"_153":212,"_155":-5,"_156":138,"_157":213,"_159":22,"_106":214,"_100":215,"_161":185,"_163":216,"_164":22,"_165":-5,"_166":295,"_98":296},[],[99],{"_104":220,"_95":221,"_153":222,"_155":-5,"_156":138,"_157":101,"_159":22,"_106":223,"_100":224,"_161":185,"_163":225,"_164":22,"_165":-5,"_166":298,"_98":299},[],[221],{"_104":229,"_95":230,"_153":231,"_155":-5,"_156":138,"_157":232,"_159":22,"_106":233,"_100":234,"_161":185,"_163":235,"_164":22,"_165":-5,"_166":301,"_98":302},[],[230],{"_104":239,"_95":240,"_153":241,"_155":-5,"_156":138,"_157":242,"_159":22,"_106":243,"_100":175,"_161":185,"_163":244,"_164":22,"_165":-5,"_166":304,"_98":305},[],[240],[279,282,284,287,290,294,297,300,303],{"_104":211,"_95":99,"_153":212,"_155":-5,"_156":138,"_157":213,"_159":22,"_106":263,"_100":215,"_161":185,"_163":216,"_164":22,"_165":-5,"_98":308},[99],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

willthereader

HTTP101