1. AdvWeb-1/12 DePaul University SNL 262 Web Page Design Forms! - Chapt 8 Instructor: David A. Lash

2. AdvWeb-2/12 HTML Forms u HTML Forms are used to: – Gather survey information on web – Submit passwords – Structure queies on a database – Submit orders – Click Here for an examplean example

3. AdvWeb-3/12 HTML Forms u When submit a form it will be sent to a server for processing HTML Form Submit Program or database on Webserver (e.g., condor)

4. AdvWeb-4/12 The Form Tag u The Tag is used to start and end every HTML form. u In general it looks like:. Where Method=POST: Indicates a protocol to use to send to the server (ALWAYS SET TO POST AND ALWAYS USE CAPITAL LETTERS FOR POST) ACTION=[program name] tells the webserver exactly which program to submit the form to on the webserver

5. AdvWeb-5/12 Some Form Tag Examples – Sends the results to a program at http://hoohoo.ncsa.uiuc.edu/htbin-post/post- query. u – Sends the results to via email to dlash@condor.depaul.edu – The 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

6. AdvWeb-6/12 Creating Text Boxes u Text boxes are those input areas on a form where the customer can input free-format typing. For example click here.For example click here.

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

8. AdvWeb-8/12 Text Box: Format Please Enter Your Full Name Where – Name= The name identifier passed to the email program. (E.g., name="David Lash" The resulting email might look like: fullname=Dave+Lash

9. AdvWeb-9/12 Check Boxes Check boxes are pre-defined optional input that you check. Click Here for example

10. AdvWeb-10/12 Check Boxes: General Format Pick your favorite: Baseball Basketball Football Hockey Soccer Click Here for what it looks like:

11. AdvWeb-11/12 Check Boxes: General Format Explaination: u Pick your favorite: - This is a string of characters the shows up before check box. u input TYPE="checkbox" - Says create a checkbox within the form. u NAME="sleep" - a name (e.g., sleep) to the checkbox that will be passed to the email software. u VALUE="Material Check"> - Specifies the initial value of of the control (all set to “Y”) u Note: you can include a checked attribute that checks the box initially.

12. AdvWeb-12/12 More Complete Example of DIV Here is an example This is a test of center adjusted text. Of Coarse, this is a Right sample By the way I can use a DIV align=left but I don't need it because the default is to put the text to the extreme left anyway. – For example see the following link.the following link.

13. AdvWeb-13/12 Text Alignment With – Can use the ALIGN= tag with the tag. – For example, – (See Example 5.3 from book (next slide)).Example 5.3 from book (next slide)).

14. AdvWeb-14/12 Text Alignment With Bohemia Bohemia by Dorothy Parker Authors and actors and artists and such Never know nothing, and never know much. Sculptors and singers and those of their kidney Tell their affairs from Seattle to Sydney. Playwrights and poets and such horses' necks Start off from anywhere, end up at sex. Diarists, critics, and similar roe Never say nothing, and never say no. People Who Do Things exceed my endurance; God, for a man that solicits insurance!

15. AdvWeb-15/12 List Management u HTML supports 3 different types – Ordered lists E.g., numbered, 1. Baseball 2. Hotdgs 3. Apple Pie – Unordered lists E.g., bullet lists, –Baseball –Hotdogs –Apple Pie – Definition Lists (E.g., indented lists without any number or symbol Baseball A only played well in NY Hotdogs A substance resembling meat Apple Pie What Sara Lee now makes instead of Mom

16. AdvWeb-16/12 Ordered Lists u This is an ordered list: 1. This is the first element 2. This is the second line 3. This is the third line u To format above use the, tags... --- Marks the start and end of the ordered list section... - Indicates start and end of each ordered list item.

17. AdvWeb-17/12 Ordered Lists u For example: This is the first element This is the second line This is the third line u Would look like: 1. This is the first element 2. This is the second line 3. This is the third line

18. AdvWeb-18/12 Attributes For Ordered Lists u Using Type = E.g.,......... For 1,2,3 Ordering.....… For A,B,C Ordering......... For a,b,c ordering........... For Roman Numeral (E.g, I, II, III, IV)........... For small Roman Numerals (E.g., i, ii, iii, iv) u For Example, see this Roman Numeral Example, see also this ABC Example.Roman Numeral Example,ABC Example.

19. AdvWeb-19/12 Using Start Attribute With OL u Both the UL and OL Tags support a START= attribute. u This attribute is used to set an initial value to the lists: u For example, Started on G.. u See the following linkfollowing link

20. AdvWeb-20/12 Unordered Lists u Unordered Lists - These would be bullet lists, For example  This is the first element  This is the second line  This is the third line u To format above use the following tags –... Starts & ends the ordered list section – … - Starts & ends each individual item.

21. AdvWeb-21/12 Unordered Lists u For example, This is the first element This is the second line This is the third line u Would create the following  This is the first element  This is the second line  This is the third line

22. AdvWeb-22/12 Unordered Lists Use An Attribute TYPE= u E.g.,......... Creates a small disc list........ Solid circles......... Solid Squares u For Example, See this Unordered List Example.Unordered List Example.

23. AdvWeb-23/12 Definition Lists  Indented lists without any numbers or symbol in front of each item Baseball A only played well in NY Hotdogs A substance resembling meat Apple Pie What Sara Lee now makes instead of Mom ... A definition list  … A definition term as part of a definition list - Level 1 term  … - A Definition to definition term - level 2 term  see stuff.html & a similar examplestuff.htmlexample

24. AdvWeb-24/12 Lists Within Lists u Lists Within Lists – You can put lists within lists if you wish creating an outline feel for your text. 1. Baseball –White Sox –Cubs 2. Football –Bears u Corresponding HTML Code: Baseball> WhiteSox Cubs Football Bears – For example, see the following link see the following link