reading-notes

Sending Form Data

Source: Sending form data

Reference: Forms in HTML5

Elements

<form> defines how data will be sent

Attributes

action where data is sent (with no action, its sent to the same page)

<!--absolute url -->
<form action="https://example.com">
<!--relative url -->
<form action="/somewhere_else">

method how data is sent (GET versus POST)

• GET retrieve data from

  • Data sent in key:value pairs

    <form action="http://www.foo.com" method="GET">
    <div>
        <label for="say">What greeting do you want to say?</label>
        <input name="say" id="say" value="Hi">
    </div>
    <div>
        <label for="to">Who do you want to say it to?</label>
        <input name="to" id="to" value="Mom">
    </div>
    <div>
        <button>Send my greetings</button>
    </div>
    </form>
    

  • HTTP Request:

  GET /?say=Hi&to=Mom HTTP/2.0
  Host: foo.com
  

• POST send data to the server

  <form action="http://www.foo.com" method="POST">
  <div>
    <label for="say">What greeting do you want to say?</label>
    <input name="say" id="say" value="Hi">
  </div>
  <div>
    <label for="to">Who do you want to say it to?</label>
    <input name="to" id="to" value="Mom">
  </div>
  <div>
    <button>Send my greetings</button>
  </div>
  </form>
  

  • HTTP Request

  POST / HTTP/2.0
  Host: foo.com
  Content-Type: application/x-www-form-urlencoded
  Content-Length: 13
  
  say=Hi&to=Mom
  

Viewing HTTP Requests

In Chrome:

1. Open the developer tools.
2. Select “Network”
3. Select “All”
4. Select “foo.com” in the “Name” tab
5. Select “Headers”

Sending Files

Extra steps:

1. method="post"
2. enctype ="multipart/form-data"
3. Include 1+ <input type="file">

<form method="post" action="https://www.foo.com" enctype="multipart/form-data">
  <div>
    <label for="file">Choose a file</label>
    <input type="file" id="file" name="myFile">
  </div>
  <div>
    <button>Send the file</button>
  </div>
</form>

Security

• HTML Forms are most common server server attack targets
• Escape potentially dangerous characters.
• Limit the incoming amount of data to allow only what’s necessary.
• Sandbox uploaded files.

All data that comes to your server must be checked and sanitized. Always. No exception.