<< .. Go to : : Home : : Exercise 5 : : Demo 5A : : Demo 5B : : Demo 5C : : Demo 5D : : A Simple Form : : TAGS : : All Class Demos .. >>

Exercise 5 Demo: Part C : Forms

Selection Types and Text Fields

You can also create a pull-down menu in your form. Pull-down menus allow a long list without taking up a lot of space.
You can only make one selection using this option.

What is your favorite flavor of ice cream?

What is your favorite flavor of ice cream?
<select name="ice cream flavor">
<option value="vanilla">
Vanilla </option>
<option value="chocolate">
Chocolate </option>
<option value="strawberry">
Strawberry </option>
<option value="choc chip">
Chocolate Chip </option>
<option value="cookie">
Cookie Dough </option>
<option value="mint choc chip">
Mint Chocolate Chip </option>

The drop-down menu in enclosed within the <select> </select> element.
Each selection is opened with the <option> element. The "value" is the name of the selected option when you receive the information. The first option is automatically selected. If you want to make another option the default, add the selected attribute to the option tag. Close with the </option> tag to be XHTML compliant.

You can turn any pulldown menu into a scrolling box by adding the size="n" attribute to the select tag. Size="4" would show four options in a scrolling window.

What is your favorite flavor of ice cream?

Text Input Boxes

Let's make a large text input box. We've already made a small text input box. For large text input boxes, use the <textarea></textarea> element. The tags form a text box for type input.

Additional attributes include:

  • name="x" - for easy identification of the comment
  • id="x" - provide a unique identifier for the text box
  • rows="n" - height of the box in number of text lines.
  • cols="n" - the width of the box in number of characters.

Please write your comments about this exercise so far.

The code looks like this:

Please write your comments about this exercise so far.
<textarea name="exercise comments" id="comments" cols="50" rows="8"> Put your comments here (add text if you wish) </textarea>

For more Complex Forms go to Extra Info on Forms for Demo 5.

For the Buttons to send a Form go to Part D of Demo 5.

Review Form Input types - go to Part B of Demo 5.

To set up a Form go to Part A of Demo 5.

Go back to the Exercise 5 page.

© Claudia Faulk. Created in 2008. Updated 1.12