Html select element attributes

HTMLSelectElement

A better way to track changes to the user’s selection is to watch for the change (en-US) event to occur on the . This will tell you when the value changes, and you can then update anything you need to. See the example provided (en-US) in the documentation for the change event for details.

Specifications

Specification	Status	Comment
HTML Living Standard Определение ‘HTMLSelectElement’ в этой спецификации.	Живой стандарт	Since the latest snapshot, HTML5, it adds the autocomplete property and the reportValidity() method.
HTML5 Определение ‘HTMLSelectElement’ в этой спецификации.	Рекомендация	Is a snapshot of HTML Living Standard. It adds the autofocus , form , required , labels , selectedOptions , willValidate , validity and validationMessage properties. The tabindex property and the blur() and focus() methods have been moved to HTMLElement . The methods item() , namedItem() , checkValidity() and setCustomValidity() .
Document Object Model (DOM) Level 2 HTML Specification Определение ‘HTMLSelectElement’ в этой спецификации.	Устаревшая	options now returns an HTMLOptionsCollection (en-US). length now returns an unsigned long .
Document Object Model (DOM) Level 1 Specification Определение ‘HTMLSelectElement’ в этой спецификации.	Устаревшая	Initial definition.

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on 21 июн. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Источник

HTML Tag

HTML tag is used to create drop down list of options, which appears when the user clicks on form element, and it allows to choose one of the options.

The first option from the list of options is selected by default. To change a predefined option, the selected attribute is used.

The list appearance depends on the size attribute, which specifies the height of the list. The width of the list depends on the length of the text inside . The width can also be regulated with CSS styles.

The tag is difficult to style effectively with CSS. You can affect certain parts of an element. For example, it’s possible to control the displayed font, box model, etc., as well as you can use the appearance property for removing the default system appearance. But these properties do not give a stable result across browsers. The internal structure of the tag is complicated, and it is difficult to control. For getting a full control, you may need a library with better styling form widgets, or a dropdown menu using non-semantic elements.

If you need to send the data to the server or refer to the list with scripts, the tag should be put inside the tag.

Syntax

The tag comes in pairs. The content is written between the opening () and closing () tags.

Example of the HTML tag:

html> html> head> title>Title of the document title> head> body> form> select> option value="books">Books option> option value="html">HTML option> option value="css">CSS option> option value="php">PHP option> option value="js">JavaScript option> select> form> body> html>

Result

Example of the HTML tag with the tag:

html> html> head> title>Window title of the page title> head> body> select aria-label="Books nad Snippets"> optgroup label="Books"> option value="html">HTML option> option value="css">CSS option> optgroup> optgroup label="Snippets"> option value="git">Git option> option value="java">Java option> optgroup> select> body> html>

In this example, the tag is used to collect the options into groups.

Result

Example of the HTML tag with the tag:

html> html> head> title>Window title of the page title> head> body> p>Airport of departure: p> form action="action_form.php" method="get"> input type="text" list="airports" name="airports"> datalist id="airports"> option value="Berlin"> option value="Los Angeles"> option value="Moscow"> option value="Paris"> datalist> input type="submit" value="confirm"> form> body> html>

In this example, the tag is used because we need to send information to the server.

Result

Attributes

Attribute	Value	Description
autofocus	autofocus	Defines that the list should be focused after the page loads.
disabled	disabled	Indicates that the list is disabled, the user cannot interact with it.
form	form_id	Defines the form which the element is connected with. Is not supported in Firefox.
multiple:	multiple:	Indicates that more than one options can be chosen. The method of choosing more than one option depends on the operating system. In Windows, you need to keep CTRL button pressed, in Mac CMD button.
name	name	Defines a name for the drop down menu. It can be used to access the data of the form after it has been sent or to link to JavaScript element.
required	required	Indicated that the the choice of an option is required.
size	number	Indicated the count of the options in drop down list. If the value of «size» attribute is bigger than 1 and smaller than the total number of the options in the list, the browser will automatically add a scroll to indicate that there are more options to view.

How to style tag?

Common properties to alter the visual weight/emphasis/size of text in tag:

• CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
• CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
• CSS font-size property sets the size of the font.
• CSS font-weight property defines whether the font should be bold or thick.
• CSS text-transform property controls text case and capitalization.
• CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.

Coloring text in tag:

• CSS color property describes the color of the text content and text decorations.
• CSS background-color property sets the background color of an element.

Text layout styles for tag:

• CSS text-indent property specifies the indentation of the first line in a text block.
• CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user.
• CSS white-space property specifies how white-space inside an element is handled.
• CSS word-break property specifies where the lines should be broken.

