Home >Web Front-end >HTML Tutorial >HTML
HTML
- WBOYOriginal
- 2016-08-29 08:36:502722browse
All major browsers support the
The
select element creates single-select or multiple-select menus.
Tip: The select element is a form control that can be used to accept user input in a form.
Properties
New: New attributes in HTML5.
| Property | Value | Description |
|---|---|---|
| autofocus(5) | autofocus | Specifies that the text area automatically gains focus after the page loads. |
| disabled | disabled | Provision to disable this dropdown list. |
| form(5) | form_id | Specifies one or more forms to which the text area belongs. |
| multiple | multiple | Multiple options can be selected. |
| name | name | Specifies the name of the drop-down list. |
| required(5) | required | Specifies that the text area is required. |
| size | number | Specifies the number of visible options in the drop-down list. |
This example demonstrates how to create a simple drop-down list box in an HTML page. The drop-down list box is a selectable list.
<html> <body> <form> <<span style="color: #0000ff;">select</span> name=<span style="color: #800000;">"</span><span style="color: #800000;">cars</span><span style="color: #800000;">"</span>> <option value=<span style="color: #800000;">"</span><span style="color: #800000;">volvo</span><span style="color: #800000;">"</span>>Volvo</option> <option value=<span style="color: #800000;">"</span><span style="color: #800000;">saab</span><span style="color: #800000;">"</span>>Saab</option> <option value=<span style="color: #800000;">"</span><span style="color: #800000;">fiat</span><span style="color: #800000;">"</span>>Fiat</option> <option value=<span style="color: #800000;">"</span><span style="color: #800000;">audi</span><span style="color: #800000;">"</span>>Audi</option> </<span style="color: #0000ff;">select</span>> </form> </body> </html>
- This example demonstrates how to create a simple drop-down list with pre-selected values. (Translator’s Note: Preselected values refer to pre-specified preferences.)
<html> <body> <form> <<span style="color: #0000ff;">select</span> name=<span style="color: #800000;">"</span><span style="color: #800000;">cars</span><span style="color: #800000;">"</span>> <option value=<span style="color: #800000;">"</span><span style="color: #800000;">volvo</span><span style="color: #800000;">"</span>>Volvo</option> <option value=<span style="color: #800000;">"</span><span style="color: #800000;">saab</span><span style="color: #800000;">"</span>>Saab</option> <option value=<span style="color: #800000;">"</span><span style="color: #800000;">fiat</span><span style="color: #800000;">"</span> selected=<span style="color: #800000;">"</span><span style="color: #800000;">selected</span><span style="color: #800000;">"</span>>Fiat</option> <option value=<span style="color: #800000;">"</span><span style="color: #800000;">audi</span><span style="color: #800000;">"</span>>Audi</option> </<span style="color: #0000ff;">select</span>> </form> </body> </html>
Attachment: Select object
Select object represents a drop-down list in an HTML form.
In an HTML form, every time the
You can access a Select object by looping through the form's elements[] array, or using document.getElementById().
Select object collection
| Collection | Description |
|---|---|
| options[] | Returns an array containing all options in the dropdown list. |
Select object properties
| Property | Description |
|---|---|
| disabled | Sets or returns whether the dropdown should be disabled. |
| form | Returns a reference to the form containing the dropdown list. |
| id | Set or return the id of the drop-down list. |
| length | Returns the number of options in the drop-down list. |
| multiple | Set or return whether to select multiple items. |
| name | Set or return the name of the drop-down list. |
| selectedIndex | Set or return the index number of the selected item in the drop-down list. |
| size | Set or return the number of visible rows in the dropdown list. |
| tabIndex | Set or return the tab key control order of the drop-down list. |
| type | Returns the form type of the drop-down list. |
Standard properties
| Property | Description |
|---|---|
| className | Sets or returns the class attribute of an element. |
| dir | Set or return the direction of text. |
| lang | Set or return the language code of the element. |
| title | Sets or returns the element's title attribute. |
Select object method
| Method | Description |
|---|---|
| add() | Add an option to the dropdown list. |
| blur() | Remove focus from dropdown list. |
| focus() | Set focus on dropdown list. |
| remove() | Remove an option from the dropdown list. |
Select object event handle
| Event handle | Description |
|---|---|
| onchange | Event handler called when the selection is changed. |
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：HTML
tag creates a horizontal line in the pageNext article：HTML
tag creates a horizontal line in the page
tag creates a horizontal line in the pageNext article：HTML
tag creates a horizontal line in the page