1. The conditional statement General form: if ( ) { consequent-action-list } Actual Example: if (document.getElemendById(‘name’).value= ='') { alert(‘Name is empty’) }

2. Conditions Many forms are possible. Equality is one type General form of equality condition: = = Actual Example: document.getElementById(‘name’).value= ='’ Note that, in conditions, equality is written as two = characters, that is as = =

3. More on conditions Besides = = (for equality) we can use these other types of comparison operators in conditions: != not equal < less than > greater than <= less than or equal to >= greater than or equal to

4. More on conditions We can also build compound conditions using the following logical operators: && logical and || logical or ! logical not Examples: document.getElementById(‘name’)value = = ‘Fred’ || document.getElementById(‘name’).value==‘Tom’ document.getElementById(‘age’).value >= 16 && document.getElementById(‘age’).value <= 20

5. Alert actions General form of alert action: alert( ) Actual Examples: alert(‘Name is empty’) alert(document.getElementById(‘age’).value)

6. Complete docmn’t spec (Part I) Membership Application Form form {background-color : red; padding : 0.2in} fieldset {padding : 0.2in} button {margin : 0.1in} function checkApplication() { if (document.getElementById(‘name’).value=='') { alert("Name is empty"); } if (document.getElementById(‘email’).value=='') { alert("Email address is empty"); } }

7. Complete docmn’t spec (Part II) If you want to join our club, complete the form below and we will get back to you. Membership Application Form Contact Information What is your name? Please enter your email address:

8. Complete docmn’t spec (Part III) Form Submission Check application Submit application

9. The size attribute In the examples so far, input elements of type=text were given, on the form, a user-input box of a default size You can, however, specify the exact size you want, by using the attribute size Examples: You can see the effect of these size specifications on the next slide WARNING: Some versions of Microsoft Internet Explorer actually makes user-input boxes one character longer than your specified size!

11. Length of user-input versus size of user-input box The user’s input is not restricted to the size of the user-input box On the next four slides, you can see, from the server-side responses, that the user input names which were much longer than the user-input box

12. User’s input exceeds default size of user-input box

13. Here we can see how long the user’s name really was

14. User’s input can exceed a box of specified size too:

15. Again, we see the full-name:

16. We can, however, impose an upper-limit on the user’s input: We can use the MAXLENGTH attribute Example <input type=‘text’ name=‘localPhoneNumber’ id=‘localPhoneNumber’ size=‘6’ maxlength=‘6’> This is used on the next slide: –when the user tries to input more than 6 characters in this box the browser refuses to accept them (even though the form shows the box as longer than 6 characters!)

19. More types of input elements

21. Of course, the server does not send the password back:

22. INPUTs of type=checkbox An input element of type=checkbox produces a little box into which the user can place a mark to indicate a desire to select the value that is associated with the element This type of element must have a value attribute to specify the associated value Example If the user places a in the box produced by this element the server-side program would be told that the user selected navyBlue as a colour Three check-boxes are used on the next slide

24. Using the checkboxes By clicking on one or more of these checkboxes, the user can select one or more T-shirts that he wants to order

27. Form Specification Order What is your name? Please select which style(s) of T-shirt you want: <input type=‘checkbox’ name=‘products’ value=‘Batman’> Batman's cloak <input type=‘checkbox’ name=‘products’ value=‘Superman’> Superman’s cloak <input type=‘checkbox’ name=‘products’ value=‘Dr. Who’> Dr. Who's coat Form Submission Submit order

28. If we want to use JavaScript with the checkboxes, we must give each one a separate ID Order What is your name? Please select which style(s) of T-shirt you want: <input type=‘checkbox’ name=‘products’ id=‘products1’ value=‘Batman’> Batman's cloak <input type=‘checkbox’ name=‘products’ id=‘products2’ value=‘Superman’> Superman’s cloak <input type=‘checkbox’ name=‘products’ id=‘products3’ value=‘Dr. Who’> Dr. Who's coat Form Submission Submit order

29. Oh, by the way: On the screen below, we eliminate list “bullets” by the following line in a stylesheet li {list-style-type : none}

30. Using text with checkboxes You must use text with checkboxes –otherwise, the user will not know what he is selecting –this is because the value associated with the checkbox is not printed by a browser Example: Batman's cloak The user sees Batman's cloak in the browser beside the checkbox

