HTML Section 6 Forms 6 02 Forms HTML

  • Slides: 19
Download presentation
HTML: Section 6 Forms 6. 02 Forms HTML tags: define data input and/or output

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) web 111 a_chapt 06. ppt

HTML: Section 6 Common Gateway Interface (CGI) scripts Processes the data sent from an

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 Apple. Script: Apple Active Server Pages (ASP): Microsoft C/C++ Perl: free UNIX shells: various vendors Visual Basic: Microsoft PHP/FI: free Java. Script: Sun Microsystems VBScript web 111 a_chapt 06. ppt

HTML: Section 6 http: //www. pifergolf. com/ Object types used Textarea Checkbox Submit Button

HTML: Section 6 http: //www. pifergolf. com/ Object types used Textarea Checkbox Submit Button Reset Button web 111 a_chapt 06. ppt

HTML: Section 6 Form Tags Input attributes (Figure 6 -6, Page 6. 09) <input

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 web 111 a_chapt 06. ppt

HTML: Section 6 Create a blank HTML page named forms. htm Enter the <input>

HTML: Section 6 Create a blank HTML page named forms. htm Enter the <input> tag between the <body> and </body> tags <input type=“text”> Save the file Load into browser web 111 a_chapt 06. ppt

HTML: Section 6 Selection Lists (Drop Boxes) Create unlimited length of selections (list) Only

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 web 111 a_chapt 06. ppt Predator Patton Falling Down Titanic Aliens Glory Die Hard Instinct

HTML: Section 6 Selection Lists – Grouping (Drop Boxes) 6. 27 Create Headings for

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> web 111 a_chapt 06. ppt end of list

HTML: Section 6 LAB 2: Create a Drop Down Box with Headings CDs Somewhere

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 web 111 a_chapt 06. ppt

HTML: Section 6 Radio Buttons 6. 28 Only one button can be selected at

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="name 1" value="toscript 1"> Label 1 As many radio buttons as needed </form> LAB 3: Create Radio Buttons Very Small Medium Large Extra Large web 111 a_chapt 06. ppt

HTML: Section 6 Group Box: Radio Buttons 6. 31 Only one button can be

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="name 1" value="toscript 1"> Label 1 As many radio buttons as needed </fieldset> </form> Assign one item as a default selection Attribute = checked <input type="radio" name="name 1" value="toscript 1“ checked> Label 1 LAB 3: Create Radio Buttons Very Small Medium Large Extra Large web 111 a_chapt 06. ppt

HTML: Section 6 Check Boxes 6. 33 Select as many boxes as necessary <form

HTML: Section 6 Check Boxes 6. 33 Select as many boxes as necessary <form method="post“ action=“somescript"> <input type=“checkbox" name="name 1" value="toscript 1"> Label 1 As many boxes as needed </form> LAB 4: Create Check Boxes Sweater Coat Jacket Sweat Shirt Hat web 111 a_chapt 06. ppt

HTML: Section 6 Text Area (mutiple lines) 6. 35 <form method="post“ action=“somescript"> <textarea name="name

HTML: Section 6 Text Area (mutiple lines) 6. 35 <form method="post“ action=“somescript"> <textarea name="name 1" 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” web 111 a_chapt 06. ppt

HTML: Section 6 Submit the form data <form method="post“ action=“somescript"> <input type=“submit” value=“name on

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 web 111 a_chapt 06. ppt 6. 39

HTML: Section 6 Buttons 6. 42 <form method="post“ action=“somescript"> <button name=“name 1” type=“button”> Button

HTML: Section 6 Buttons 6. 42 <form method="post“ action=“somescript"> <button name=“name 1” type=“button”> Button specifications </button> </form> LAB 7: Create a button <button name="name 1" type="button"> <img src="awards 1. gif" align="absmiddle"> See our <font color="maroon"><b>History Page</b></font> </button> web 111 a_chapt 06. ppt

HTML: Section 6 Image Fields 6. 43 <form method="post“ action=“somescript"> <input type=“image” src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src=“imageurl” name=“text”

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=“awards 1. gif” name=“gobutton” value=“somevalue”> </form> web 111 a_chapt 06. ppt

HTML: Section 6 Hidden fields <form method="post“ action=“somescript"> <input type=“hidden” name=“text” value=“text”> </form> <input

HTML: Section 6 Hidden fields <form method="post“ action=“somescript"> <input type=“hidden” name=“text” value=“text”> </form> <input type=“hidden” name=“email” value=“morris. fulcher@baker. edu”> web 111 a_chapt 06. ppt 6. 44

HTML: Section 6 Submit the form to the cgi script 6. 44 <form method="post“

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 web 111 a_chapt 06. 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>

<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> <td><b><font color="Maroon">Email Address: </font></b></td> <td><input name="emailaddress" type="text" size=25></td> </tr> <td><b><font color="Maroon">Phone Number: </font></b></td> <td><input name="phone" type="text" size=25></td> </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> <td><b><font color="Maroon"></font></b></td> <td><input name="toemail" type="hidden" value="escsrvs@aol. com"></td> </tr> </tbody> </table> web 111 a_chapt 06. ppt

 <!-<font color="Navy"><b>Please select any items of interest: </b></font> <table> <tbody> <tr> <td align=right>Purchase

<!-<font color="Navy"><b>Please select any items of interest: </b></font> <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> <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> --> <input type="submit" value="Submit"> <input type="reset" value="Clear/Reset"> </form> web 111 a_chapt 06. ppt