Processing FORM data from an HTTP POST
CS-160: Software Engineering
Instructor: Rob Bruce
Fall 2016

SLIDE 1: HTML forms

  • HTML forms provide a means of getting user input.
  • User inputs data through HTML widgets.
  • Example HTML widgets:
  • Text entry boxes
  • Pull-down menus
  • Radio buttons
  • Checkboxes
  • Form submit button

SLIDE 2: HTML widgets (examples)

Example of a text entry box:

Example of a pull-down menu:

Example radio buttons: Frosh Sophomore Junior Senior Graduate

Example checkboxes: Banana Strawberry Mango Apple Peach

Example form submit button:

SLIDE 3: HTML forms

  • When user presses the "submit" button, all form data encapsulated in <form> element is sent to the server.
  • The action element tells the browser (the client) where to send the data (i.e. a URL).
  • The data can be sent to the server using one of two methods:
  • GET
  • POST

SLIDE 4: Example HTML form

Username:

Password:

Confirm password:

SLIDE 5: Dissecting the example HTML form

Below is an example HTML form one might use for a registration page.

<!DOCTYPE html>
<html>
  <head>
    <title>New user registration</title>
  </head>
  <body>
    <form method="post" action="http://localhost/cgi-bin/register.cgi" enctype="application/x-www-form-urlencoded">
      <fieldset style="display:none"><input type="hidden" name="new_user_registration" value="1" /></fieldset>
      <p>Username:<br /><input type="text" size="50" name="new_registration_username" /></p>
      <p>Password:<br /><input type="password" size="50" name="new_registration_password" /></p>
      <p>Confirm password:<br /><input type="password" size="50" name="new_registration_password_confirmation" /></p>
      <p><input type="submit" name="registration" value="Create My Account" /></p>
    </form>
  </body>
</html>

SLIDE 6: Dissecting the example HTML form

Notice the highlighted HTML code below (method="post"). This is where we define what method to use for sending variable/value pairs to the web server. In this situation, we are using the POST method.

<!DOCTYPE html>
<html>
  <head>
    <title>New user registration</title>
  </head>
  <body>
    <form method="post" action="http://localhost/cgi-bin/register.cgi" enctype="application/x-www-form-urlencoded">
      <fieldset style="display:none"><input type="hidden" name="new_user_registration" value="1" /></fieldset>
      <p>Username:<br /><input type="text" size="50" name="new_registration_username" /></p>
      <p>Password:<br /><input type="password" size="50" name="new_registration_password" /></p>
      <p>Confirm password:<br /><input type="password" size="50" name="new_registration_password_confirmation" /></p>
      <p><input type="submit" name="registration" value="Create My Account" /></p>
    </form>
  </body>
</html>

SLIDE 7: Dissecting the example HTML form

Notice the highlighted HTML code below (action="http://localhost/cgi-bin/register.cgi"). This line tells the web server where to send the variable/value data encoded in this form (i.e. the Uniform Resource Location or web address). In this case, we are sending it to localhost. Localhost is your the name of your own computer.

<!DOCTYPE html>
<html>
  <head>
    <title>New user registration</title>
  </head>
  <body>
    <form method="post" action="http://localhost/cgi-bin/register.cgi" enctype="application/x-www-form-urlencoded">
      <fieldset style="display:none"><input type="hidden" name="new_user_registration" value="1" /></fieldset>
      <p>Username:<br /><input type="text" size="50" name="new_registration_username" /></p>
      <p>Password:<br /><input type="password" size="50" name="new_registration_password" /></p>
      <p>Confirm password:<br /><input type="password" size="50" name="new_registration_password_confirmation" /></p>
      <p><input type="submit" name="registration" value="Create My Account" /></p>
    </form>
  </body>
</html>

SLIDE 8: Dissecting the example HTML form

If the form below is submitted to the web server running on localhost, four variables will be submitted:

  • new_registration_username
  • new_registration_password
  • new_registration_password_confirmation
  • registration

<!DOCTYPE html>
<html>
  <head>
    <title>New user registration</title>
  </head>
  <body>
    <form method="post" action="http://localhost/cgi-bin/register.cgi" enctype="application/x-www-form-urlencoded">
      <fieldset style="display:none"><input type="hidden" name="new_user_registration" value="1" /></fieldset>
      <p>Username:<br /><input type="text" size="50" name="new_registration_username" /></p>
      <p>Password:<br /><input type="password" size="50" name="new_registration_password" /></p>
      <p>Confirm password:<br /><input type="password" size="50" name="new_registration_password_confirmation" /></p>
      <p><input type="submit" name="registration" value="Create My Account" /></p>
    </form>
  </body>
</html>

SLIDE 9: Example HTML form: when submit is pressed...

  • When the user presses the button labeled, "Create My Account" all data inside the form (above) will be submitted to the webserver running on localhost.
  • The web server will deliver the form data to a program called "register.cgi" which is presumably installed on the webserver in a sub-directory called cgi-bin.

SLIDE 10: CGI: The Common Gateway Interface

  • The Common Gateway Interface is responsible for transferring all user-submitted form data from the web server to the user-specified program for processing.
  • The web server makes user-submitted form data available through some standardized environment variables:
  • CONTENT_LENGTH (for data using the POST method)
  • QUERY_STRING (for data using the GET method)

SLIDE 11: Other environment variables available from the webserver

  • To retrieve the Internet Protocol (IP) address of the client who submitted form data to your CGI application, use the following environment variable
  • REMOTE_ADDR

SLIDE 12: Other environment variables available from the webserver

  • To retrieve the type of web browser (Firefox, Chrome, Safari, Internet Explorer, etc.) the user ran when submitting form data, use the following environment variable
  • HTTP_USER_AGENT

SLIDE 13: GET vs. POST methods

  • GET and POST both return variable/value pairs
  • A variable/value pair is simply: variable name = some value
  • For example: first_name (the variable) = rob (the value)
  • The POST method does not transfer data in the URL while the GET method does.

SLIDE 14: GET method example

In the example form above, if we changed the method from POST to GET and then submitted the following form data to our localhost CGI application, register.cgi:

Username:

Password:

Confirm password:

After the user presses the Create My Account button, the URL would look like this:

http://localhost/cgi-bin/register.cgi?new_user_registration=1&new_registration_username=rbruce&new_registration_password=super%20secret&new_registration_password_confirmation=super%20secret&registration=Create%20My%20Account

Note that in this long URL:

  • The first variable/value pair is separated from the CGI program (register.cgi) by a question mark: ?
  • Notice the pattern inside the long URL string is basically variable=value
  • If there is more than one variable/value pair, each variable=value pair is separated by an ampersand: &
  • ASCII characters that are unprintable (e.g. <return> or <space>) are encoded as their hexadecimal equivalents. Therefore, %20 is hex for ASCII space.

SLIDE 15: GET method example

The variable/value pairs passed into register.cgi from the GET method are as follows:

VARIABLE VALUE
new_user_registration 1
new_registration_username rbruce
new_registration_password super secret
new_registration_password_confirmation super secret
registration Create My Account

Robert Bruce

Contact and Office hours

Education

Research interests

Research

Publications

Graduate supervision

Undergraduate supervision

Courses

Fall 2016, CS-160:

Greensheet

Lectures:

Assignments:

Handouts:

Programs:

Other

Valid XHTML 1.0 Strict Valid CSS!