Cmps 20081211b employee_engagement-what_managers_need_to_know
Slide 1 CMPS 211 Internet Programming Spring 2008 Forms Chapter 17 4/22/08.
-
Upload
maximillian-harmon -
Category
Documents
-
view
212 -
download
0
Transcript of Slide 1 CMPS 211 Internet Programming Spring 2008 Forms Chapter 17 4/22/08.
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