How to Write Web Forms By Mimi Opkins

What We’ll Cover Today HTML Forms Fields Validation Processing

Forms Provides Information to Servers Uses a variety of different input fields to gather data JavaScript can be used to validate input Server program typically returns an HTML page back to the browser

Form Components Form Header Named Input Fields Action Buttons

Form Tag Makes up the Form Header component All form elements are contained within FORM tags <FORM> </FORM>

Form Tag (con’t.) ACTION attributes specifies the URL of the processing script (program) <FORM ACTION=myprog.php>

Form Tag (con’t.) METHOD attribute tells the browser how to send the form data to the server GET POST example: <FORM METHOD=POST ACTION=myprog.php>

Form Fields Example

Form Fields Example

Form Fields Example

Form Fields Example

Named Input Fields Comprise the bulk of a form Appear as standard window controls such as buttons and boxes Can assign each field a unique name that is later used in the script

Types of Input Fields Text Box Password Box Checkbox Radio Button Hidden Field Text Areas (Windows) Images File Menu

Input Tag Handles the majority of named input fields Can place most of the fields you need on your form Different attributes depending on the value of the TYPE attribute <INPUT TYPE=field type>

Text and Password Fields Simple Data Entry Fields Password field appears as **** Requires the NAME attribute <INPUT TYPE=TEXT NAME=“vendor”> <INPUT TYPE=PASSWORD NAME=“secret”>

Text and Password Fields Optional Attributes SIZE how many characters wide the field will be MAXLENGTH maximum number of characters that can be entered in the field VALUE place default text in the field

Checkboxes Used to provide users with several choices <INPUT TYPE=“CHECKBOX” NAME=“cream” VALUE=“CREAM”> <INPUT TYPE=“CHECKBOX” NAME=“sweetner” VALUE=“SUGAR”> CHECKED attribute preselects a checkbox

Radio Buttons Only one option can be selected <INPUT TYPE=“RADIO” NAME=“drink” VALUE=“COFFEE”> <INPUT TYPE=“RADIO” NAME=“drink” VALUE=“TEA”> CHECKED attribute preselects a radio button

Hidden Fields Used to send information to the server about a form Not used for data entry Field contents are not displayed <INPUT TYPE=“HIDDEN” NAME=“secret code” VALUE=“XYZ”>

Textarea Tag Used for multiple-line text entries Use the TEXTAREA tags Text between the TEXTAREA tags shows up on the input window by default

Textarea Optional Attributes COLS specifies number of columns ROWS specifies number of rows WRAP Netscape extension to wrap the text in the window

Menus Used to produce pull-down or scrollable option menus Uses the SELECT and OPTIONS tags <SELECT NAME=“pets”> <OPTION>DOG</OPTION> <OPTION>CAT</OPTION> </SELECT>

Menu Optional Attributes SIZE attribute in SELECT tag specifies how many options to be displayed on the screen (default is 1) MULTIPLE attribute in SELECT tag users can choose multiple options

Menu Optional Attributes (con’t.) SELECTED attribute in OPTION tag preselects an option VALUE attribute in OPTION tag value sent to server instead of the option displayed on the browser screen

Action Buttons SUBMIT users submit the data they entered to the server <INPUT TYPE=“SUBMIT” VALUE=“Submit Data”>

Action Buttons (con’t.) RESET clears out any data entered into the forms and sets all the named input fields back to their default values <INPUT TYPE=“RESET” VALUE=“Clear Data”>

Using Images as Submit Buttons Can create a custom image to be a SUBMIT button Clicking it instructs the browser to submit the form Use the TYPE and SRC attributes <INPUT TYPE=“IMAGE” SRC=myimg.gif>

Form Validation Form Validation can be accomplished with JavaScript on the Client Side Scripts on the Server Side

Form Navigation By default, the natural tabbing order will match the source order in the markup. The tabindex is used to define a sequence that users follow when they use the Tab key to navigate through a page.

Tab Order

Using Tabindex in a Form

What is Tabindex "the position of the current element in the tabbing order for the current document" What this means is that when a customer comes to your page, if they hit tab to navigate through the site, the first link they will be taken to is the link listed as tabindex="1". This is followed by tabindex="2" and tabindex="3"... Then elements that do not have a tabindex set (or don't support the tabindex attribute) come after that, in the order they appear on the page.

What Elements Support Tabindex a <a href="" tabindex="1"></a> area <area href="" tabindex="1" type="rect" coords="" /> button <button tabindex="1" name="" value="" id="" /> input <input tabindex="1" name="" value="" id="" /> object <object tabindex="1" name="" value="" id="" /> select <select tabindex="1" name="" value="" id="" ></select> textarea <textarea tabindex="1" cols="30" rows="4"></textarea>

Using Tabindex – It’s Simple Go to your web page and look at it as if you were a customer. When a customer comes to the page, what is she likely to want to click on first? Or what do you want her to click on first? Make that tabindex="1". Move through the page in that fashion.

Passing Form Data When the SUBMIT button is clicked, the browser Packages the form data into a single string -- encoding Sends the encoded string to the server using either the GET or the POST method

URL Encoding Browser gathers all the data and strings it together using NAME=VALUE pairs Pairs are separated by &

URL Encoding Example If I entered my name into the following form: <FORM ACTION=myprog.php METHOD=“POST”> <INPUT TYPE=“TEXT” NAME=“first”> <INPUT TYPE=“TEXT” NAME=“last”> <INPUT TYPE=“SUBMIT”> </FORM>

URL Encoding Example (con’t.) URL encoded string first=Mimi&last=Opkins POST will sent it via Standard Input GET will append the string to the URL myprog.php?first=Mimi&last=Opkins

More Encoding Blanks are translated to ‘+’ I love HTML becomes I+love+HTML Special characters become a % followed by their hexadecimal equivalent ! Becomes %21 I love HTML! Becomes I+love+HTML%21

HTTP Methods Method used by the form is stored in the REQUEST_METHOD environment variable For GET method, the input is stored in QUERY_STRING For POST method, the input is in STDIN

Form Processing Server Executes PHP Program PHP Program reads in form values Process Program Generates HTML page Returns control to the Web Server Resulting Page is returned to the browser

PHP Behinds the Scenes Unencode the data %xx becomes a special character + becomes a blank comment=I+love+HTML%21 becomes comment=I love HTML!

PHP Behinds the Scenes (con’t.) Divide the data into NAME=VALUE pairs by splitting at each & first=Mimi&last=Opkins becomes first=Mimi last=Opkins Loads data into predefined variables according to their name Handles both scalar and array data