ITM 352 HTML Forms, Basic Form Processing

1. ITM 352HTML Forms, Basic Form Processing

2. Some Inspiration! • Perseverance: never giving up • Indomitable Spirit: never wanting to give up • Formula for success • Perseverance + Indomitable Spirit = Success • Indomitable Spirit • “Get to your limit and see what’s on the other side” - Yoga • "Try not. Do, or do not. There is no try." - Yoda • “Suffering is optional” – Yoghurt • “If you’re brain is hurting it just means you’re learning” – P2

3. What We Will Cover Today • Today we will explore HTML forms in some detail: • Details on <FORM> • Input types • Compound types • Some tips for HTML form elements

4. Form Parts <form action = 'xxx' method = 'yyy'> <form stuff goes here> </form> • action is the file you want to go to (could be html or php) • method should be either POST or GET

5. Action • An action should be a URI (e.g. a file name in the current folder) or a full web address, e.g. http://www.somewebserver.com/myfile.php) • Example: <form action = 'invoice.php'> … </form> • This will take the user to the invoice.php page in the current directory when the user presses the submit button. Note: You should always use quotes around the URI in case it has special characters or spaces.

6. Method • The method can be either 'POST' or 'GET'. • $_GET and $_POST are arrays built into PHP which make form processing a lot easier. • Form variables are stored as keys (elements) of these arrays, indexed by their name • To see what is in the array just do a var_dump() e.g. var_dump($_GET); • TIP: put var_dump()at the top of form processing files so you can see what is sent from the form

7. Submit Button Usually you need to have a submit button to invoke a form's action, e.g.: <input type = 'SUBMIT' name = 'the name you want to appear in the POST/GET array' value = 'the label in the button ' >

8. Example: Login <form action ='invoice.php' method = 'POST'> <input type = 'SUBMIT' name = 'submit_button' value = 'Login'> </form> Do Lab #1

9. Input types (single value) A generic input type looks like this: <input type = '<type>' name = '<the name in the POST/GET array>' value = '<the value you want to set it to>' >

10. The Basic Input Types • Text • Password • Hidden • Radio • Checkbox • Submit

11. Login <?php print "logged in " . $_POST['username']; ?> <form action = 'process_login.php' method = 'post'> <input type = 'text' name = 'username'> <input type = 'password' name = 'password'> <input type = 'submit' name = 'submit_button' value = 'login'> </form> Do Lab #2

12. Self-Processing Form • Sometimes you want to stay on the same page when processing your forms <form action = '<?= $_SERVER["PHP_SELF"]?>' method = 'post'> </form> is the same as: <form action = '<?php $_SERVER["PHP_SELF"] ?>'method = 'post'> </form> • <?= is short for echo when embedding PHP in HTML • You can use $PHP_SELFor $_SERVER['PHP_SELF']

13. Login if( array_key_exists('submit_button', $_POST) ) { print "logged in " . $_POST['username']; } else { ?> <form action = '<?php $_SERVER['PHP_SELF'] ?>' method = 'post'> <input type = 'text' name = 'username'> <input type = 'password' name = 'password'> <input type = 'submit' name = 'submit_button' value = 'login'> </form> <?php } ?> Do Lab #3

14. GET method <form method = 'get'> … </form> GET will show the information being passed between pages as part of the URL. • Good tool for error checking • However, it is not secure because users can see the full contents of the request. • Pages can be cached.

15. POST method <form method = 'post'> … </form> POST will hide information being passed between pages in the address bar. • HINT: use GET for error checking; change to POST when submitting your work • More secure than GET • Pages won't be cached. Do Lab #4

16. Compound Types • Select • Text area • List box • Compound types enable multiple inputs and/or outputs • Unlike input types, compound types always use a begin and end tag <select name='a_select_box'> … </select>

17. Login if( array_key_exists('submit_button', $_POST) ) { print "logged in " . $_POST['username']; } else { ?> <form action = '<?php $_SERVER['PHP_SELF'] ?>' method = 'post'> <select name='username'> <option>Moe</option> <option>Larry</option> <option>Curly</option> </select> <input type = 'password' name = 'password'> <input type = 'submit' name = 'submit_button' value = 'login'> </form> <?php } ?>

18. Select Boxes • Select boxes provide a drop down set of options for the user to choose from. • Value is whatever the user chooses when the submit button is pressed • If no value parameter is set, the value defaults to the label • <SELECT name="a_select_box"><OPTION value="value_of_thing1">thing1</OPTION><OPTION value="value_of_thing2">thing2</OPTION><OPTION value="value_of_thing3">thing3</OPTION></SELECT>

19. Text Area • Text Area provide a region of size row X cols to display and input text. • Value is whatever is in the area when the submit button is pressed <TEXTAREA name="a_test_area" rows="20" cols="40"> This is some text in the text area. </TEXTAREA>

20. Tips and Hints • Use single ' ' on the inside, " " around the outside or vice versa • Take advantage of PHP by using for/while/foreach to generate multiple form elements and compound types • Quotes must be used around anything with spaces Do Extra Credit (optional)