1. HTML Forms and User Input
BIS1523 – Lecture 5

2. The 2-Page Model for Input
In web based programming, HTML web pages can be used to allow the user to input data for processing.
The data the user entered is then sent to a page with PHP that can read it in, process it, and send out the results.

3. Two Page Model Our starting programs will follow this 2 page model.
We will have one page that is HTML, and has areas that allow user input. In this example it is tempconv.html
The second page will be our PHP program that displays results. In this example it is results.php
We may also include a .css file for styling of both pages…

4. Form Tag To allow a user to input data, we use a <form> element
Each of your elements that allow the user to input stuff should be between the <form> and </form> tags.
The form tag also contains an action attribute, this is the attribute that tells the form where the PHP program that will process the input is.

5. Form Method
There are 2 possible values for the “method” attribute of a form, they are GET or POST
The differences are:
With the GET method, a limited amount of information can be passed.
The GET method sends the data to the handling script publicly (which means, for example, that a password entered in a form would be viewable by anyone within eyesight of the Web browser, creating a larger security risk).
A page using a GET method can be bookmarked, a POST method cannot be
Users will be prompted if they attempt to reload a POST page
We will use POST for the majority of this course

6. Input Tag
The <input> tag is used to place several different kinds of elements into your form. It has several attributes associated with it:
Type describes what type of input you will use, text, radio buttons, submit button, etc.
Name gives the input a name. Every input needs to have a unique name.
Size is optional, but can be used to determine how big the area is displayed on the screen
The “text” type allows the user to type a single line of text as input

7. Submit Button
In order to process a form, there also needs to be a submit element on it.
type “submit” is a button that will trigger the call to the PHP program
Name needs to be unique
Value is the text that is printed on the button
When the user clicks the Go! Button, it will load “results.php”, passing information from inputs to that PHP program.

8. Retrieving Values in PHP
Values sent to a PHP program from a form are stored in one of two specially named variables: $_GET or $_POST
The variable you use depends on if you used GET or POST method in the HTML file. (We will use POST) in this class.
The syntax for accessing these values is:
$_POST[<name of item to retrieve>]
The name you use was the name of the input in the HTML form. So to retrieve the name in our previous example, you could access the variable
$_POST[‘name’]

9. Reading and Printing The Data
In our example, we had a single input called “name”
We can read it in in our results.php, and store it in a variable called $name
Then print that variable back out again.

10. Select Tag
The <select> tag is used to create a drop-down list for the user to select a single option from.
The opening <select> tab should include a (unique) name attribute
Within the select are any number of <option> tags. The option tags have a “value” attribute, and will surround the text they will display.

11. Select
When the form is submitted, the value of “classification” will be set to the “value” attribute from whatever the user selected. So if, for example, the user selected “staff”, and we did the PHP command:
$class = $_POST[‘classification’]
The variable $class would have the value “staff”

12. Textarea
<textarea> is a multi line input. It has the following attributes:
Name to identify it
Rows and cols determine how big it is on the screen
Any text between the starting and ending tags will appear as the ‘default’ text in the area. This can be left blank.

13. Retrieving a textarea
A textarea can be retrieved as a string just like a normal one line text value can be.

14. Radio Buttons
Radio buttons allow the user to select one from several options.
A group of radio buttons with the same name will be mutually exclusive.
Each button will have a value attribute, this is the value of the ‘name’ field that will be passed to PHP when the form is submitted

15. Radio Button Values
Since you grouped the radio buttons with the same name, you can use that name in the POST variable to retrieve the value of which button the user selected.

16. Combining PHP with CSS
Since the output of our PHP programs is HTML, we can also incorporate CSS to improve the look of our layout.
This might include grouping sections of HTML together with ID or Class, and adjusting their colors, location, borders, etc.
Example Notes:
added some headings, and a box for our content with PHP and CSS.
Include necessary tags and ID attributes to accomplish this
You may need to escape double quotes to print them.

17. Final Results PHP and CSS

18. Finished Input Screen

19. Input Tag Summary Input Tag Use Notes <input type=“text”>
A single line of input
<input type=“submit”>
The button to submit the form
The “value” field is printed on the screen
<input type=“radio”>
A group of radio buttons
Entire group has the same name, but different “values”
< select>
A dropdown list of items
The “name” goes on the select tag.
Each option will be enclosed in the <option> tags
<textarea>
A multi line input box

20. Printing the POST array
Sometimes it is helpful when trying to find errors to be able to see the entire POST array that was passed to a form. This can be done with the print_r() command.
Print_r prints any array, but to have it print the $_POST array, just add the following command to your PHP:
The output will look like:
Where each field is in []’s and its value is to the right of the =>
So in the example above, the input fields we passed were balance, credits, and charges.