HTML Section 6 Forms 6 02 Forms HTML
- Slides: 19
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 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 Reset Button web 111 a_chapt 06. 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 web 111 a_chapt 06. 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”> 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 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 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 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 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 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 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 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 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 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=“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 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“ 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> </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 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
- Canvas доска
- Slidetodoc.com
- Doctype html html head
- Doctype html html head
- 12.html?title=
- Html forms attributes
- Head body html
- Html
- Why are related forms more agreeable than unrelated forms
- Full form and contracted form
- Why are related forms more agreeable than unrelated forms
- Why are related forms more agreeable than unrelated forms?
- Strong and weak forms of auxiliary verbs
- Chapter 1 section 2
- Chapter 1 section 2 forms of government
- What line types are usually omitted from sectional views
- Revolved section view
- Section view examples
- Section 2 describing energy
- Chapter 10 section 1 meiosis worksheet answer key