<TITLE>Fill-Out Form Example #1</TITLE>
<H1>Fill-Out Form Example #1</H1>
This is a very simple fill-out form example. <P>
<FORM METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
A single text entry field goes here: <INPUT NAME="entry"> <P>
Note that it has no default value. <P>
To submit the query, press this button: <INPUT TYPE="submit"
VALUE="Submit Query">. <P>
</FORM>
That's it. <P>
Things you may want to note: <P>
<UL>
<LI> Characters like "&amp;", "%", and "$" in the text typed into the
     text entry field are automatically escaped (into hex form: a
     percent sign followed by a two-digit hex value corresponding to
     the ASCII value of the character) when the query is constructed.
     For example, the string "&amp;%$" becomes "%26%25%24".
<LI> By default, an <CODE>INPUT</CODE> tag corresponds to a text entry
     field.  The <CODE>TYPE</CODE> attribute lets you change this --
     the "submit" type indicates a special pushbutton that causes the
     query to be submitted when it's pushed.  Other types are
     demonstrated in the other examples.
<LI> Because this fill-out form contains only a single text entry
     field, the query can be submitted by pressing return in the text
     entry field (as well as by pressing the "Submit Query" button).
</UL>
<A HREF="example-2.html">Forward to example 2</A>. <P>

<TITLE>Fill-Out Form Example #10</TITLE>
<H1>Fill-Out Form Example #10</H1>
This is another fill-out form example, with scrolled selection lists
with both one and <CITE>n</CITE> of many behavior. <P>
<HR>
<FORM METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
<H2>Your Daily Planner</H2>
What would you like to do today? 
<SELECT NAME="what-to-do" SIZE=10>
<OPTION VALUE="drink">Drink Coffee
<OPTION VALUE="read" SELECTED>Read A Book
<OPTION value=walk>Take A Walk
<OPTION> Chop Down Rainforests
<OPTION> Buy A Bagel
<OPTION>Watch TV
<OPTION>                   Sell Art
<OPTION>Buy Jewelry
<OPTION>Attend A Concert
<OPTION>Read Poetry
<OPTION>    Exercise
<OPTION>Whittle
<OPTION>Cook Stir Fry
<OPTION>Sip Espresso
<OPTION value="Pig Out">Munch Teddy Grahams
</SELECT> <P>
Who would you like to do it with? <P>
<DL>
<DD> 
<SELECT NAME="who-to-do-it-with" SIZE=8>
<OPTION>Marc
<OPTION>Eric
<OPTION>George
<OPTION SELECTED>Aleks
<OPTION>Jon
<OPTION>      Chouck
<OPTION>           Wilson
<OPTION>                  Bridgit
<OPTION>Lisa
<OPTION>Terry
<OPTION>Dave
<OPTION>Sharon
</SELECT>
</DL>
What items of clothing do you plan to wear?  (Hold down <I>Control</I>
to select or deselect disjoint items.) <P>
<DL>
<DD> 
<SELECT NAME="what-to-wear" MULTIPLE SIZE=8>
<OPTION>T-Shirt
<OPTION SELECTED>Jeans
<OPTION>Wool Sweater
<OPTION SELECTED>Sweatshirt
<OPTION SELECTED>Socks
<OPTION>Cotton Sweater
<OPTION>Rugby Shirt
<OPTION>Leather Jacket
<OPTION>Boots
<OPTION>Running Shoes
<OPTION>Windbreaker
<OPTION>Vest
<OPTION>Cape
</SELECT>
</DL>
To submit your choices, press this button: <INPUT TYPE="submit"
VALUE="Submit Choices">. <P>
To reset the form, press this button: <INPUT TYPE="reset" VALUE="Reset">.
</FORM>
<HR> <P>
Things you may want to note: <P>
<UL>
<LI> Blah.
</UL>
<A HREF="example-9.html">Back to example 9</A>;
<A HREF="example-11.html">forward to example 11</A>. <P>

