Program Development
Download
Report
Transcript Program Development
HTML: Section 6
Forms
6.02
Forms
HTML tags: define data input and/or output
•
Define the Input and/or Output on the web page
•
Do not process the data
•
Numerous HTML tags for various functions
•
Text boxes
•
List Boxes (drop down)
•
Radio Buttons
•
Check Boxes
•
Text Areas
•
Submit Button
•
Reset Button
1. Design the form (Figure 6-1, Page 6.04)
2. The completed web page with the form (Figure 6-2, Page 6.05)
3. The HTML tags required for the Form (Figure 6-3, Page 6.07)
web111a_chapt06.ppt
HTML: Section 6
Common Gateway Interface (CGI) scripts
Processes the data sent from an HTML form
Returns information to the user via an HTML page
Run on the web server
Language can be OS specific
Data manipulation (comparisons, arithmetic)
Database manipulation
Languages
AppleScript: Apple
Active Server Pages (ASP): Microsoft
C/C++
Perl: free
UNIX shells: various vendors
Visual Basic: Microsoft
PHP/FI: free
JavaScript: Sun Microsystems
VBScript
web111a_chapt06.ppt
HTML: Section 6
http://www.pifergolf.com/
Object types used
Text
Textarea
Checkbox
Submit Button
Reset Button
web111a_chapt06.ppt
HTML: Section 6
Form Tags
Input attributes (Figure 6-6, Page 6.09)
<input type=“text” size=number name=“fieldname”>
“text” - Single line input area defined
Text scrolls when field is filled
size = width of the text field
name = name of field passed to cgi script
More Attributes
Maxlength = number
max length of field – no scrolling
even if size is larger
scrolling if size is smaller
Value = “some value”
default value to text box
web111a_chapt06.ppt
HTML: Section 6
Create a blank HTML page named forms.htm
Enter the <input> tag between the <body> and </body> tags
<input type=“text”><input type=“text”>
<br>
<input type=“text”>
Save the file
Load into browser
web111a_chapt06.ppt
HTML: Section 6
Selection Lists (Drop Boxes)
Create unlimited length of selections (list)
Only one item at a time will be selected
Width is determined by the longest list item
Length of list is determined by number of items in list
<form method="post“ action=“somescript">
<select>
begin list
<option>somedata
an item in the list
as many <option> as required
</select>
end of list
</form>
Attribute
Size
= number of items to display before scrolling
Multiple
= allow more than one item to be selected
LAB 1: Create a Drop Down Box
Somewhere In Time
The Shootist
Hideway
Braveheart
web111a_chapt06.ppt
Predator
Patton
Falling Down
Titanic
Aliens
Glory
Die Hard
Instinct
HTML: Section 6
Selection Lists – Grouping (Drop Boxes)
6.27
Create Headings for sections
Create unlimited length of selections (list)
Only one item at a time will be selected
Width is determined by the longest list item
Length of list is determined by number of items in list
Headings cannot be selected
<form method="post“ action=“somescript">
<select>
begin list
<optgroup label=“Routers”>
<option>
an item in the list
as many <option> as required
</optgroup>
<optgroup label=“Switches”>
as many <option> as required
</optgroup>
<optgroup label=“Adapters”>
as many <option> as required
</optgroup>
</select>
</form>
web111a_chapt06.ppt
end of list
HTML: Section 6
LAB 2: Create a Drop Down Box with Headings
CDs
Somewhere In Time
Predator
Aliens
MOVIES
The Shootist
Patton
Glory
Hideway
Falling Down
VHS
Die Hard
Braveheart
Titanic
Instinct
web111a_chapt06.ppt
HTML: Section 6
Radio Buttons
6.28
Only one button can be selected at a time
<form method="post“ action=“somescript">
<input type="radio" name="name1" value="toscript1"> Label 1
As many radio buttons as needed
</form>
LAB 3: Create Radio Buttons
Very Small
Small
Medium
Large
Extra Large
web111a_chapt06.ppt
HTML: Section 6
Group Box: Radio Buttons
6.31
Only one button can be selected at a time
<form method="post“ action=“somescript">
<fieldset>
<legend align=“top”>someheading”</legend>
<input type="radio" name="name1" value="toscript1"> Label 1
As many radio buttons as needed
</fieldset>
</form>
Assign one item as a default selection
Attribute = checked
<input type="radio" name="name1" value="toscript1“ checked>
Label 1
LAB 3: Create Radio Buttons
Very Small
Small
Medium
Large
Extra Large
web111a_chapt06.ppt
HTML: Section 6
Check Boxes
6.33
Select as many boxes as necessary
<form method="post“ action=“somescript">
<input type=“checkbox" name="name1" value="toscript1"> Label 1
As many boxes as needed
</form>
LAB 4: Create Check Boxes
Sweater
Coat
Jacket
Sweat Shirt
Hat
web111a_chapt06.ppt
HTML: Section 6
Text Area (mutiple lines)
6.35
<form method="post“ action=“somescript">
<textarea name="name1" rows=“value” cols=“value”>default text
</textarea>
</form>
Auto word wrapping
Scrolling
LAB 5: Create a Text Area
Five rows
30 columns
Default text of “Enter comment here”
web111a_chapt06.ppt
HTML: Section 6
Submit the form data
<form method="post“ action=“somescript">
<input type=“submit” value=“name on button”>
</form>
Built in browser object
Submits form information to cgi script
Clear the form
<form method="post“ action=“somescript">
<input type=“reset” value=“Clear Screen”>
</form>
Built in browser object
Clears/resets the form information
LAB 6: Create a Submit and Reset button
web111a_chapt06.ppt
6.39
HTML: Section 6
Buttons
6.42
<form method="post“ action=“somescript">
<button name=“name1” type=“button”>
Button specifications
</button>
</form>
LAB 7: Create a button
<button name="name1" type="button">
<img src="awards1.gif" align="absmiddle">
See our <font color="maroon"><b>History Page</b></font>
</button>
web111a_chapt06.ppt
HTML: Section 6
Image Fields
6.43
<form method="post“ action=“somescript">
<input type=“image” src=“imageurl” name=“text” value=“text”>
</form>
LAB 8: Create an image submit button
<form method="post"
action="contactformasp.asp">
<input type=“image” src=“awards1.gif” name=“gobutton”
value=“somevalue”>
</form>
web111a_chapt06.ppt
HTML: Section 6
Hidden fields
<form method="post“ action=“somescript">
<input type=“hidden” name=“text” value=“text”>
</form>
<input type=“hidden” name=“email”
value=“[email protected]”>
web111a_chapt06.ppt
6.44
HTML: Section 6
Submit the form to the cgi script
6.44
<form method="post“ action=“somescript">
codes
</form>
Method = the way in which the data is transferred
Get
Data is attached to the end of the call to the script
Data is visible in the call url location window
Data is limited to 255 characters
Post
Data is sent separately from the script call
Data is not visible
Amount of data is not limited to 255 characters
Safest method to send data
Action = the name of the script
web111a_chapt06.ppt
<form method="post"
action="contactformasp.asp">
<table>
<tbody>
<tr>
<td><b><font color="Maroon">Name:</font></b></td>
<td><input name="name" type="text" size=25></td>
</tr>
<tr>
<td><b><font color="Maroon">Email Address: </font></b></td>
<td><input name="emailaddress" type="text" size=25></td>
</tr>
<tr>
<td><b><font color="Maroon">Phone Number: </font></b></td>
<td><input name="phone" type="text" size=25></td>
</tr>
<tr>
<td><b><font color="Maroon">Enter request or comment: </font></b></td>
<td><textarea name="textdata" rows=6 cols=45 wrap></textarea></td>
</tr>
<tr>
<td><b><font color="Maroon"></font></b></td>
<td><input name="toemail" type="hidden" value="[email protected]"></td>
</tr>
</tbody>
</table>
web111a_chapt06.ppt
<br><br>
<!-<font color="Navy"><b>Please select any items of interest:</b></font><br>
<table>
<tbody>
<tr>
<td align=right>Purchase New Golf Cart:</td>
<td><input type="checkbox" name="newgolfcart" value="yes"></td>
<td width=35></td>
<td align=right>Purchase Used Golf Cart: </td>
<td><input type="checkbox" name="usedgolfcart" value="yes"></td>
</tr>
<tr>
<td align=right>Lease New Golf Cart: </td>
<td><input type="checkbox" name="leasenewgolfcart" value="yes"></td>
<td width=35></td>
<td align=right>Golf Cart Parts:</td>
<td><input type="checkbox" name="golfcartparts" value="yes"></td>
</tr>
</tbody>
</table>
-->
<br><br>
<input type="submit" value="Submit">
<input type="reset" value="Clear/Reset">
</form>
web111a_chapt06.ppt