HTML Forms and User Input BIS1523 – Lecture 5

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.

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…

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.

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

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

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.

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’]

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.

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.

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”

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.

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

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

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.

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.

Final Results PHP and CSS

Finished Input Screen

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

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.