Dropdown HTML Forms

Is current?: 
Yes

The dropdown template dropdown.htm is a type of HTML form

Lines 41-45 display instructions. In a dropdown, the user selects one of a number of responses by clicking on the dropdown element (which expands the list of options), and selecting the desired option.  The advantage of the dropdown is that a large number of items can be placed compactly in a single page.  This is also a disadvantage because, with many items, the user cannot see all the options at a glance. If the dropdown has many items, such as a list of 200 countries, the user has to scroll through the list to find the appropriate option. A single dropdown item is shown below, enclosed within a table.  

<table> <tr> <td width="60%" align="right">My feelings toward Charlottesville are:&nbsp;&nbsp;</td> <td width="40%"> <select name="dditem1" class="ddtext"> <option selected="selected" value=".">.</option> <option value="0">Extremely cold</option> <option value="1">Very cold</option> <option value="2">Cold</option> <option value="3">Moderately cold</option> <option value="4">Somewhat cold</option> <option value="5">Neither cold nor warm</option> <option value="6">Somewhat warm</option> <option value="7">Moderately warm</option> <option value="8">Warm</option> <option value="9">Very warm</option> <option value="10">Extremely warm</option> </select> </td> </tr> </table> <br />


This table has one row with two data cells (columns).  The first data cell occupies 60% of the table width and the second cell occupies 40% of the table width.  If the dropdown options are wide or narrow, you may need to adjust these numbers;  they should add to 100%.  The question has two trailing blank spaces specified as &nbsp;&nbsp; they provide separation from the dropdown.  The dropdown list appears in the second data cell and is completely enclosed by the select tag. 

The name of this item is dditem1. Look at the structure of the option tags within select. Each option has a distinct value that may be made up of numbers and letters; the value of the selected option is stored in the database.  Notice that the first option is selected by default.  It is visible to the user when the page loads, and uses a period as its value. The period (.) is used for missing values.  The <br /> at the end inserts a new line prior to the next item.  The question uses the default text style that applies to the body but is right aligned. The dropdown item uses the ddtext style, which is in the head section on line 9. 

Files: