David Lash DePaul University SNL 262 Web Page Design Forms! - Chapt 7 Instructor: David A. Lash.
-
date post
19-Dec-2015 -
Category
Documents
-
view
223 -
download
0
Transcript of David Lash DePaul University SNL 262 Web Page Design Forms! - Chapt 7 Instructor: David A. Lash.
![Page 1: David Lash DePaul University SNL 262 Web Page Design Forms! - Chapt 7 Instructor: David A. Lash.](https://reader030.fdocuments.net/reader030/viewer/2022032703/56649d395503460f94a131b9/html5/thumbnails/1.jpg)
David Lash
DePaul University SNL 262
Web Page Design
Forms! - Chapt 7
Instructor: David A. Lash
![Page 2: David Lash DePaul University SNL 262 Web Page Design Forms! - Chapt 7 Instructor: David A. Lash.](https://reader030.fdocuments.net/reader030/viewer/2022032703/56649d395503460f94a131b9/html5/thumbnails/2.jpg)
2David Lash
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
![Page 3: David Lash DePaul University SNL 262 Web Page Design Forms! - Chapt 7 Instructor: David A. Lash.](https://reader030.fdocuments.net/reader030/viewer/2022032703/56649d395503460f94a131b9/html5/thumbnails/3.jpg)
3David Lash
HTML Forms
When submit a form it will be sent to a server script for processing
HTML Form
Submit
Program or database
on Webserver (e.g., condor)
![Page 4: David Lash DePaul University SNL 262 Web Page Design Forms! - Chapt 7 Instructor: David A. Lash.](https://reader030.fdocuments.net/reader030/viewer/2022032703/56649d395503460f94a131b9/html5/thumbnails/4.jpg)
4David Lash
HTML Form Elements
Text Box
Radio Buttons
Check Box
Select Box
Text Area
Submit/Reset button
![Page 5: David Lash DePaul University SNL 262 Web Page Design Forms! - Chapt 7 Instructor: David A. Lash.](https://reader030.fdocuments.net/reader030/viewer/2022032703/56649d395503460f94a131b9/html5/thumbnails/5.jpg)
5David Lash
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/stuf
f.cgi” METHOD=”POST”> . . ---(Your FORM elements here) .
</FORM>
![Page 6: David Lash DePaul University SNL 262 Web Page Design Forms! - Chapt 7 Instructor: David A. Lash.](https://reader030.fdocuments.net/reader030/viewer/2022032703/56649d395503460f94a131b9/html5/thumbnails/6.jpg)
6David Lash
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.
![Page 7: David Lash DePaul University SNL 262 Web Page Design Forms! - Chapt 7 Instructor: David A. Lash.](https://reader030.fdocuments.net/reader030/viewer/2022032703/56649d395503460f94a131b9/html5/thumbnails/7.jpg)
7David Lash
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:[email protected]"> Sends the results to via email to [email protected]
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.
![Page 8: David Lash DePaul University SNL 262 Web Page Design Forms! - Chapt 7 Instructor: David A. Lash.](https://reader030.fdocuments.net/reader030/viewer/2022032703/56649d395503460f94a131b9/html5/thumbnails/8.jpg)
8David Lash
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>
![Page 9: David Lash DePaul University SNL 262 Web Page Design Forms! - Chapt 7 Instructor: David A. Lash.](https://reader030.fdocuments.net/reader030/viewer/2022032703/56649d395503460f94a131b9/html5/thumbnails/9.jpg)
9David Lash
Creating Text Boxes
Text boxes are those input areas on a form where the customer can input free-format typing. For example click here.
![Page 10: David Lash DePaul University SNL 262 Web Page Design Forms! - Chapt 7 Instructor: David A. Lash.](https://reader030.fdocuments.net/reader030/viewer/2022032703/56649d395503460f94a131b9/html5/thumbnails/10.jpg)
10David Lash
Text Box: FormatPlease Enter Your Full Name <Input Type="Text" SIZE=20 MAXLENGTH=30 Name="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" )
![Page 11: David Lash DePaul University SNL 262 Web Page Design Forms! - Chapt 7 Instructor: David A. Lash.](https://reader030.fdocuments.net/reader030/viewer/2022032703/56649d395503460f94a131b9/html5/thumbnails/11.jpg)
11David Lash
Text Box: FormatPlease 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
![Page 12: David Lash DePaul University SNL 262 Web Page Design Forms! - Chapt 7 Instructor: David A. Lash.](https://reader030.fdocuments.net/reader030/viewer/2022032703/56649d395503460f94a131b9/html5/thumbnails/12.jpg)
12David Lash
Text Area: FormatJust 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
![Page 13: David Lash DePaul University SNL 262 Web Page Design Forms! - Chapt 7 Instructor: David A. Lash.](https://reader030.fdocuments.net/reader030/viewer/2022032703/56649d395503460f94a131b9/html5/thumbnails/13.jpg)
13David Lash
Check Boxes
Check boxes are pre-defined optional input that you check.
Click Here for example
![Page 14: David Lash DePaul University SNL 262 Web Page Design Forms! - Chapt 7 Instructor: David A. Lash.](https://reader030.fdocuments.net/reader030/viewer/2022032703/56649d395503460f94a131b9/html5/thumbnails/14.jpg)
14David Lash
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=checkbox NAME="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.
![Page 15: David Lash DePaul University SNL 262 Web Page Design Forms! - Chapt 7 Instructor: David A. Lash.](https://reader030.fdocuments.net/reader030/viewer/2022032703/56649d395503460f94a131b9/html5/thumbnails/15.jpg)
15David Lash
Radio Buttons: General FormatRadio 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.
Specifies to create a radio button
Logical name is “variable1”
Variable1 is “set” to “great” if this item is picked
![Page 16: David Lash DePaul University SNL 262 Web Page Design Forms! - Chapt 7 Instructor: David A. Lash.](https://reader030.fdocuments.net/reader030/viewer/2022032703/56649d395503460f94a131b9/html5/thumbnails/16.jpg)
16David Lash
Selection ListsHere is an example http://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.
![Page 17: David Lash DePaul University SNL 262 Web Page Design Forms! - Chapt 7 Instructor: David A. Lash.](https://reader030.fdocuments.net/reader030/viewer/2022032703/56649d395503460f94a131b9/html5/thumbnails/17.jpg)
17David Lash
Submit ButtonsSubmit - (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.
![Page 18: David Lash DePaul University SNL 262 Web Page Design Forms! - Chapt 7 Instructor: David A. Lash.](https://reader030.fdocuments.net/reader030/viewer/2022032703/56649d395503460f94a131b9/html5/thumbnails/18.jpg)
18David Lash
Putting it all together<html><head> <title>Survey Form</title></head><body><h1>Class Survey</h1><FORM METHOD="POST" ACTION="mailto:[email protected]"> 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
![Page 19: David Lash DePaul University SNL 262 Web Page Design Forms! - Chapt 7 Instructor: David A. Lash.](https://reader030.fdocuments.net/reader030/viewer/2022032703/56649d395503460f94a131b9/html5/thumbnails/19.jpg)
19David Lash
Putting it all together<body><h1>Class Survey</h1><TABLE><FORM METHOD="POST" ACTION="mailto:[email protected]"><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
![Page 20: David Lash DePaul University SNL 262 Web Page Design Forms! - Chapt 7 Instructor: David A. Lash.](https://reader030.fdocuments.net/reader030/viewer/2022032703/56649d395503460f94a131b9/html5/thumbnails/20.jpg)
20David Lash
In Summary
We spoke about What are forms? The Form tag and arguments How to create
Radio buttonsChecklistsSelection listsText boxesText areasSubmit buttons
How to format it all nicely.
![Page 21: David Lash DePaul University SNL 262 Web Page Design Forms! - Chapt 7 Instructor: David A. Lash.](https://reader030.fdocuments.net/reader030/viewer/2022032703/56649d395503460f94a131b9/html5/thumbnails/21.jpg)
21David Lash
Before We Leave
Homework Review
Test Review