HTML Forms

Input Types:

Text
Password
Date
Dropdown Menu
Checkbox
Radio Button
Submit
Reset

The "Name" attribute must be defined for every <input> element.

Text Field

HTML Code:

<form action = "testing.php" method="POST">
Textbox description:
<input type = "text" name = "nickname">
</form>

Web page seen by user:

Textbox description:

Password Field

HTML Code:

<form action = "testing.php" method="POST">
Password:
<input type = "password" name = "pwd">
</form>

Web page seen by user:

Password:

Date Field

HTML Code:

<form action = "testing.php" method="POST">
Date of Birth:
<input type = "date" name = "bday">
</form>

Web page seen by user:

Date of Birth:

Dropdown Selection Field

HTML Code:

<form action = "testing.php" method="POST">
     Select your Region:
     <select name = "region">
          <option value = "NT">New Territories</option>
          <option value = "KLN">Kowloon</option>
          <option value = "HK">Hong Kong Island</option>
     </select>
</form>

Web page seen by user:

Select your Region:

Checkbox Field

HTML Code:

<form action = "testing.php" method="POST">
     Hobbies:<br>
     <input type = "checkbox" name = "hobbies[]" value = "coding">Coding<br>
     <input type = "checkbox" name = "hobbies[]" value = "music">Music<br>
     <input type = "checkbox" name = "hobbies[]" value = "reading">Reading<br>
</form>

Web page seen by user:

Hobbies:
Coding
Music
Reading

Radio Button

HTML code:

<form action = "testing.php" method="POST">
     Select your gender:
     <input type = "radio" id = "male" name = "gender" value = "male">
     <label for = "male">Male</label><br>
     <input type = "radio" id = "female" name = "gender" value = "female">
     <label for = "female">Female</label><br>
</form>

Web page seen by user:

Select your gender:
Male
Female

Submit

HTML code:

Web page seen by user:

Reset

HTML code:

Web page seen by user:

Submitting an HTML Form

Sending Form Data from Client to Server

Step 1: Organising the Form's Data into Index-Value Pairs

After the submit button is clicked, the browser organises each input field into index-value pairs.
For each <input> element in the <form>, the 'name' attribute is used as the index while the data inputted by the user becomes the value.

Step 2: Client Browser prepares an HTTP Request

Form Data are always sent via an HTTP request from the client to the server.
The "Action" Attribute: Specifies the location where the HTTP Request should be sent for processing.
The "Method" Attribute: Specifies which HTTP Request Method will be used.

Step 3: Add Form Data to HTTP Request

"GET" Method:

Form's Data are integrated as part of the Request URL.

"POST" Method:

Form's Data are added as the Request Body.

Comparing GET and POST

	GET	POST
Desired Action	To fetch a specific resource from the server	To perfrom a specific action which effects a change on the server's state
How Form Data are contained in HTTP Request	Encoded as Query String which forms part of the URL Visible to user on address bar	Contained as Request Body Not visible to the user
Bookmark/Browsing History	Can be bookmarked Saved in Browsing History in some browsers	Not saved or bookmarked
Length Limit	Usually 2KB due to length limit of URL Only text data allowed
Able to be Cached?	Responses to some GET method requests can be cached	Responses to POST method requests are not cached in general

PHP Superglobals

$_POST

When server receives a POST request, all data contained in the request body are gathered into $_POST, and the PHP file can access these values in its PHP code.

For example:

Code for file where data is inputted:

<form action = "height.php" method="POST">
Height:
<input type="text" value="">
</form>

Code for height.php:

<?php
     $height = $_POST["height"];
     if ($_POST["height"] < 160) {
          echo "You're short";
     }
?>

$_GET

When server receives a GET Method request, all data contained in the query string are gathered into $_GET, and the PHP file can access these values in its PHP code.

For example:

pastpaper.php:

<?php
     $subject = $_GET["subject"];
     if ($_GET["year"] < 2012) {
          echo "No past papers before 2012";
     }
?>

Data Validation

Client-Side Validation

The client's browser validates the user's input before the data are sent to the server

Server-Side Validation

The server validates user-inputted data after it is sent to the server

Common Functions used for Server-side validation:

Validation Type	PHP function	Description
Presence Check	isset()	Returns true if the variable exists in runtime, regardless of its value
Presence Check	empty()	Returns true if the given variable either, (1) does not exist in runtime, or (2) is empty
Fixed Value Check	in_array()	Returns true if the value of the given variable exists in the array
Type Check	is_numeric()	Returns true if the given variable is a number or a number string
Type Check	is_string()	Returns true if the given variable is a string
Length Check	strlen()	Returns the number of characters in the given string
Format Check	strpos()	Returns the position of the first occurence of a substring in a string. If the substring is not found, it returns false

Cookies

Small text file stored by website on client's browser
Creates personalised experiences for each user by:
- Maintaining user preferences
- Tracking user behaviour
- Facilitating persistent authentication

How are cookies created?

Server receives an HTTP request and processes it by running the server-side script in the requested PHP file.
Server returns an HTTP response containing "set-cookie" header to the client.

The "set-cookie" header specifies the name (or index) and value of the Cookie being created.

When the server's HTTP response is received, the client's browser creates the Cookie and stores it locally on the device's storage.
When user revisits site or navigates different pages within the domain, the browser sends the stored cookie back to the server, allowing the site to recall user specific info.

Cookies created by this website/domain are attached to every HTTP request sent.

Cookies are always domain specific, meaning that HTTP requests sent to any URL in the same domain will contain the same Cookie.

Server-Side PHP scripts can access values in the client's Cookie via Superglobal: $_COOKIE.
The server can create new Cookies or overwrite existing Cookies by sending the index-value pair(s) in the "set-cookie" header of an HTTP response.

Benefits of using Cookies in web application

Cookies can be used to provide a smoother user experience and store analytics data used for market research.

Risks involved with using Cookies

Value stored in Cookie can be altered by a browser extension.
Cookies can be deleted to protect user privacy.
User disabled Cookies. Browser would ignore any "set-cookie" header in HTTP responses.
Since Cookies are sent to the server in every HTTP request, its size is extremely small, limiting the type of data suitable to be stored in a Cookie.