CMPS 211 Internet Programming

Spring 2008 Slide 1

Forms

Chapter 17

4/22/08

CMPS 211 Internet Programming

Spring 2008 Slide 2

Forms

Forms have three parts:

• The <FORM> tag

• The actual FORM elements where the visitor enters information

• Submit button (or active image) that sends the collected information to the server.

CMPS 211 Internet Programming

Spring 2008 Slide 3

CMPS 211 Internet Programming

Spring 2008 Slide 4

Processing forms

• Forms gather information from a visitor

• A script processes the information

• PHP is a popular script language– Easy to learn– Designed for processing info obtained on the

web– Can be written right in the file with the (X)HTML– Hundreds of functions available

CMPS 211 Internet Programming

Spring 2008 Slide 5

Alternative to processing

• Send data via email using:<FORM method=“post” action=“emailform.php”>

• Emailform.php is a script that sends the data to your email

• Figure 17.6 is such a script and is available on the text website

CMPS 211 Internet Programming

Spring 2008 Slide 6

Grouping form elements<FIELDSET id=“personal”>

<LEGEND align=left>Personal Information</LEGEND>

</FIELDSET>

<FIELDSET id=“suggestions”>

<LEGEND align=right>Suggestions </LEGEND>

</FIELDSET>

CMPS 211 Internet Programming

Spring 2008 Slide 7

Form elements

• Text boxes• Password boxes• Radio buttons• Menus• Check boxes• Large text boxes• Hidden fields• Submit button• Image to submit• Disabling elements• Keeping elements from being changed

CMPS 211 Internet Programming

Spring 2008 Slide 8

Text Boxes

<form method=“post” action=“showform.php”>

<p class=“legend”>Personal information</p>

<fieldset id=“personal”>

Name:<input type=“text” name=“name” size=“30”/> <br />

Address:<input type=“text” name=“address” size=“30” /><br />

Enter password:<input type=“password” name=“pswd” size=“15” /><br />

Style rule:

p.legend {backgrouond:#DED983; color:black; border:2px outset #DED983; padding: .2em .3em; font-size: 1.2em; position:relative; margin: 1em 0 -1em 1em; width: 10em;}

CMPS 211 Internet Programming

Spring 2008 Slide 9

Radio Buttons<fieldset id=“choices”>

<p id=“size”><label>Size:</label><input type=“radio” name=“size” value=“K” />King

< input type=“radio” name=“size” value=“Q” />Queen<br />

< input type=“radio” name=“size” value=“T” />Twin

< input type=“radio” name=“size” value=“S” />Single</p>

Style Rules:

#choices label{position: absolute; padding-top: .2em; left: 20px}

#size{font-size: 90%}

Input {margin-left: 9em;}

Input+input{margin-left: 1em;}

Br+input{margin-left:9em;}

CMPS 211 Internet Programming

Spring 2008 Slide 10

Menus<p id=“woodtype”><label>Type of wood:</label><select name=“woodtype”>

<option value=“Mahogany”>Mahogany</option>

<option value=“Maplewood”>Maplewood</option>

<option value=“Pine”>Pine</option>

<option value=“Cherry”>Cherry</option>

</select></p>

</fieldset>

Can also group options using the <optgroup> tag

CMPS 211 Internet Programming

Spring 2008 Slide 11

Other fieldsCheckboxes – like radio buttons but allow multiple selections

Larger text area – upto 32,700 characters, need to provide rows & columns

Upload files – provide URL of file to upload; need script to process

Hidden Fields

Submit button – special button to signify input complete, perform action

Reset button – Erase all input and start over