In the last post I looked up HTTP as a stateless protocol. HTML Forms is an extensive topic, here are some key points that I found useful in one of the exercises in the book Learn Ruby the Hard Way.

Breaking down the HTML form

All forms start with:

<form action="/my-handling-form-page" method="post">

</form>

• The action attribute: location or URL where the data should be sent to when the form is submitted.
  • Can specify the URL as HTTP or HTTPS.
  • HTTPS: Data is encrypted along with the rest of the URL even if the form itself is hosted on an insecure page accessed via HTTP.
  • HTTP: Data is not encrypted. This is a insecure connection meaning all browsers will display a security warning to the user each time they try to send the data.
• The method attribute: Which HTTP method to send the data with i.e. GET or POST.

Sending files

• There are special requirements when sending binary data. Files are binary data whereas all other data is text data because HTTP is a text protocol.
  • Need to specify the value of the content-type HTTP header to the ‘enctype’ attribute. This header will tell the server what kind of data is being sent.
  • As per the MDN web docs three extra steps are required in your HTML code when sending files:
    1. Set ‘method’ attribute to POST because file content cannot be put inside the URL parameters.
    2. Set ‘enctype’ value to ‘multipart/form-data because data will be split into multiple parts.
       • One for each file
       • One for the text data included in the form body (if there is text also included in the form)
    3. Include one or more File Picker widgets to allow users to select the files that will be uploaded.

This last week I build a very simple Sinatra “Hello World” application in which a user had to submit a bit of their information via a form. One of the things the user had to do is attach a file to this form. I did a bit of research on the behind the scenes stuff - what actually happens when a user interacts with your web applications and more specifically when it involves filling out forms. Pretty boring stuff but important when it comes to building web applications - even static pages. I consulted the HTTP RFC document and the MDN documents for the research. Here are some basic key points I found useful.

HTTP - Hypertext Transfer Protocol

A request/response protocol in which clients and servers communicate/exchange data. In the simplest terms a client sends a request to a server in the form of a request method via a Web browser and the server sends a response back to the client.

The request - GET/POST

GET request:

• Browser asks server to send back a given resource.
• Data in forms gets appended into name/value pairs.
• Number of name/value pairs depends on how many pieces of data you send.
• User can see the data in their URL (therefore do not send sensitive information).

POST request:

• Browser asks the server for a response based on the data provided in the body of the HTTP request. E.g. posting the value of an HTML form.
• Data in forms gets appended to the body of the request.
• User cannot see the data in the URL.
• Preferred method of sending large amounts of data as some browsers/servers do not accept large URLs.

The response - Server side

• The server can be a single machine or several servers can be hosted on the same machine.
• The server receives the data as a string.
• The string is then parsed to get the data as a list of key/value pairs. The way to access these key/value pairs depends on the development platform/framework.
• The server can manipulate the data in several ways: - Display it - Store it in a database - Etc.

Proxy

• Lies in between the browser and the server to relay the messages
• Can perform numerous fucntions such as:
  • Caching
  • Authentication
  • Load balancing
  • Logging
  • Filtering.
• This is a much deeper subject on its own - the MDN documents cover this in much more detail.