Cookies improve the way our website works, by using this website you are agreeing to our use of cookies. For more information see our privacy policy. OK
WordPress Theme & Editor Syntax Highlighter Blog
WordPress Theme & Editor Syntax Highlighter Forum Blog
You are here: Reference > HTML > tags > select

select element

Browser support:
Creates a drop-down list or list box element.
To add items to the select element, use the option tag.
The select tag allows simple or multiple selection, depending on the state of the MULTIPLE attribute.
  • If multiple selection is allowed, the visual appearance of the select tag can only be a list box.
  • If only one selected element is allowed, the select element may be a drop-down list or a list box. The default appearance is the drop-down list in that case.
You can set the count of the visible rows in a select tag with the size attribute. If the value of the size attribute is more than one, the appearance of the select tag is a list box.
The select element is one of the form controls.
The selected state of the control can be submitted to a server if the following conditions are met:
  • A form element must contain the select element.
  • The action attribute of the container form must be set to the URL of the server.
  • The name attribute of the select element must be specified and non-empty. If multiple selection is allowed, use brackets [] at the end of the value to reach all of the selected elements on the server side.
In that case:
  • If multiple selection is allowed:
    If there is no selected element in the control, no information is sent with the form belonging to the select tag. Otherwise the name of the select tag is submitted with an array of the selected elements. The array contains the value of the selected option tags.
  • If only one selected element is allowed:
    The name of the select element is submitted with the value of the selected option tag.
If the value attribute of the option tag is not defined, the text content will be sent. Define different values for the option items, otherwise you cannot identify on the server side which one was selected.
If you want to see the HTML tags by categories, please visit this page.
This element requires a closing tag.
JavaScript page for this element: select.

Possible members:

 Attributes
Events
Styles
Pseudos
accessKey
Sets an access key to an element.
align
Sets the object's position with respect to the surrounding text.
class
Sets the style class or classes that belong to the element.
contentEditable
3
 Sets whether the contents of the object are editable.
dir
Sets the text direction as related to the lang attribute.
DISABLED
Sets the state of an object for user interaction.
HIDEFOCUS
Specifies whether a dotted rectangle (focus rectangle) is drawn around an object while it has focus.
id
Sets a unique identifier for the object.
lang
Specifies the language of the element.
language
Sets the scripting language for the current element. Use it only for the script element.
MULTIPLE
Sets whether more than one item from a list can be selected.
name
Sets the name of a form control that affects the contents of the message submitted to the server.
size
Specifies the count of the visible option items in a selection list. The selection list can be a select element or the selection list of a keygen element.
style
Sets an inline style associated with an element.
tabIndex
Specifies the tabbing order for keyboard navigation using the TAB key.
title
Specifies a tooltip for an element.
unSelectable
Sets whether the selection process can start in an element's content.
xml:lang
Sets the language code of the XML document.

Example HTML code 1:

This example illustrates the use of the select element for a single-selection drop-down list:
 
<form method="post" action="#URL#">
    My favorite fruit:
    <select name="fruit">
        <option value="Apple">Apple</option>
        <option value="Pear">Pear</option>
        <option value="Peach">Peach</option>
    </select>
    <br /><br />
    <input type="submit" value="Send" />
</form>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the select element for a single-selection list box:
 
<form method="post" action="#URL#">
    My favorite fruit:
    <select name="fruit" size="3">
        <option value="Apple">Apple</option>
        <option value="Pear">Pear</option>
        <option value="Peach">Peach</option>
    </select>
    <br /><br />
    <input type="submit" value="Send" />
</form>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the select element for a multiple-selection list:
 
<form method="post" action="#URL#">
    My favorite fruits:
    <select name="fruits[]" multiple="multiple">
        <option value="Apple">Apple</option>
        <option value="Pear">Pear</option>
        <option value="Peach">Peach</option>
    </select>
    <br /><br />
    <input type="submit" value="Send" />
</form>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Related pages:

optGroup
option

External links:

select element (MSDN)
select element (Safari Reference Library)
select element (W3C)
User Contributed Comments

Post Content

Post Content
WordPress Theme & Editor | Index Panel | Syntax Highlighter | Dottoro
Link To Us | Terms of Use | Contact Us | Privacy Policy
© 2024 Dottoro.com. All rights reserved.
HTML
CSS
JavaScript
Appendix