Validating Data / Handling Cookies: HTML Form

Validating data / Handling Cookies (Ch. 14.2 - 14.
3)
HTML Form

Collect information from visitors Begin with the <form> tag and end with the </form> tag The <form> tag contains several attributes, such as name, method and action. Usage
i. ii. iii.
Note: HTML Form Input Types (Please refer to notes on HTML) Text box Text area Selection box Drop down box Radio Button Check box Button (submit, reset)
Registration Questionnaire Login
Example
<form name='frm_input' action='http://www.ktgss.edu.hk/userinput.php' method='POST'>
i. ii. iii.
The name of the form is "frm_input" The form value will be sent to http://www.ktgss.edu.hk/userinput.php The FORM Method attribute is either
Method = POST or Method = GET
iv.
Sending with Method GET

a.
The form value is sent via a browser URL, like

http://www.ktgss.edu.hk/userinput.php?name=Bill&gender=male
b. c. d.
The part after the question mark is the value sent to userinput.php. Multiple values are separated with an ampersand (&). In the above example, two values, name=Bill and gender=male are sent to
http://www.ktgss.edu.hk/userinput.php.
v.
Sending with Method POST

3
a. b.
The form value is sent without displaying on browser URL. POST is the preferred method for sending protected data, such as password.
4 2
Flow of Form Processing

1. 2. 3. 4. Visitor inputs the HTML form and clicks submit button Form value is submitted to server Server program, such as PHP script, will get and process the form data Server program gives appropriate response to the visitor after the data are processed.
Internet
1
Validating data and handling cookies
page 1
Example1 : Checking the Password The inputted password is sent and processed by a PHP script, checkpassword.php. checkpassword.htm checkpassword.php
<?PHP if ($_POST['password_in'] == "123456") echo "WELCOME!"; else echo "WRONG PASSWORD"; ?>
<html> <title>Checking Password</title> <body> <form action='checkpassword.php' method='POST'> Please enter your password: <input type='password' name='password_in' size='20'> <br><br> <input type='submit' value='check the password'> <input type='reset' value='reset'> </form> </body> </html>
General Flow of Data Validation

After a form has been filled in, there can be single item validation, and logical data validation. Single item validation
i. ii.
Verifying if the input is in the correct domain Verifying if the input is in the correct range or length
Logical data validation

i.
It can be related to a single data item or multiple data items. For examples:
a. b.
Validation of student ID Suppose Item A is Age and Item B is Class. If the value of A is 14 while B is of class Form 6, there is a high possibility of data entry error.
Form validation
i. ii.
Checking if the form has been filled correctly before it is processed. Server-side validation
a. b. c.
Using PHP script, ASP, Servlet, etc More secure Program coding is more complicated
iii.
Client-side validation
a. b. c.
Commonly using JavaScript Easier to implement Faster response
page 2
Example: Validate an input HKID (PHP)
Validation Rules:
i. ii. iii. iv. v. vi.
All fields should be filled The first field of HKID (hkid_letter_in) should be a letter The middle field of HKID (hkid_number_in) should be digits with the length of 6. The last field of HKID (hkid_letter_bracket) should be a letter or digit. Gender (gender_in) should be selected. HTML codes:
Here is the codes of the HTML form:

<html> <body> <form name='frm_register' action='register.php' method='POST'> Name: <input type='text' name='name_in' size=25> <br> HKID: <input type='text' name='hkid_letter_in' size=1 maxlength=1> -<input type='text' name='hkid_number_in' size=6 maxlength=6> (<input type='text' name='hkid_letter_bracket' size=1 maxlength=1>) <br> Gender: <input type='radio' name='gender_in' value='Male'> Male <input type='radio' name='gender_in' value='Female'> Female <br><br> <input type='submit' value='submit'> <input type='reset' value='reset'> </form> </body> </html>
Here are the PHP codes:

<?PHP if ($_POST[name_in] == "") echo "Please fill in the 'Name' box<br>"; if (($_POST[hkid_letter_in] == "")|| ($_POST[hkid_number_in] == "")|| ($_POST[hkid_bracket_in] == "")) echo "Please fill the all the 'HKID' boxes<br>"; if ($_POST[gender_in] == "") echo "Please choose the Gender<br>"; if (!eregi("^[_a-z]", $_POST[hkid_letter_in])) echo "The first box of the HKID should be a letter<br>"; if(!ereg("^[0-9]+$", $_POST[hkid_number_in])) echo "The second box of the HKID should be digits<br>"; if (strlen($_POST[hkid_number_in]) != 6) echo "The second box of the HKID should be in length of 6<br>"; if ((!eregi("^[_a-z]", $_POST[hkid_bracket_in]))&&(!ereg("^[0-9]+$", $_POST[hkid_bracket_in]))) echo "The third box of the HKID should be digit or letter<br>"; ?>
page 3
Client-side Validation (JavaScript)
The <form> tag is changed as follows:

<form name='frm_register' action='register.php' method='POST' onSubmit="return validate_form()">
The form is given a name of frm_register and onSubmit attribute is added to the <form> tag. A JavaScript function validate_form() is added and the JavaScript function will be called when the Submit button is clicked. The return allows the JavaScript function returns either true or false.
i. ii.
return the value true means submit the form to server return the value false means DO NOT submit the form
JavaScript codes to validate:
<script type="text/javascript"> <!-function validate_form ( ) { valid = true; nums = /^[0-9]*$/; letters = /^[a-zA-Z]*$/; if (frm_register.name_in.value == "" ) { alert ( "Please fill in the 'Name' box" ); valid = false; } if ((frm_register.hkid_letter_in.value == "") ||(frm_register.hkid_number_in.value == "") ||(frm_register.hkid_bracket_in.value == "")) { alert ( "Please fill the all the 'HKID' boxes" ); valid = false; } if ((frm_register.gender_in[0].checked == false)&& (frm_register.gender_in[1].checked == false)) { alert ( "Please choose the Gender"); valid = false; } if (!letters.test(frm_register.hkid_letter_in.value)) { alert("The first box of the HKID should be a letter"); valid = false; } if (!nums.test(frm_register.hkid_number_in.value)) { alert("The second box of the HKID should be digits"); valid = false; } if ((!letters.test(frm_register.hkid_bracket_in.value))&& (!nums.test(frm_register.hkid_bracket_in.value))) { alert("The third box of the HKID should be digit or letter"); valid = false; } if (frm_register.hkid_number_in.value.lenght != 6) { alert ( "The second box of the HKID should be in length of 6" ); valid = false; } return valid; } //--> </script>
page 4
Creating Quizzes with Multiple Input Formats
Procedure to conduct a quiz:

i. ii. iii. iv. v.
Display a question Create a fill-in form to get answers Submit the users answers to server Process the answers by server script, such as PHP, and check whether the answers are correct Display the result
Question Types:
i. ii. iii. iv.
Multiple Choice Fill in the blanks Multiple Answers Matching
4. Multiple Choice Example

PHP page <?php
HTML page <html> <head> <title>Quiz</title> </head> <body> <form action='quiz.php' method='POST'> Question 1<br> Please (submit) your application before five o'clock. <br> <input type='radio' name='q1_ans' value='hand off'> hand off <br> <input type='radio' name='q1_ans' value='hand in'> hand in <br> <input type='radio' name='q1_ans' value='hand down'> hand down <br> <input type='radio' name='q1_ans' value='hand out'> hand out <br> <br> Question 2<br> Please fill in your answer<br> 10 + 5 x 2 = <input type='text' name='q2_ans' size=5> <br> <br>
echo "<br>Question 1<br>"; if ($_POST['q1_ans']=="hand in") echo "Correct!<br>"; else { echo "Wrong Answer!<br>"; echo "The correct answer is 'hand in'"; }
echo "<br>Question 2<br>"; if ($_POST['q2_ans']==20) echo "Correct!<br>"; else { echo "Wrong Answer!<br>"; echo "The correct answer is 20"; } echo "<br>Question 3<br>"; If (isset($_POST['q3_ans_a'])&& !isset($_POST['q3_ans_b'])&& isset($_POST['q3_ans_c'])&& !isset($_POST['q3_ans_d'])&& isset($_POST['q3_ans_e'])) echo "Correct!<br>"; else { echo "Wrong Answer!<br>"; echo "The correct statements are:<br> 1 + 10 x 0 = 1<br> 3 x 3 x 3 = 27<br> 5 + 6 + 7 = 18 <br>"; }
Question 3<br> Select all the correct statements below<br> <input type='checkbox' name='q3_ans_a' value='yes'> 1 + 10 x 0 = 1<br> <input type='checkbox' name='q3_ans_b' value='yes'> 2 x 20 + 5 = 40<br> <input type='checkbox' name='q3_ans_c' value='yes'> 3 x 3 x 3 = 27<br> <input type='checkbox' name='q3_ans_d' value='yes'> 4 + 6 x 2 = 20 <br> <input type='checkbox' name='q3_ans_e' value='yes'> 5 + 6 + 7 = 18 <br> <br>
page 5
Question 4<br> Rose ------<select name='q4_ans_rose'> <option value=''></option> <option value='animal'>Animal</option> <option value='flower'>Flower</option> <option value='fruit'>Fruit</option> </select> <br> Dog ------<select name='q4_ans_dog'><option value=''></option> <option value='animal'>Animal</option> <option value='flower'>Flower</option> <option value='fruit'>Fruit</option> </select> <br> Apple ------<select name='q4_ans_apple'> <option value=''></option> <option value='animal'>Animal</option> <option value='flower'>Flower</option> <option value='fruit'>Fruit</option> </select> <br> <input type='submit' value='submit'> </form> </body> </html>
echo "<br>Question 4<br>"; if (($_POST['q4_ans_rose']=="flower")&& ($_POST['q4_ans_dog']=="animal")&& ($_POST['q4_ans_apple']=="fruit")) echo "Correct!<br>"; else { echo "Wrong Answer!<br>"; echo "<br> The Answer is<br> Rose ------- flower<br> Dog ------- animal<br> Apple ------- fruit<br>"; }
?>
Screen layout:
page 6
What is Cookie