31. Multiple checkboxes with same name Notice that we can have multiple checkboxes with the same name: Batman's cloak Superman’s cloak Dr. Who's coat If the user selects more than one checkbox with the same name, several equations involving this name are sent to the server-side program, e.g.: products=Batman products=Superman

32. If we want to send the data to a PHP program, we must [] in the name of the checkboxes Order What is your name? Please select which style(s) of T-shirt you want: <input type=‘checkbox’ name=‘products[]’ value=‘Batman’> Batman's cloak <input type=‘checkbox’ name=‘products[]’ value=‘Superman’> Superman’s cloak <input type=‘checkbox’ name=‘products[]’ value=‘Dr. Who’> Dr. Who's coat Form Submission Submit order

33. A PHP program which can handle several checked checkboxes with the same name

37. Complete programme (top-level) Product ordering Product ordering <?php $customerName=$_POST['customerName']; if (!$customerName) { ……………. } else { ……………. } ?>

38. Complete programme (then-part) ?> Order What is your name? Please select which style(s) of T-shirt you want: <input type='checkbox' name='products[]' value='Batman'> Batman's cloak <input type='checkbox' name='products[]' value='Superman'> Supermans cloak <input type='checkbox' name='products[]' value='Dr. Who'> Dr. Who's coat Form Submission Submit order <?php

39. Complete programme (else-part) $products=$_POST['products']; $nProducts=count($products); echo " Welcome, $customerName. "; echo " You selected $nProducts product(s). "; if ($nProducts >0) { echo " These were:"; echo " "; $counter=0; while ($counter<$nProducts) { echo " "; echo $products[$counter]; echo " "; $counter=$counter+1; } echo " "; }

40. Style sheet form {background-color:red; padding:0.2in } fieldset { padding:0.2in } li { list-style-type : none }

41. Of course, top-down programming is easier

42. Complete programme (page 1) Product ordering Product ordering <?php $customerName=$_POST['customerName']; if (!$customerName) { printForm(); } else {$products=$_POST['products']; reportOrder($customerName,$products); } ?>

43. Complete programme (page 2) <?php function printForm() { ?> Order What is your name? Please select which style(s) of T-shirt you want: <input type='checkbox' name='products[]' value='Batman'> Batman's cloak <input type='checkbox' name='products[]' value='Superman'> Supermans cloak <input type='checkbox' name='products[]' value='Dr. Who'> Dr. Who's coat Form Submission Submit order <?php }

44. Complete programme (page 3) function reportorder($customerName,$products) { $nProducts=count($products); echo " Welcome, $customerName. "; echo " You selected $nProducts product(s). "; if ($nProducts >0) { echo " These were:"; echo " "; $counter=0; while ($counter<$nProducts) { echo " "; echo $products[$counter]; echo " "; $counter=$counter+1; } echo " "; } ?>

45. Default selection of checkboxes The web page on the next slide is trying to encourage the user to buy the Superman T- shirt It does so by “pre-selecting” the checkbox for this T-shirt and by having some associated “pushy” text

47. More on default selection A checkbox is preselected by using the attribute CHECKED in the input element: Batman's cloak Superman's cloak (our best-selling item) Dr. Who's coat The user can, of course, remove the from a checkbox by clicking on the box

48. input elements of type=radio The word radio derives from the concept of “radio buttons” -- the station selection buttons on car-radios Properties of radio buttons: –they represent alternatives –only one alternative can be selected –selecting one alternative has the side-effect of automatically de-selecting any previous selection input elements of type=radio have the same properties

49. More on input elements of type=radio The following slide shows a radio button version of the previous order form Now the user can buy only one T-shirt

51. Suppose the user has selected the Batman T-shirt

52. If he now clicks the Dr. Who button, Batman is deselected

53. Implementation of the above: Batman's cloak Superman's cloak Dr. Who's coat

54. Preselection of radio buttons Just as checkboxes can be preselected, one radio button in a group which all have the same name can be preselected HOWEVER, –more than one checkbox can be preselected –but ONLY ONE radio button can be preselected

55. Example Batman's cloak Superman's cloak (our best-selling item) Dr. Who's coat

56. Inputs of type=file

57. File upload script Upload a File <?php $fileName=$_FILES['myfile']['name'] if (!$myfile) { ?> Upload a File File to Upload: "Upload File“ <?php } else { $size=$_FILES['myfile']['size']; $type=$_FILES['myfile']['type']; File Received The following file has been received:, containing bytes and of MIME type. <?php } ?>