The SELECT element
• This type of element merely offers another
way of capturing the kinds of user-selection
that we have already seen how to capture
with the INPUT elements of
TYPE=checkbox and of TYPE=radio
• Consider the web page on the following
slide
By clicking on the down-arrow, the user sees
a range of options
This is implemented as follows:
<FORM METHOD="post" ACTION="/cgi-bin/tshirts.cgi">
<H1> T-shirt Order Form </H1>
<FIELDSET>
<LEGEND>Order</LEGEND>
<P> What is your name? <INPUT TYPE=text NAME=name SIZE=10></P>
<P>Sorry! Each order is limited to one T-shirt. Select the one you want: </P>
<SELECT NAME=products>
<OPTION VALUE=Batman> Batman's cloak </OPTION>
<OPTION VALUE=Superman> Superman's cloak</OPTION>
<OPTION VALUE="Dr. Who"> Dr. Who's coat</OPTION>
</SELECT>
</FIELDSET>
<FIELDSET>
<LEGEND>Form Submission</LEGEND>
<P> <BUTTON TYPE=submit>Submit order</BUTTON></P>
</FIELDSET>
</FORM>
SELECT element vs. INPUT element of
TYPE=radio
• The following SELECT element
<SELECT NAME=products>
<OPTION VALUE=Batman> Batman's cloak </OPTION>
<OPTION VALUE=Superman> Superman's cloak</OPTION>
<OPTION VALUE="Dr. Who"> Dr. Who's coat</OPTION>
</SELECT>
is equivalent to the following group of INPUT
elements:
<INPUT TYPE=radio NAME=products VALUE=Batman> Batman's cloak
<INPUT TYPE=radio NAME=products VALUE=Superman> Superman's cloak
<INPUT TYPE=radio NAME=products VALUE="Dr. Who"> Dr. Who's coat
• They both allow ONLY ONE selection
Allowing multiple selections
• If we use the word MULTIPLE in the
SELECT tag, multiple selections are
allowed:
<SELECT NAME=products MULTIPLE>
<OPTION VALUE=Batman> Batman's cloak </OPTION>
<OPTION VALUE=Superman> Superman's cloak</OPTION>
<OPTION VALUE="Dr. Who"> Dr. Who's coat</OPTION>
</SELECT>
• See the next slide
Preselection
This is done as follows:
<SELECT NAME=products MULTIPLE>
<OPTION VALUE=Batman> Batman's cloak </OPTION>
<OPTION VALUE=Superman SELECTED>
Superman's cloak (our best-selling item)</OPTION>
<OPTION VALUE="Dr. Who"> Dr. Who's coat</OPTION>
</SELECT>
Preselection when only one
selection is allowed
• Consider the following:
<SELECT NAME=products>
<OPTION VALUE=Batman> Batman's cloak </OPTION>
<OPTION VALUE=Superman SELECTED>
Superman's cloak (our best-selling item)</OPTION>
<OPTION VALUE="Dr. Who"> Dr. Who's coat</OPTION>
</SELECT>
• Notice, on the next slide, that the Superman
shirt is shown as a default, even though the
Batman shirt is first in the list above
What happens when the user moves to the
T-shirt selection part of the form:
Sizing the selection box
• So far, the size of the selection box on the form has been
determined by default by the browser
• However, we can specify a size explicitly if we wish:
<SELECT NAME=products SIZE=2>
<OPTION VALUE=Batman> Batman's cloak </OPTION>
<OPTION VALUE=Superman SELECTED>
Superman's cloak (our best-selling item)</OPTION>
<OPTION VALUE="Dr. Who"> Dr. Who's coat</OPTION>
</SELECT>
• See what results on the next slide
The TEXTAREA element
• With this element, we can allow the user to
give us free-form feedback
• Consider the following web page and what
happens when the user fills it in as shown
on the following slides
How it was done:
<FIELDSET>
<LEGEND> Feedback </LEGEND>
<P>What do you think of our products?</P>
<TEXTAREA NAME=feedback ROWS=3 COLS=40>
Type your answer here …
</TEXTAREA>
</FIELDSET>
• A TEXTAREA is delimited by two tags: TEXTAREA and
/TEXTAREA
• The TEXTAREA tag has NAME attribute and may have
attributes which specify the size of the text-entry box -- but
the user’s text can be much larger than this
• The text between the two tags is the initial text that appears
in the text-entry box.