Cookies are small amounts of information that a foreign computer can leave on your computer. The cookie also contains
i. ii.
An expiry date
Why We Need Cookie

i.
If you have cookies enabled in your machine, it will store your station name and station number there to be used to fill in those items in our data entry forms. This means that you only have to remember your station name and number once and we will fill it in for you after that They are also often used to remember password and login information for private sites or your setup preferences of your home page.
ii.
iii.
Personalization

Customize the delivery of a Web page to make it more useful for individual users Tailor your output to different types of browsers Drawbacks of Cookies
i. ii. iii. iv. v.
Inaccurate identification Cookie theft Cookie poisoning Cross-site cooking Inconsistent state on client and server
Inaccurate Identification
i. ii.
Anyone who uses more than one account, computer, or browser has more than one set of cookies. Cookies do not differentiate among multiple users who share a computer and browser.
Cookie Theft. Cookies can be stolen and read by unauthorized computers on the network. Cookie Poisoning. The values of Cookies are supposed to be stored and sent back to the server without any modification. Attackers may modify the cookies and send back the inappropriate cookies to the server. Cross-site Cooking. Similar to cookie poisoning, attackers exploit a browser bug to send a modified cookie to the server Inconsistent State on Client and Server. The use of cookies may generate an inconsistency between the state of the client and the state as stored in the cookie. If a user acquires a cookie and then clicks the "Back" button of the browser, the state on the browser is generally not the same as before that acquisition.
page 7
Sample program to set and read a cookie when a user browse a web page.
<html> <head> <script language="JavaScript"> function setcookie() { document.cookie = "name=peter; expires=Sun, 1 Jan 2012 12:00:00 GMT"; } function readcookie() { if (document.cookie) { var mycookie = document.cookie; window.alert(mycookie); } } </script> </head> <body onLoad="readcookie()"> <form name="myform"> <input type = "button" value="Set cookie" onClick="setcookie();"> </body> </html>
click and then reload the page
page 8

Validating Data / Handling Cookies: HTML Form

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Validating Data / Handling Cookies: HTML Form

Caricato da

Copyright:

Formati disponibili

Validating data / Handling Cookies (Ch. 14.2 - 14.

Registration Questionnaire Login

Sending with Method GET

The form value is sent via a browser URL, like

Sending with Method POST

Flow of Form Processing

Validating data and handling cookies

General Flow of Data Validation

Logical data validation

Commonly using JavaScript Easier to implement Faster response

Validating data and handling cookies

Example: Validate an input HKID (PHP)

Here is the codes of the HTML form:

Here are the PHP codes:

Validating data and handling cookies

Client-side Validation (JavaScript)

The <form> tag is changed as follows:

JavaScript codes to validate:

Validating data and handling cookies

Creating Quizzes with Multiple Input Formats

Procedure to conduct a quiz:

Multiple Choice Fill in the blanks Multiple Answers Matching

4. Multiple Choice Example

Validating data and handling cookies

Validating data and handling cookies

Why We Need Cookie

Validating data and handling cookies

click and then reload the page

Validating data and handling cookies

Potrebbero piacerti anche