Upload
douglas-bell
View
219
Download
3
Embed Size (px)
Citation preview
ITM 352 - © Port, Kazman 1
ITM 352
HTML Forms, Basic Form Processing
ITM 352 - © Port, Kazman 2
Some Inspiration!
Perseverance: never giving upIndomitable Spirit: never wanting to give upFormula 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
ITM 352 - © Port, Kazman 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
ITM 352 - © Port, Kazman 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
ITM 352 - © Port, Kazman 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.
ITM 352 - © Port, Kazman 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
ITM 352 - © Port, Kazman 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 '
>
ITM 352 - © Port, Kazman 8
Example: Login
<form action ='invoice.php' method = 'POST'>
<input type = 'SUBMIT' name = 'submit_button' value = 'Login'>
</form>
Do Lab #1
ITM 352 - © Port, Kazman 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>'
>
ITM 352 - © Port, Kazman 10
The Basic Input Types
TextPasswordHiddenRadio CheckboxSubmit
ITM 352 - © Port, Kazman 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
ITM 352 - © Port, Kazman 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_SELF or $_SERVER['PHP_SELF']
ITM 352 - © Port, Kazman 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
ITM 352 - © Port, Kazman 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.
ITM 352 - © Port, Kazman 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
ITM 352 - © Port, Kazman 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>
ITM 352 - © Port, Kazman 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 } ?>
ITM 352 - © Port, Kazman 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>
ITM 352 - © Port, Kazman 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>
ITM 352 - © Port, Kazman 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)