DePaul University

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

2. HTML Forms • HTML Forms are used to: • Gather survey information on web • Submit passwords • Structure queries on a database • Submit orders • Click Here for an example • http://www.depaul.edu/~dlash/extra/Webpage/examples/08survey.htm

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

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

5. Starting and Ending Forms • HTML forms are created by using the HTML <FORM> and </FORM> tags. • Within these tags, you place various HTML form elements, such as text areas, check boxes, and radio buttons. • For example, • <FORM ACTION=”http://nwswww.ih.lucent.com/~dlash/stuff.cgi” METHOD=”POST”> . . ß---(Your FORM elements here) . </FORM>

6. Two primary <FORM> arguments • <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. Some Form Tag Examples < FORM METHOD=POST ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query" > • Sends the results to a program at http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query. • <FORM METHOD="POST“ ACTION="mailto:dlash@condor.depaul.edu"> • 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.

8. The Big Picture For Forms <FORM METHOD=POST ACTION="http://condor.depaul.edu/~dlash/save_it.php”> Your Form Here (Checklists, Text Boxes, Drop-down lists, buttons, etc) </FORM>

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

10. Text Box: Format Please Enter Your Full Name <Input Type="Text" SIZE=20MAXLENGTH=30Name="fullname"> 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 • "Text" - for text boxes with characters displayed in box as typed. • "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" )

11. Text Box: Format Please Enter Your Full Name <Input Type="Text" SIZE=20 MAXLENGTH=30 Name="fullname"> Where • Name= The name identifier passed to the email program. (E.g., name="David Lash" ) The resulting email might look like: fullname=Dave+Lash

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

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

14. Check Boxes: General Format Pick your favorite: <BR><INPUT TYPE=checkbox NAME="baseball” VALUE=“Like bball">Baseball <BR><INPUT TYPE=checkbox NAME="hockey" VALUE=“Like hockey">Hockey <BR><INPUT TYPE=checkboxNAME="soccer"VALUE=“Like soccer">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. Radio Buttons: General Format • Radio Boxes - (just like checked boxes - click here) http://www.depaul.edu/~dlash/website/radio1.html How is <b><i>Web Site Design Going</i></b>: <br><input TYPE="radio" NAME="variable1" VALUE=“sleep"> I get my extra sleep in class. <br><input TYPE="radio" NAME="variable1" VALUE=“lost"> I get so confused I get lost trying to find my car after class. <br><input TYPE="radio" NAME="variable1" VALUE=“gaveup">I gave up and copy my answers from my neighbor. <br><input TYPE="radio" NAME="variable1" VALUE=“great" checked> Great class can't wait for the movie. Variable1 is “set” to “great” if this item is picked Specifies to create a radio button Logical name is “variable1”

16. Selection Lists Here is an examplehttp://www.depaul.edu/~dlash/website/examle.html • Use <select> tag to create scrolling and pull-down pick lists. <select name="extras" size="3"multiple> <option selected> Electric windows </option> <option> AM/FM Radio </option> <option> Turbo Charger </option> </select> • name = the label shown from the mail. • size =number of selections shown • multiple = allow multiple options to pick • option = the option to pick • options selected = pre-selected option.

17. Submit Buttons • Submit - (send it on down - click here) http://www.depaul.edu/~dlash/website/radio1.html <INPUT TYPE="submit" VALUE="Submit"> <INPUT TYPE="submit" SRC="button.gif"> • Can also reset <INPUT TYPE="reset" VALUE="Erase"> <INPUT TYPE="reset" SRC="button.gif"> Create a submit button Put this text on the button. Use this gif image for button.

18. Putting it all together <html> <head> <title>Survey Form</title> </head> <body> <h1>Class Survey</h1> <FORM METHOD="POST" ACTION="mailto:dlash@condor.depaul.edu"> Name: <INPUT TYPE=input NAME="Name" > <br>Class:<INPUT TYPE=input NAME="Class" > <br>Class Evaluation: <BR><INPUT TYPE=radio NAME="Eval" VALUE="Y">Great <BR><INPUT TYPE=radio NAME="Eval" VALUE="Y">Average <BR><INPUT TYPE=radio NAME="Eval" VALUE="Y">Fair <BR><INPUT TYPE=radio NAME="Eval" VALUE="Y">Poor <br>Comments:<INPUT TYPE=input NAME="Comments" > <br><INPUT TYPE="submit" VALUE="Submit"> <INPUT TYPE="reset" VALUE="Erase"> </form> </BODY> </HTML> http://condor.depaul.edu/~dlash/extra/Webpage/examples/form1.html

19. Putting it all together <body> <h1>Class Survey</h1> <TABLE> <FORM METHOD="POST" ACTION="mailto:dlash@condor.depaul.edu"> <TR><TD> Name: </TD><TD> <INPUT TYPE=input NAME="Name" > </TD></TR><TR><TD> Class</TD><TD><INPUT TYPE=input NAME="Class" > </TD> </TD></TR><TR><TD> Class Evaluation: </TD><TD> <INPUT TYPE=radio NAME="Eval" VALUE="Y">Great <INPUT TYPE=radio NAME="Eval" VALUE="Y">Average <INPUT TYPE=radio NAME="Eval" VALUE="Y">Fair <INPUT TYPE=radio NAME="Eval" VALUE="Y">Poor </TD></TR><TR><TD> Comments</TD><TD><INPUT TYPE=input NAME="Comments" > </TD></TR><TR><TD> <INPUT TYPE="submit" VALUE="Submit"> </TD><TD> <INPUT TYPE="reset" VALUE="Erase"> </TR> </form> </BODY> http://condor.depaul.edu/~dlash/extra/Webpage/examples/form2.html

20. In Summary • We spoke about • What are forms? • The Form tag and arguments • How to create • Radio buttons • Checklists • Selection lists • Text boxes • Text areas • Submit buttons • How to format it all nicely.

21. Before We Leave • Homework Review • Test Review