The form object select and how data are sent
To create lists and menus in HTML, the select and option tags are used. But how to send the option chosen by the user with other form data?
Here the syntax of the select tag:
<form method="GET" action="page.html"> <select name=""> <option value="" selected></option> <option value=""></option> <option value=""></option> .... </select> </form>
Forms transmit data in the form name=value where name is the name attribute of the form object and value the content of the value attribute.
In the case of a list of options, the name that is passed with the form data is the name of the select tag and the value is the value of the option chosen.
<select name="mylist"> <option value="option1"></option> <option value="option2"></option> </select>
If the second option has been choosen, with date forms, this will be sent:
And if an option has a selected attribute and the user has made no choice, the value of this option will be passed.
The selected attribute determines a default choice
By default, this is the first option that is selected if the user does not make a choice.
You can change the default by associating the selected attribute to another option.
<select name="color"> <option value="orange"></option> <option value="blue" selected></option> <option value="red"></option> .... </select>
In the example, the menu displays the default color blue and it is this option that will be sent with form data, if the user does not change the choice.
the selected attribute is sometimes also written:
<option value="blue" selected="selected"> </ option>
This does not seem to bring anything more, at least with modern browsers.
The multiple attribute allow to select several options at once
Several options may be selected at once by combining the CTRL key with the mouse providing this property is added.
<select name="color" multiple> <option value="orange"></option> <option value="blue" selected></option> <option value="red"></option> .... </select>
In this case, the name of the object is passed among the select form data with the value of each option clicked.
Thus if the user selects both the blue and red colors, there are these parameters in the URL:
The size attribute define the number of lines to display
It defines the number of items displayed at once. The default is 1.
In the demonstration below, you can see the size="4" property display four lines, thus four options.
The label attribute is assigned the content in the short form
An option has a value assigned to the value attribute, and text to display that is either included in the tag, or assigned to the label attribute.
In short form, the label attribute specifies the text to display. For example this option in long form:
Can be written in short form:
<option value="orange" label="Orange" />
If a label is added to the long form with a content included, it is the label value that is displayed and not the enclosed content.
The optgroup tag divides options
It creates a hierarchy of menu options by combining options into sub-menues.
<select name="color" multiple> <optgroup label="Color"> <option value="orange">Orange</option> <option value="blue" selected>Blue</option> <option value="red">Red</option> </optgroup> <optgroup label="Size"> <option value="one">One</un> </optgroup> </select>
This will display this in the selection box:
Colors Orange Blue Red Size One
If the select tag has the name "color", the following statement displays the number of the selected option, starting from zero:
To access the values, with the options array:
var object = document.forms.couleur; var index = object.selectedIndex; var value = object.options[index].value; var content = object.options[index].text;
document.forms.color.selectedIndex = 3;
Demonstration of the select tag with a list a fruits
Choose a value in the list and click Send to pass the form on the page, which will be reloaded.
var parameters = location.search.substring(1).split("&");
var temp = parameters.split("=");
varname = unescape(temp);
if(varname == "") return;
value = unescape(temp);
alert(varname + "=" + value);
The HTML code with the GET method for form data in URL:
<form name="form1" method="get" action="select.php">
<select name="color" id="color" multiple size="4">
<input type="submit" value="Send">
- Passing parameters to a web page. How to retrieve form data in another page.