<TITLE>Fill-Out Form Example #11</TITLE>
<H1>Fill-Out Form Example #11</H1>
This is another fill-out form example, with multiline text entry
areas. <P>
<HR>
<FORM METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
<H2>Comments And Feedback Welcome</H2>
Please enter any positive comments below: <P>
<TEXTAREA NAME="positive" ROWS=20 COLS=60></TEXTAREA> <P>
Please enter any negative comments below: <P>
<TEXTAREA NAME="negative" ROWS=2 COLS=20></TEXTAREA> <P>
Please enter your name below: <P>
<TEXTAREA NAME="username" ROWS=1 COLS=40>Your Name Here</TEXTAREA> <P>
To submit your comments, press this button: <INPUT TYPE="submit"
VALUE="Submit Comments">. <P>
To clear the form, press this button: <INPUT TYPE="reset"
VALUE="Clear Form">.
</FORM>
<HR> <P>
Things you may want to note: <P>
<UL>
<LI> Nothing.
</UL>
<A HREF="example-10.html">Back to example 10</A>;
<A HREF="example-12.html">forward to example 12</A>. <P>
<TITLE>Fill-Out Form Example #12</TITLE>

<H1>Fill-Out Form Example #12</H1>
This is another fill-out form example, with image maps. <P>
<HR>
<FORM METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
Here's an image of Larry Smarr; in the <CODE>INPUT</CODE> tag, the
<CODE>NAME</CODE> attribute is given as "Larry". <P>
<INPUT NAME="Larry" TYPE="image" SRC="http://www.ncsa.uiuc.edu/demoweb/smarr-small.gif"> <P>
Here's an image of Al Gore; in the <CODE>INPUT</CODE> tag, the
<CODE>NAME</CODE> attribute is given as "Al". <P>
<INPUT NAME="Al" TYPE="image" SRC="http://www.ncsa.uiuc.edu/demoweb/al-small.gif"> <P>
First, select one of the following options: <P>
<UL>
<LI> <INPUT TYPE="radio" NAME="zoom-factor" VALUE="2" CHECKED> Zoom in 2x.
<LI> <INPUT TYPE="radio" NAME="zoom-factor" VALUE="4"> Zoom in 4x.
<LI> <INPUT TYPE="radio" NAME="zoom-factor" VALUE="8"> Zoom in 8x.
</UL>
Then, click on the location in the image of your choice. <P>
To reset the form, press this button: <INPUT TYPE="reset" VALUE="Reset Form">.
</FORM>
<HR> <P>
Things you may want to note: <P>
<UL>
<LI> Blah.
</UL>
<A HREF="example-11.html">Back to example 11</A>. ; 
<A HREF="example-13.html">Forward to example 13</A> <p>

