1. David Lash DePaul University SNL 262 Web Page Design Forms! - Chapt 7 Instructor: David A. Lash

2. David Lash 2 HTML Forms zHTML Forms are used to: yGather survey information on web ySubmit passwords yStructure queries on a database ySubmit orders yClick Here for an examplean example yhttp://www.depaul.edu/~dlash/extra/Webpage/ex amples/08survey.htm

3. David Lash 3 HTML Forms zWhen submit a form it will be sent to a server script for processing HTML Form Submit Program or database on Webserver (e.g., condor)

4. David Lash 4 HTML Form Elements Text Box Radio Buttons Check Box Select Box Text Area Submit/Reset button

5. David Lash 5 Starting and Ending Forms  HTML forms are created by using the HTML and tags. y Within these tags, you place various HTML form elements, such as text areas, check boxes, and radio buttons. y For example, y..  ---(Your FORM elements here).

6. David Lash 6 Two primary arguments z<FORM ACTION=”http://perl-pgm.com/cgi-bin/stuff.cgi” METHOD=”POST”> – get appends the form arguments to the end of the Web address. – post sends the data as part of the body of the HTML document. – Will use post since get method may limit the amount of data you can send. ACTION= - Specifies the URL of the receiving file/program to start when the form is submitted METHOD= - Defines the argument format that will be used to send data to the receiving program/file.

7. David Lash 7 Some Form Tag Examples  Sends the results to a program at http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query.   Sends the results to via email to dlash@condor.depaul.edu yThe email you get is a messy email (Click here for example.) For that reason, most sites don’t submit directly but execute a program first.Click here for example

8. David Lash 8 The Big Picture For Forms Your Form Here (Checklists, Text Boxes, Drop-down lists, buttons, etc)

9. David Lash 9 Creating Text Boxes zText boxes are those input areas on a form where the customer can input free-format typing. For example click here.For example click here.

10. David Lash 10 Text Box: Format Please Enter Your Full Name Where yPlease Enter Your Full Name - is text to display immediately before the text box. yInput Type - A keyword that says how input will come in. You can say x"Text" - for text boxes with characters displayed in box as typed. x"Passwd" - For text boxes with asterisks "*" displayed in box as typed. ySIZE= Width of (in chars) the input box. yMAXLENGTH= - The max number of characters the user can type into box. y Name= The name identifier passed to the email program. (E.g., name="David Lash" )

11. David Lash 11 Text Box: Format Please Enter Your Full Name Where y Name= The name identifier passed to the email program. (E.g., name="David Lash" ) The resulting email might look like: fullname=Dave+Lash

12. David Lash 12 Text Area: Format Just like text box but bigger. Click hereClick here http://www.depaul.edu/~dlash/website/TextInput.html <textarea NAME="UNIT_COMMENTS" ROWS=4 COLS=70 >Your comments here zName= The name identifier passed to the email program. (E.g., name=”UNIT_COMMENTS”) zROWS, COLS = Number of cols and rows of text box

13. David Lash 13 Check Boxes Check boxes are pre-defined optional input that you check. Click Here for example

14. David Lash 14 Check Boxes: General Format Pick your favorite: Baseball Hockey Soccer Click Here for what it looks like: Pick your favorite: - This is a string of characters the shows up before check box. input TYPE="checkbox" - Says create a checkbox within the form. NAME=“soccer" - a name (e.g., soccer) to the checkbox that will be passed to the email software. VALUE=“Like soccer" - Specifies the initial value of the control (all set to “like soccer”) Note: you can include a checked attribute that checks the box initially.

15. David Lash 15 Radio Buttons: General Format zRadio Boxes - (just like checked boxes - click here) http://www.depaul.edu/~dlash/website/radio1.html- click here) http://www.depaul.edu/~dlash/website/radio1.html How is Web Site Design Going : I get my extra sleep in class. I get so confused I get lost trying to find my car after class. I gave up and copy my answers from my neighbor. Great class can't wait for the movie. Specifies to create a radio button Logical name is “variable1” Variable1 is “set” to “great” if this item is picked

16. David Lash 16 Selection Lists Here is an example http://www.depaul.edu/~dlash/website/examle.htmlexample zUse tag to create scrolling and pull-down pick lists. Electric windows AM/FM Radio Turbo Charger z name = the label shown from the mail. zsize =number of selections shown zmultiple = allow multiple options to pick zoption = the option to pick zoptions selected = pre-selected option.

17. David Lash 17 Submit Buttons zSubmit - (send it on down - click here)click here http://www.depaul.edu/~dlash/website/radio1.html zCan also reset Create a submit button Put this text on the button. Use this gif image for button.

18. David Lash 18 Putting it all together Survey Form Class Survey Name: Class: Class Evaluation: Great Average Fair Poor Comments: http://condor.depaul.edu/~dlash/extra/Webpage/examples/form1.html

19. David Lash 19 Putting it all together Class Survey Name: Class Class Evaluation: Great Average Fair Poor Comments http://condor.depaul.edu/~dlash/extra/Webpage/examples/form2.html

20. David Lash 20 In Summary zWe spoke about yWhat are forms? yThe Form tag and arguments yHow to create xRadio buttons xChecklists xSelection lists xText boxes xText areas xSubmit buttons yHow to format it all nicely.

21. David Lash 21 Before We Leave zHomework ReviewHomework Review zTest Review