xhtml & forms. php and the www php and html forms – forms are the main way users can interact...

XHTML & Forms

PHP and the WWW

• PHP and HTML forms– Forms are the main way users can interact with your PHP scrip

• Typical usage of the form tag in HTML– <form id=“formname” action=“URL” method=“”>– </form>

• id is optional (but encouraged in XHTML)• action is mandatory. The value is the URL (or name of

the file, if in current directory) where the data collected by the form is to be sent

• method can take one of two values: get and post

2

HTML forms• HTML forms (a way of getting input from the browser)

include form elements such as: – text areas– password areas – check boxes– selection lists– scrolled selection lists– radio buttons– submit button– reset button– picture buttons

3

An HTML form

4

An HTML form

5

Using method=“get”• This method appends the form-data to the URL in

name/value pairshttp://localhost:8080/COM409/receive1.php?email=ytdrtyerh

• This method is useful for form submissions where a user want to bookmark the result (think google search)

• There is a limit to how much data you can place in a URL (varies between browsers), therefore, you cannot be sure that all of the form-data will be correctly transferred

• Never use the "get" method to pass sensitive information! (password or other sensitive information will be visible in the browser's address bar)

6

Using method=“post”• This method sends the form-data as an HTTP

post transaction• Form submissions with the "post" method

cannot be bookmarked (think login forms or member only areas)

• The "post" method is more robust and secure than "get", and

• "post" does not have size limitations

7

PHP Superglobals

• $_GET

• $_POST Works in the same way as $_GET– $_POST is an associative array– The keys to the array are the same as the field names

in your form

– Data sent via post is not exposed to the browser. The transaction is handled internally by the webserver

8

HTML form tags - overview

9

form tag description

<form action="receive.php" method="post"> Start the form

<input type="text" name="name" value="value" size="size"> Text field

<input type="password" name="value" value="value" size="size"> Password field

<input type="hidden" name="name" value="value"> Hidden field

<input type="checkbox" name="name" value="value"> Checkbox

<input type="radio" name="name" value="value"> Radio button

<select name="name" size=1> <option selected>one </option> <option>two </option></select>

Select menu

<select name="name" size=n multiple> Scrolled list

<textarea rows=yy cols=xx name="name"> . . </textarea> Multiline text

<input type="submit" name="name" value="value"> Submit button

<input type="image" src="/image" name="name" value="value"> Image button

<input type="reset" value="message!"> Reset button

</form> Ends form

Starting and ending forms - <FORM> tag

• HTML forms are created by using the HTML <form> and </form> tags

• Within these tags, you place various HTML form elements, such as text areas, check boxes, and radio buttons

<form action=”http://localhost/receive.php” method=”post”>

.

. ---(Your FORM elements here)

. </form>

10

Form arguments

The <form> tag has two primary arguments:• action - Specifies the URL of the PHP script to

start when the form is submitted • method - Defines the format that will be used

to send data to the PHP script– get appends the form arguments to the end of the

Web address (as a Query String after the “?”)– post sends the data as part of the body of the HTTP

Request

11

The <INPUT> tag

• Used to define a range of form elements, designated by its TYPE attribute.

• The general format of the <INPUT> tag is:<input type=“text” name=“element name” value=“default value”>

– type = submit | reset | text | checkbox | radio| etc.– name: will be used by the CGI program to identify the form element (i.e.

the CGI variable)– value: the value to be associated with “name” when processing the form

• (The <input> tag has NO closing tag </input> )

12

The <INPUT> tag - Form buttons

• Used to submit the form or erase all input• When the submit button is clicked, the form

data is sent to the program specified in the ACTION argument, and the CGI program executed

• If form consists only of a submit button, the CGI program is simply executed

13

<INPUT> tag - Text box

• The text input type creates text boxes on forms<input type=”text” size=”15” maxlength=”20” name=”color”>

14

text area box size

max. characters allowed

CGI variable name

<INPUT> tag - Text box

15

Text areas - <TEXTAREA> tag

16

Enables the user to enter multiple lines of text

<textarea rows=10 cols=70 name=“comments” wrap=“virtual”>Please enter comments here</textarea>

The wrap attribute specifies what to do if the user types beyond the right margin of the text area• If omitted, wrapping is not enabled • If wrap=“virtual”, wrapping is enabled but the text is submitted without

linebreaks• If wrap=“physical”, line breaks are submitted as part of the text

CGI variable name

default text value

<INPUT> tag - Checkboxes

17Copyright © 2002 Pearson Education, Inc.

<INPUT> tag - Checkboxes

• Small boxes on a form that create a check mark when the user clicks them

<input type=”checkbox” name=”usa” value=”yes”> USA <input type=”checkbox” name=”china” value=”yes” checked> China

• The user may select (tick) multiple boxes

18

CGI variable name

CGI variable value when clicked

label displayed next to checkbox

<INPUT> tag - Radio buttons

19Copyright © 2002 Pearson Education, Inc.

Radio buttons - <INPUT> tag

• Small circles that operate similarly to checkboxes, except that only one button within the group can be selected at any given time

<INPUT TYPE="radio" NAME="payment" VALUE="visa" checked > Visa

<INPUT TYPE="radio" NAME="payment" VALUE="amex"> American Express

<INPUT TYPE="radio" NAME="payment“ VALUE="mastercard"> Mastercard

20

CGI variable name

CGI variable value

label displayed next to radio button

<SELECT> tag - Selection lists

• Used to create a list for user to choose from , either as a drop-down menu or a scrolling box:

<select name=“platform” size=1><option selected>Win95</option><option>Win98</option><option>Win2k</option><option>linux</option></select>

• For a scrolling box, specify SIZE greater than one. e.g. SIZE = 3 will generate a scrolling windows 3 rows high

21

CGI variable name

list items that user can select CGI variable value

Form generation using PHP - Example

22

Form generation using PHP - Example - output

23

Example form

Selection list

Radio buttons

Text box

Text area

Text box

Submit button