1. 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

3. By clicking on the down-arrow, the user sees a range of options

4. This is implemented as follows : T-shirt Order Form Order What is your name? Sorry! Each order is limited to one T-shirt. Select the one you want: Batman's cloak Superman's cloak Dr. Who's coat Form Submission Submit order

5. SELECT element vs. INPUT element of TYPE=radio The following SELECT element Batman's cloak Superman's cloak Dr. Who's coat is equivalent to the following group of INPUT elements: Batman's cloak Superman's cloak Dr. Who's coat They both allow ONLY ONE selection

6. Allowing multiple selections If we use the word MULTIPLE in the SELECT tag, multiple selections are allowed: Batman's cloak Superman's cloak Dr. Who's coat See the next slide

8. Preselection

9. This is done as follows: Batman's cloak Superman's cloak (our best-selling item) Dr. Who's coat

10. Preselection when only one selection is allowed Consider the following: Batman's cloak Superman's cloak (our best-selling item) Dr. Who's coat 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

12. What happens when the user moves to the T-shirt selection part of the form:

13. 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: Batman's cloak Superman's cloak (our best-selling item) Dr. Who's coat See what results on the next slide

15. 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

19. How it was done: Feedback What do you think of our products? Type your answer here … 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.