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?
<select name="ice cream flavor"> Vanilla
</option> Chocolate Chip
<option value="choc chip">
</option> Cookie Dough
</option> Mint Chocolate Chip
<option value="mint choc chip">
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.
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.
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)
For the Buttons to send a Form go to Part D of Demo 6.
Review Form Input types - go to Part B of Demo 6.
To set up a Form go to Part A of Demo 6.
Go back to the Exercise 5 page.
© Claudia Faulk. Updated 6.18