IERG4210 Web Programming and Security

Forms I - Client-side Implementations

Sherman Chow
Spring, 2021
Dept. of Information Engineering
The Chinese University of Hong Kong

Adapted from slides by Dr. Adonis Fung (and Prof. Kehuan Zhang)


Introduction to HTTP

Client-Server Model

Interaction between Browser and Web Server

Surfing the Web using Telnet

$ telnet 80
Connected to
Escape character is '^]'.
GET / HTTP/1.1

HTTP/1.1 301 Moved Permanently
Date: Wed, 03 Feb 2021 18:11:26 GMT
Server: Apache
Content-Length: 235
Content-Type: text/html; charset=iso-8859-1

<title>301 Moved Permanently</title>
<h1>Moved Permanently</h1>
<p>The document has moved <a 

Typical HTTP Requests

Typical HTTP Response

HTML Forms

<form> Attributes

Form Controls (1/4: Most Common Controls)

Form Controls (2/4: Offering Choices)

Form Controls (3/4: More Controls)

Form Controls (4/4: HTML 5 New Controls)

Regular Expressions

HTML5 Forms: Browser Support - Types

Browser Support for HTML5 Form Types
A partial list captured from

HTML5 Forms: Browser Support - Attributes

Browser Support for HTML5 Form Attributes
A partial list captured from

Client-side Restrictions

3 Approaches of Client-side Restrictions

  1. The use of different form controls
    • e.g., Radioboxes for genders implies a restriction on only two possible values, i.e., M or F
    • e.g., Dropdown menu implies a restriction on accepting some default choices
  2. Validations with HTML5 (shown in the previous slide)
    • The first built-in support of client-side validations by IE 10+, Firefox 4+, Chrome, etc.
    • e.g., Email, URL, Search, and Custom fields we just see
  3. Validations with Javascript (to be discussed in next slide)
    • The programmatic way to customize input patterns
    • Well-supported across browsers

Form Validations with Javascript (1/4)

Form Validations with Javascript (2/4)

Form Validations with Javascript (3/4)

Form Validations with Javascript (4/4)

3 Form Submission Approaches

  1. Traditional Form Submission (demonstrated in the previous slide)
    • Triggered by a submit button or the Enter key
    • Fires the submit event, where one can validate before a form submission
  2. Programmatic Form Submission
    • Recommended to use this only when submitting a form automatically
      <form method="POST" id="buildAutoPostReq"><!-- Some hidden fields here --></form>
      <script type="text/javascript">document.forms[0].submit();</script>
    • Unfortunately, programmers (incl. HSBC) who don't know <input type="image"> like to do this for images: When an image is clicked, Form.submit() will be finally called if a form is properly validated
    • BAD: NO submit event is fired. Without code analysis, difficult to know whether a submission has actually occurred
  3. AJAX Form Submission (to be discussed in the next slide)
    • AJAX: Asynchronous Javascript and XML; It's all about the XMLHttpRequest API, study it before using it to submit form data

AJAX Form Submission (1/3)

AJAX: Synchronous vs. Asynchronous (1/3)

classic synchronous mode of web application As opposed to asynchronous calls, synchronous calls are blocking (hangs) until the server returns, i.e., less efficient
Image Source: John Resig, Pro Javascript Techniques, p.26, 2007

AJAX: Synchronous vs. Asynchronous (2/3)

Ajax asynchronous mode of web application
Image Source: John Resig, Pro Javascript Techniques, p.26, 2007

AJAX: Synchronous vs. Asynchronous (3/3)

AJAX: Implementation w/ XMLHttpRequest

// e.g., to call, myLib.ajax({url:'process.php?q=hello',success:function(m){alert(m)}});
  myLib.ajax = function(opt) { opt = opt || {};
    var xhr = (window.XMLHttpRequest)                  // Usu. ?/|| is for compatibility
            ? new XMLHttpRequest()                     // IE7+, Firefox1+, Chrome1+, etc
            : new ActiveXObject("Microsoft.XMLHTTP"),  // IE 6
        async = opt.async || true,
        success = opt.success || null, error = opt.error || function(){/*displayErr()*/};
    // pass three parameters, otherwise the default ones, to || 'GET', opt.url || '', async); // 3rd param true = async
    if (opt.method == 'POST') 
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    // Asyhronous Call requires a callback function listening on readystatechange
    if (async)
      xhr.onreadystatechange = function(){
        if (xhr.readyState == 4) { // 4 is "more ready" than 3 or 2	
		  var status = xhr.status;
          if ((status >= 200 && status < 300) || status == 304 || status == 1223)
            success &&, xhr.responseText); // raw content of the response
          else if (status < 200 || status >= 400)
    xhr.onerror = function(){};
    // POST parameters encoded as is passed here to xhr.send()
    xhr.send( || null);
    // Synchronous Call blocks UI and returns result immediately after xhr.send()
    !async && success &&, xhr.responseText);

AJAX Form Submission (2/3)

AJAX Form Submission (3/3)

Our myLib.js so far...

When all the functions (incl. myLib.validate()) are built in a single library

More on XMLHttpRequest