FORMS - vijayetar/seattle-301d55 GitHub Wiki

Use this for reference

There are some buttons that are very important:

Action attribute
The action attribute defines where the data gets sent. Its value must be a valid relative or absolute URL. If this attribute isn't provided, the data will be sent to the URL of the page containing the form — the current page.

Absolute URL
form action="https://example.com"
form action="/somewhere_else"
form

Method Attribute
The method attribute defines how data is sent.

The GET method is the method used by the browser to ask the server to send back a given resource: "Hey server, I want to get this resource." In this case, the browser sends an empty body. Because the body is empty, if a form is sent using this method the data sent to the server is appended to the URL.

The POST method is a little different. It's the method the browser uses to talk to the server when asking for a response that takes into account the data provided in the body of the HTTP request: "Hey server, take a look at this data and send me back an appropriate result." If a form is sent using this method, the data is appended to the body of the HTTP request.

HTTP requests are never displayed to the user (if you want to see them, you need to use tools such as the Firefox Network Monitor or the Chrome Developer Tools). As an example, your form data will be shown as follows in the Chrome Network tab. After submitting the form:

  • Open the developer tools.
  • Select "Network"
  • Select "All"
  • Select "foo.com" in the "Name" tab
  • Select "Headers"

If you need to send a password (or any other sensitive piece of data), never use the GET
If you need to send a large amount of data, the POST method is preferred

If you want to send files, you need to take three extra steps:

  • Set the method attribute to POST because file content can't be put inside URL parameters.
  • Set the value of enctype to multipart/form-data because the data will be split into multiple parts, one for each file plus one for the text data included in the form body (if text is also entered into the form).
  • Include one or more controls to allow your users to select the file(s) that will be uploaded.