Read:13 | Form Data

MDN: Forms and Data
Reference: HTML Forms
YouTube: HTML 5 Form Styling Video

General Notes from the MDN Sending Data page

When a user submits a form - where does the data go? How do we handle the data when it gets to where it’s going?

• A client (like browser) sends a request to a server using the HTTP protocol, the server answers with the same protocol
• HTML form is user-friendly way to configure HTTP request to send data to a server
• The <form> element defines how the data is sent w/its action and method attributes

action attribute defines where data is sent via a:

• relative URL <form action="/somewhere_else">
• absolute URL <form action="https://example.com>

Note: If your form is hosted on HTTPS but you specifiy data to be sent to HTTP (insecure) you will get a security warning as a user because data will not be encrypted.

• The server responds by handling data and loading the URL, often causing a page reload if pointed to the same page.

method attribute defines how data is sent

• HTML form data is transmitted most commonly as GET or POST method

  Remember: HTTP request consists of 2 things: header that contains set of global metadata about browser capabilities and body with necessary info for the server to process

• GET basically asks the server to send back a specific resource
• You’ll see that resource appear in the address bar when you submit the form:
  • www.foo.com/?say=Hi&to=Mom appears with this code in the html:
  • 
  • Data in the URL is series of key/value pairs tied with &
• POST basically says “Hey server, look at this data and send me back an appropriate result” and the data is appended to the body of the HTTP request.
• Note: The POST method does NOT append data in the URL. A POST HTTP request looks like this:
  • 
  • Content-Length header indicates size of body
  • Content-Type header is type of resrouce sent to server
• HTTP requests are never dispalyed to the user, if you want to see them use Chrome Dev tools in the Network section

REMEMBER

Only thing the users sees is the URL called (when using GET) and with POST the user sees nothing. Ex: To send a password NEVER use GET because you don’t want this to show up in the URL

On the Server Side | When it recieves Data

• It takes a string and parses to get the key/value pair data
• It is accessed depending on the development platform and framework you use
• While there are many server-side technologies for form handling, it is more common to use a high-quality framework such as:
  • Django for Python
  • Express for Node.js
  • Laravel for PHP
  • Ruby on Rails for Ruby
• Frameworks make it easier than trying to do this from scratch

A note about sending Files

• There are 3 special requirements to consider when sending files
  • Set method to POST so it’s not in the URL
  • Set the value of enctype to multipart/form-data
  • Include one or more <input type="file"> controls to allow users to select the file(s) that will be uploaded

    Tip: set size limit to prevent abuse

A note about Security

• Never trust your users or yourself!
• Attacks most commonly happen in the part that dictates how the server handles data
• All data must be checked and santizied!!
  • Escape dangerous characters like char sequences that look like executable code liks JS or SQL
  • Limit incoming amount of data to what’s necessary
  • Sandbox uploaded files (store them in a different server and allow access via a subdomain)

Back to Home