Академический Документы
Профессиональный Документы
Культура Документы
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)
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.
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.
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
Internet
1
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>
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
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.
page 2
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:
page 3
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
<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
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.
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
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>
page 8