web111a_chapt06.ppt HTML: Section 6 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) 6.02

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 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) “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 = numbermax 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 tag between the and tags 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 begin list somedataan item in the list as many as required end of list 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 TimePredatorAliens The ShootistPattonGlory HidewayFalling DownDie Hard BraveheartTitanicInstinct

web111a_chapt06.ppt HTML: Section 6 Selection Lists – Grouping (Drop Boxes) 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 begin list an item in the list as many as required as many as required as many as required end of list 6.27

web111a_chapt06.ppt 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 Only one button can be selected at a time Label 1 As many radio buttons as needed LAB 3: Create Radio Buttons Very Small Small Medium Large Extra Large 6.28

web111a_chapt06.ppt HTML: Section 6 Group Box: Radio Buttons Only one button can be selected at a time someheading” Label 1 As many radio buttons as needed Assign one item as a default selection Attribute = checked Label 1 LAB 3: Create Radio Buttons Very Small Small Medium Large Extra Large 6.31

web111a_chapt06.ppt HTML: Section 6 Check Boxes Select as many boxes as necessary Label 1 As many boxes as needed LAB 4: Create Check Boxes Sweater Coat Jacket Sweat Shirt Hat 6.33

web111a_chapt06.ppt HTML: Section 6 Text Area (mutiple lines) default text Auto word wrapping Scrolling LAB 5: Create a Text Area Five rows 30 columns Default text of “Enter comment here” 6.35

web111a_chapt06.ppt HTML: Section 6 Submit the form data Built in browser object Submits form information to cgi script Clear the form Built in browser object Clears/resets the form information LAB 6: Create a Submit and Reset button 6.39

web111a_chapt06.ppt HTML: Section 6 Buttons Button specifications LAB 7: Create a button See our History Page 6.42

web111a_chapt06.ppt HTML: Section 6 Image Fields LAB 8: Create an image submit button <form method="post" action="contactformasp.asp"> 6.43

web111a_chapt06.ppt HTML: Section 6 Hidden fields 6.44

web111a_chapt06.ppt HTML: Section 6 Submit the form to the cgi script codes 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 6.44

web111a_chapt06.ppt <form method="post" action="contactformasp.asp"> Name: Address: Phone Number: Enter request or comment:

web111a_chapt06.ppt <!-- Please select any items of interest: Purchase New Golf Cart: Purchase Used Golf Cart: Lease New Golf Cart: Golf Cart Parts: -->