AdvWeb-1/12 DePaul University SNL 262 Web Page Design Forms! - Chapt 8 Instructor: David A. Lash
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
AdvWeb-1/12
DePaul University
SNL 262
Web Page Design
Forms! - Chapt 8
Instructor: David A. Lash
AdvWeb-2/12
HTML Forms
HTML Forms are used to:– Gather survey information on web– Submit passwords – Structure queies on a database– Submit orders
– Click Here for an example
AdvWeb-3/12
HTML Forms
When submit a form it will be sent to a server for processing
HTML Form
Submit
Program or database
on Webserver (e.g., condor)
AdvWeb-4/12
The Form Tag The <form> Tag is used to start and end every HTML form. In general it looks like:
<FORM METHOD=POST ACTION="[name of program]">...
</FORM>
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
AdvWeb-5/12
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.
AdvWeb-6/12
Creating Text Boxes
Text boxes are those input areas on a form where the customer can input free-format typing. For example click here.
AdvWeb-7/12
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"
AdvWeb-8/12
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
AdvWeb-9/12
Check Boxes
Check boxes are pre-defined optional
input that you check.
Click Here for example
AdvWeb-10/12
Check Boxes: General FormatPick your favorite:
<BR><INPUT TYPE=checkbox NAME="baseball” VALUE="Y">Baseball
<BR><INPUT TYPE=checkbox NAME="basketball" VALUE="Y">Basketball
<BR><INPUT TYPE=checkbox NAME="football" VALUE="Y">Football
<BR><INPUT TYPE=checkbox NAME="hockey" VALUE="Y">Hockey
<BR><INPUT TYPE=checkbox NAME="soccer" VALUE="Y">Soccer
Click Here for what it looks like:
AdvWeb-11/12
Check Boxes: General FormatExplaination:
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="sleep" - a name (e.g., sleep) to the checkbox that will be passed to the email
software. VALUE="Material Check"> - Specifies the initial value of of the control (all set to “Y”) Note: you can include a checked attribute that checks the box initially.
AdvWeb-12/12
More Complete Example of DIV
<HTML><HEAD>
<TITLE> Here is an example </TITLE>
</HEAD><BODY>
<div align=center>
This is a test of center adjusted text.
</DIV>
<div align=right>
Of Coarse, this is a Right sample
</DIV><BR>
By the way I can use a <I>DIV align=left</I> but I don't need it because the default is to put the text to
the extreme left anyway.
</BODY></HTML>
– For example see the following link.
AdvWeb-13/12
Text Alignment With <P>– Can use the ALIGN= tag with the <P> tag.
– For example, <P align=right>
– (See Example 5.3 from book (next slide)).
AdvWeb-14/12
Text Alignment With <P><html><head><title>Bohemia</title></head>
<body>
<div align="center">
<h2>Bohemia</h2>
<b>by Dorothy Parker</b>
</div>
<p align="left">
Authors and actors and artists and such<br />
Never know nothing, and never know much.<br />
Sculptors and singers and those of their kidney<br />
Tell their affairs from Seattle to Sydney.</p>
<p align="center">
Playwrights and poets and such horses' necks<br />
Start off from anywhere, end up at sex.<br />
Diarists, critics, and similar roe<br />
Never say nothing, and never say no.</p>
<p align="right">
People Who Do Things exceed my endurance;<br />
God, for a man that solicits insurance!</p>
</body></html>
AdvWeb-15/12
List Management 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 symbolBaseball
A only played well in NYHotdogs
A substance resembling meatApple Pie
What Sara Lee now makes instead of Mom
AdvWeb-16/12
Ordered Lists This is an ordered list:
1. This is the first element 2. This is the second line 3. This is the third line
To format above use the <OL>, <LI> tags<OL> ... </OL> --- Marks the start and end of the ordered list section <LI> ... </LI> - Indicates start and end of each ordered list item.
AdvWeb-17/12
Ordered Lists For example:
<OL> <LI> This is the first element </LI> <LI> This is the second line </LI><LI> This is the third line </LI></OL>
Would look like:
1. This is the first element 2. This is the second line 3. This is the third line
AdvWeb-18/12
Attributes For Ordered Lists
Using Type = E.g.,
<OL TYPE=1> ......... For 1,2,3 Ordering <OL TYPE=A> .....… For A,B,C Ordering <OL TYPE=a> ......... For a,b,c ordering <OL TYPE=I> ........... For Roman Numeral (E.g,
I, II, III, IV) <OL TYPE=i> ........... For small Roman Numerals (E.g., i, ii, iii, iv)
For Example, see this Roman Numeral Example, see also this ABC Example.
AdvWeb-19/12
Using Start Attribute With OL
Both the UL and OL Tags support a START= attribute.
This attribute is used to set an initial value to the lists:
For example, <OL TYPE="A", START="3"> <LI> Started on G. </OL> .
See the following link
AdvWeb-20/12
Unordered Lists
Unordered Lists - These would be bullet lists, For example
This is the first element This is the second line This is the third line
To format above use the following tags
– <UL> ... </UL> Starts & ends the ordered list section
– <LI> … </LI> - Starts & ends each individual item.
AdvWeb-21/12
Unordered Lists
For example,
<UL> <LI> This is the first element </LI> <LI>This is the second line </LI><LI> This is the third line </LI> </UL>
Would create the following This is the first element This is the second line This is the third line
AdvWeb-22/12
Unordered Lists Use An Attribute TYPE=
E.g., <UL TYPE=DISC> ......... Creates a small disc list <UL TYPE=CIRCLE> ........ Solid circles <UL TYPE=SQUARE> ......... Solid Squares
For Example, See this Unordered List Example.
AdvWeb-23/12
Definition Lists
Indented lists without any numbers or symbol in front of each item Baseball
A only played well in NYHotdogs
A substance resembling meatApple Pie
What Sara Lee now makes instead of Mom
<DL> ... </DL> A definition list <DT> … </DT> A definition term as part of a definition list - Level 1
term <DD> … <DD> - A Definition to definition term - level 2 term see stuff.html & a similar example
AdvWeb-24/12
Lists Within Lists 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
Corresponding HTML Code:
<OL><LI>Baseball></LI>
<UL><LI>WhiteSox</LI><LI>Cubs</LI></UL>
<LI> Football </LI><UL><LI>Bears</LI></UL>
– For example, see the following link
Related Documents