<TITLE>Fill-Out Form Example w/ Hidden Elements (#13)</TITLE>
<H1>Fill-Out Form Example w/ Hidden Elements (#13)</H1>
This is a very simple fill-out form example. <P>
<FORM METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
A single text entry field goes here: <INPUT NAME="entry"> <P>
There are two "hidden" form elements which are not displayed 
located here:
<INPUT TYPE="hidden" NAME="hidden element#1" VALUE="blah">
<INPUT TYPE="hidden" NAME="hidden element#2" VALUE="foobar">
<p>
These are created via TYPE="hidden" and can contain arbitrary NAME/VALUE pairs.
These can easily be used to maintain a form of "state" in multiple
connections with a server. <p>
To submit the query (including hidden data), press this button: <INPUT TYPE="submit" VALUE="Submit Query">. <P>
Things you may want to note: <P>
<UL>
<li>The hidden elements are not displayed but are not "secret".  They can 
	easily be found via the "View Source" option.  
</UL>
<A HREF="example-12.html">Back to example 12</A>. <P>

<TITLE>Fill-Out Form Example #2</TITLE>
<H1>Fill-Out Form Example #2</H1>
This is another fill-out form example, with multiple text entry
fields. <P>
<HR>
<FORM METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
The first text entry field goes here: <INPUT NAME="entry1"> <P>
The second text entry field goes here: <INPUT NAME="entry2"> <P>
The third text entry field goes here: <INPUT NAME="entry3"> <P>
To submit the query, press this button: <INPUT TYPE="submit"
VALUE="Submit Query">. <P>
</FORM>
<HR> <P>
Things you may want to note: <P>
<UL>
<LI> Each text entry field is given a distinct <CODE>NAME</CODE>
     attribute.
<LI> The query that results from this form looks like this:
     "?entry1=blah&amp;entry2=blargh&amp;entry3=blorf" (assuming "blah"
     had been typed into the first field, "blargh" into the second,
     and "blorf" into the third).
<LI> If nothing is typed into any of the fields, the corresponding
     "name=value" pairs will still be present in the query, with the
     value simply absent.  So, if you type "blah" into the first field
     and "blorf" into the third but nothing into the second, the query
     is "?entry1=blah&amp;entry2=&amp;entry3=blorf".
</UL>
<A HREF="example-1.html">Back to example 1</A> or <A
HREF="example-3.html">forward to example 3</A>. <P>

<TITLE>Fill-Out Form Example #3</TITLE>
<H1>Fill-Out Form Example #3</H1>
This is another fill-out form example, with multiple text entry
fields and checkboxes. <P>
<HR>
<FORM METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
<H2>Godzilla's Pizza -- Internet Delivery Service</H2>
Type in your street address: <INPUT NAME="address"> <P>
Type in your phone number: <INPUT NAME="phone"> <P>
Which toppings would you like? <P>
<OL>
<LI> <INPUT TYPE="checkbox" NAME="topping" VALUE="pepperoni">
     Pepperoni.
<LI> <INPUT TYPE="checkbox" NAME="topping" VALUE="sausage"> Sausage.
<LI> <INPUT TYPE="checkbox" NAME="topping" VALUE="anchovies">
     Anchovies.
</OL>
To order your pizza, press this button: <INPUT TYPE="submit"
VALUE="Order Pizza">. <P>
</FORM>
<HR> <P>
Things you may want to note: <P>
<UL>
<LI> By default, checkboxes are off.
<LI> When the query is packaged up, off checkboxes are ignored
     completely and on checkboxes are given the values specified by
     the <CODE>VALUE</CODE> attribute in each <CODE>INPUT</CODE> tag.
<LI> Multiple checkboxes can have the same <CODE>NAME</CODE>, if
     desired.
<LI> Checkboxes are very similar in use and interpretation on the
     server side to text entry fields.
<LI> Checkboxes are "n of many": Any number of them can be on or off
     at any time.  (The alternative scheme, "one of many", in which
     only one out of a group of several toggle buttons can be on, is
     not yet supported by Mosaic.)
</UL>
<A HREF="example-2.html">Back to example 2</A> or <A
HREF="example-4.html">forward to example 4</A>. <P>

<TITLE>Fill-Out Form Example #4</TITLE>
<H1>Fill-Out Form Example #4</H1>
This is another fill-out form example, with default values for some
text entry fields and checkboxes. <P>
<HR>
<FORM METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
The first text entry field, with default value "foo", goes here:
<INPUT NAME="entry1" VALUE="foo"> <P>
The second text entry field, with no default value, goes here: <INPUT
NAME="entry2"> <P>
Now, here's three checkboxes right in a row: <P>
<OL>
<LI> <INPUT TYPE="checkbox" NAME="box1" VALUE="activated" CHECKED> The first
     checkbox, on by default.
<LI> <INPUT TYPE="checkbox" NAME="box2" VALUE="primed"> The second
     checkbox, off by default.
<LI> <INPUT TYPE="checkbox" NAME="box3" CHECKED> The third
     checkbox, on by default.
</OL>
To submit the query, press this button: <INPUT TYPE="submit"
VALUE="Submit Query">.   <P>
To reset the various form elements to their default states, press this
button: <INPUT TYPE="reset" VALUE="Reset To Default Values">. <P>
</FORM>
<HR> <P>
Things you may want to note: <P>
<UL>
<LI> A <CODE>VALUE</CODE> attribute to an <CODE>INPUT</CODE> tag of
     <CODE>TYPE</CODE> "text" specifies the default value of that text
     field.
<LI> A <CODE>VALUE</CODE> attribute to an <CODE>INPUT</CODE> tag of
     <CODE>TYPE</CODE> "checkbox" specifies the value that checkbox
     takes when it's on.  If this attribute is not present, the
     default is "on".
<LI> A <CODE>CHECKED</CODE> attribute to a checkbox specifies that the
     checkbox is on by default.
<LI> Similar to how an <CODE>INPUT</CODE> tag of <CODE>TYPE</CODE>
     "submit" is a special query submission button, an
     <CODE>INPUT</CODE> tag of <CODE>TYPE</CODE> "reset" is a special
     form reset button.  (If all of the input elements have no default
     values, this may be better termed a "clear" button; the label on
     the pushbutton included in the form is controlled by the
     <CODE>VALUE</CODE> attribute to that <CODE>INPUT</CODE> tag.)
</UL>
<A HREF="example-3.html">Back to example 3</A> or <A
HREF="example-5.html">forward to example 5</A>. <P>

<TITLE>Fill-Out Form Example #5</TITLE>
<H1>Fill-Out Form Example #5</H1>
This is another fill-out form example, with various text entry field
attributes demonstrated. <P>
<HR>
<FORM METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
The first text entry field has no special attributes: <INPUT
NAME="entry1"> <P>
The second text entry field is twice as long (displays up to 40
characters, instead of the default 20): <INPUT SIZE=40 NAME="entry2">
<P>
Each of the first two text entry fields can hold as many characters as
the user wishes to type (into the millions).  The following text entry
field, however, is limited to five characters, and beeps when the user
tries to enter more: <INPUT SIZE=5 MAXLENGTH=5 NAME="entry3"> <P>
To submit the query, press this button: <INPUT TYPE="submit"
VALUE="Submit Query">.   <P>
To clear the form, press this button: <INPUT TYPE="reset" VALUE="Clear Form">.
</FORM>
<HR> <P>
<A HREF="example-4.html">Back to example 4</A> or <A
HREF="example-6.html">forward to example 6</A>. <P>

<TITLE>Fill-Out Form Example #6</TITLE>
<H1>Fill-Out Form Example #6</H1>
This is another fill-out form example, demonstrating multiple
independent fill-out forms in the same document. <P>
<HR>
<FORM METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
This is the first form: <P>
A text entry field: <INPUT NAME="entry1"> <P>
A second text entry field: <INPUT SIZE=10 NAME="entry2">
<P>
To submit the query, press this button: <INPUT TYPE="submit"
VALUE="Submit Query">.   <P>
To clear the form, press this button: <INPUT TYPE="reset" VALUE="Clear Form">.
</FORM>
<HR>
<FORM ACTION="http://hoohoo.ncsa.uiuc.edu/htbin/query">
This is a <B>completely different</B> form from the one right above.
<P>
Here's three checkboxes right in a row: <P>
<OL>
<LI> <INPUT TYPE="checkbox" NAME="box1"> The first checkbox.
<LI> <INPUT TYPE="checkbox" NAME="box2"> The second checkbox.
<LI> <INPUT TYPE="checkbox" NAME="box3"> The third checkbox.
</OL>
And a text entry form: <INPUT NAME="entry" SIZE=30> <P>
To submit the query, press this button: <INPUT TYPE="submit"
VALUE="Submit Query">.   <P>
To clear the form, press this button: <INPUT TYPE="reset" VALUE="Clear Form">.
</FORM>
<HR> <P>
<A HREF="example-5.html">Back to example 5</A> or <A
HREF="example-7.html">forward to example 7</A>. <P>

<TITLE>Fill-Out Form Example #7</TITLE>
<H1>Fill-Out Form Example #7</H1>
This is another fill-out form example, with toggle buttons. <P>
<HR>
<FORM METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
<H2>Godzilla's Pizza -- Internet Delivery Service, Part II</H2>
Type in your street address: <INPUT NAME="address"> <P>
Type in your phone number: <INPUT NAME="phone"> <P>
Which toppings would you like? <P>
<OL>
<LI> <INPUT TYPE="checkbox" NAME="topping" VALUE="pepperoni">
     Pepperoni.
<LI> <INPUT TYPE="checkbox" NAME="topping" VALUE="sausage"> Sausage.
<LI> <INPUT TYPE="checkbox" NAME="topping" VALUE="anchovies">
     Anchovies.
</OL>
How would you like to pay?  Choose any one of the following: <P>
<OL>
<LI> <INPUT TYPE="radio" NAME="paymethod" VALUE="cash" CHECKED> Cash.
<LI> <INPUT TYPE="radio" NAME="paymethod" VALUE="check"> Check.
<LI> <I>Credit card:</I>
<UL>
<LI> <INPUT TYPE="radio" NAME="paymethod" VALUE="mastercard"> Mastercard.
<LI> <INPUT TYPE="radio" NAME="paymethod" VALUE="visa"> Visa.
<LI> <INPUT TYPE="radio" NAME="paymethod" VALUE="americanexpress">
     American Express.
</UL>
</OL>
Would you like the driver to call before leaving the store? <P>
<DL>
<DD> <INPUT TYPE="radio" NAME="callfirst" VALUE="yes" CHECKED> <I>Yes.</I>
<DD> <INPUT TYPE="radio" NAME="callfirst" VALUE="no"> <I>No.</I>
</DL>
To order your pizza, press this button: <INPUT TYPE="submit"
VALUE="Order Pizza">. <P>
</FORM>
<HR> <P>
Things you may want to note: <P>
<UL>
<LI> Radio buttons (type <CODE>RADIO</CODE>) are one-of-many input
     elements.  The "many" is all radio buttons in the form with the
     same <CODE>NAME</CODE>.
<LI> In other ways, <CODE>RADIO</CODE> is the same as
     <CODE>CHECKBOX</CODE>.
<LI> Multiple sets of radio buttons (radio buttons with the same
     <CODE>NAME</CODE>) can be in a single form.  This may require
     careful document/interface design to keep things obvious -- don't
     intermix radio buttons of different <CODE>NAME</CODE> values, or
     the user won't understand how the interface works.
</UL>
<A HREF="example-6.html">Back to example 6</A> or <A
HREF="example-8.html">forward to example 8</A>. <P>

<TITLE>Fill-Out Form Example #8</TITLE>
<H1>Fill-Out Form Example #8</H1>
This is another fill-out form example, with a password entry form. <P>
<HR>
<FORM METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
<H2>Logging In To A Remote Service</H2>
Type in your username: <INPUT NAME="username"> <P>
Type in your password: <INPUT TYPE="password" NAME="password"> <P>
To log in, press this button: <INPUT TYPE="submit"
VALUE="Log In To Remote Service">. <P>
</FORM>
<HR> <P>
<FORM ACTION="http://hoohoo.ncsa.uiuc.edu/htbin/query">
<H2>Logging In To A Remote Service (With Defaults)</H2>
If you wish to log in as a guest, do not change the default values. <P>
Type in your username: <INPUT NAME="username" VALUE="guest"> <P>
Type in your password: <INPUT TYPE="password" NAME="password"
VALUE="guest"> <P>
To log in, press this button: <INPUT TYPE="submit"
VALUE="Log In To Remote Service">. <P>
</FORM>
<HR> <P>
Things you may want to note: <P>
<UL>
<LI> <CODE>INPUT</CODE> elements of type <CODE>PASSWORD</CODE> are
     normal text entry fields, except all characters are represented
     by an asterisk (<CODE>*</CODE>).
</UL>
<A HREF="example-7.html">Back to example 7</A> or
<A HREF="example-9.html">forward to example 9</A>. <P>

<TITLE>Fill-Out Form Example #9</TITLE>
<H1>Fill-Out Form Example #9</H1>
This is another fill-out form example, with option menus. <P>
<HR>
<FORM METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
<H2>Your Daily Planner</H2>
What would you like to do today? 
<SELECT NAME="what-to-do">
<OPTION>               Drink Coffee
<OPTION SELECTED>    Read A Book
<OPTION> Take A Walk
<OPTION>Buy A Bagel
<OPTION> Watch TV
</SELECT> <P>
Who would you like to do it with? <P>
<DL>
<DD> 
<SELECT NAME="who-to-do-it-with">
<OPTION> Marc
<OPTION> Eric
<OPTION> George
<OPTION SELECTED> Aleks
<OPTION> Jon
<OPTION> Chouck
</SELECT>
</DL>
To submit your choices, press this button: <INPUT TYPE="submit"
VALUE="Submit Choices">. <P>
To reset the form, press this button: <INPUT TYPE="reset" VALUE="Reset">.
</FORM>
<HR> <P>
Things you may want to note: <P>
<UL>
<LI> Whitespace is cleaned (supposedly).
<LI> If you don't specify any of the <CODE>OPTION</CODE>s as
     <CODE>SELECTED</CODE>, the first option will be the default.
</UL>
<A HREF="example-8.html">Back to example 8</A>;
<A HREF="example-10.html">forward to example 10</A>. <P>