Other properties worth looking at for tag:

• CSS text-shadow property adds shadow to text.
• CSS text-align-last property sets the alignment of the last line of the text.
• CSS line-height property specifies the height of a line.
• CSS letter-spacing property defines the spaces between letters/characters in a text.
• CSS word-spacing property sets the spacing between words.

Источник

Elements/select

The element represents a control for selecting amongst a set of options.

Point

• The list of options for a select element consists of all the option element children of the select element, and all the option element children of all the optgroup element children of the select element, in tree order.

HTML Attributes

• autofocus = boolean
  Allows the author to indicate that a control is to be focused as soon as the page is loaded

• disabled = boolean
  If present, make the control non-interactive and to prevent its value from being submitted.

• form = the ID of a form element in the element’s owner
  Associate the select element with its form owner.
  By default, the select element is associated with its nearest ancestor form element.

• multiple = boolean
  If the attribute is present, then the select element represents a control for selecting zero or more options from the list of options. [Example B]

• required = boolean
  When specified, the user will be required to select a value before submitting the form.

• size = valid non-negative intege
  Gives the number of options to show to the user.
  If the multiple attribute is present, then the size attribute’s default value is 4. If the multiple attribute is absent, then the size attribute’s default value is 1.

Examples

Example A

The following example shows how a select element can be used to offer the user with a set of options from which the user can select a single option. The default option is preselected. [try it]:

 
Select unit type:  Miner Puffer Snipey Max Firebot  
 

Example B

Here, the user is offered a set of options from which he can select any number. By default, all five options are selected [try it]:

 
Select unit types to enable on this map:  Miner Puffer Snipey Max Firebot  
 

HTML Reference

The HTML5 specification defines the element in 4.10.9 The select element.

Источник

CSS Attribute Selectors

It is possible to style HTML elements that have specific attributes or attribute values.

CSS [attribute] Selector

The [attribute] selector is used to select elements with a specified attribute.

The following example selects all elements with a target attribute:

Example

CSS [attribute=»value»] Selector

The [attribute=»value»] selector is used to select elements with a specified attribute and value.

Example

CSS [attribute~=»value»] Selector

The [attribute~=»value»] selector is used to select elements with an attribute value containing a specified word.

The following example selects all elements with a title attribute that contains a space-separated list of words, one of which is «flower»:

Example

The example above will match elements with title=»flower», title=»summer flower», and title=»flower new», but not title=»my-flower» or title=»flowers».

CSS [attribute|=»value»] Selector

The [attribute|=»value»] selector is used to select elements with the specified attribute, whose value can be exactly the specified value, or the specified value followed by a hyphen (-).

Note: The value has to be a whole word, either alone, like class=»top», or followed by a hyphen( — ), like >

Example

CSS [attribute^=»value»] Selector

The [attribute^=»value»] selector is used to select elements with the specified attribute, whose value starts with the specified value.

The following example selects all elements with a class attribute value that starts with «top»:

Note: The value does not have to be a whole word!

Example

CSS [attribute$=»value»] Selector

The [attribute$=»value»] selector is used to select elements whose attribute value ends with a specified value.

The following example selects all elements with a class attribute value that ends with «test»:

Note: The value does not have to be a whole word!

Example

CSS [attribute*=»value»] Selector

The [attribute*=»value»] selector is used to select elements whose attribute value contains a specified value.

The following example selects all elements with a class attribute value that contains «te»:

Note: The value does not have to be a whole word!

Example

Styling Forms

The attribute selectors can be useful for styling forms without class or ID:

Example

input[type=»text»] <
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
>

input[type=»button»] width: 120px;
margin-left: 35px;
display: block;
>

Tip: Visit our CSS Forms Tutorial for more examples on how to style forms with CSS.

All CSS Attribute Selectors

Selector	Example	Example description
[attribute]	[target]	Selects all elements with a target attribute
[attribute=value]	[target=»_blank»]	Selects all elements with target=»_blank»
[attribute~=value]	[title~=»flower»]	Selects all elements with a title attribute containing the word «flower»
[attribute|=value]	[lang|=»en»]	Selects all elements with a lang attribute value starting with «en»
[attribute^=value]	a[href^=»https»]	Selects every element whose href attribute value begins with «https»
[attribute$=value]	a[href$=».pdf»]	Selects every element whose href attribute value ends with «.pdf»
[attribute*=value]	a[href*=»w3schools»]	Selects every element whose href attribute value contains the substring «w3schools»

Источник