Selected option in select tag html

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.

Источник

Selected option in select tag html

Поле выбора значения из раскрывающегося списка.

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

Элемент используется, когда нужно показать выпадающий список.

Пример

Скопировать ссылку «Пример» Скопировано

   Ваш город  -- Выберите город -- Санкт-Петербург Самара Пермь Новосибирск   form> label for="city-select">Ваш городlabel> select name="city" id="city-select"> option value="">-- Выберите город --option> option value="petersburg">Санкт-Петербургoption> option value="samara">Самараoption> option value="perm">Пермьoption> option value="novosibirsk">Новосибирскoption> select> form>    Скопировать Скопировано Не удалось скопировать   

Подробно

Скопировать ссылку «Подробно» Скопировано

В примере выше показано типовое использование элемента . Это своего рода обёртка над списком опций, которые задаются тегом . Чтобы иметь возможность отправить выбранное значение на сервер, необходимо выполнить несколько условий:

• задать тегу атрибут name ;
• задать каждому тегу атрибут value . Если этот атрибут не задан, то его значение будет равно текстовому содержимому тега .

Если нужно, чтобы изначально был выбран какой-то элемент из списка, нужно задать соответствующему тегу атрибут selected .

Внутри тега могут использоваться только теги и .

Атрибуты

Скопировать ссылку «Атрибуты» Скопировано

Тег используется совместно с несколькими специфическими, а так же с большинством атрибутов для элементов форм.

autocomplete

Скопировать ссылку «autocomplete» Скопировано

Разрешает автозаполнение. Автозаполнение — это когда браузер предлагает сохранить, например, выбранный город, чтобы данные подставлялись при следующем входе.

autofocus

Скопировать ссылку «autofocus» Скопировано

Атрибут булевого типа (без значения, либо атрибут есть в теге, либо его нет совсем). Если он указан, то при загрузке страницы фокус будет автоматически помещён на наш выпадающий список.

disabled

Скопировать ссылку «disabled» Скопировано

Атрибут булевого типа. Если задан, то выпадающий список отключается для взаимодействия с пользователем. Если атрибут не задан, то он может быть унаследован у одного из предков (например у контейнера или . Если ни у одного предка вверх по дереву этот атрибут не задан, то выпадающий список доступен для взаимодействия.

form

Скопировать ссылку «form» Скопировано

Атрибут указывает на элемент , с которым связан выпадающий список. Значением атрибута должен быть id формы в пределах текущего документа. Если атрибут не задан, то обязательно должен находиться внутри тега . Но если задать атрибут, то нахождение внутри формы не обязательно и может находиться в любом месте страницы.

multiple

Скопировать ссылку «multiple» Скопировано

Атрибут булевого типа. Включает возможность выбора сразу нескольких пунктов списка. Если атрибут задан, то внешний вид списка поменяется с однострочного на многострочный с возможностью скроллинга.

name

Скопировать ссылку «name» Скопировано

Имя выпадающего списка. При отправке формы значение атрибута name будет ключом в отправляемом объекте.

required

Скопировать ссылку «required» Скопировано

Атрибут булевого типа. Указывает, должен ли обязательно быть выбран какой-то пункт выпадающего списка, значение атрибута value которого — это не пустая строка. Атрибут учитывается при валидации формы при отправке. Если поле не заполнить, то при попытке отправки формы браузер покажет ошибку.

size

Скопировать ссылку «size» Скопировано

Числовой атрибут. Если включён атрибут multiple , то это число указывает на количество видимых пунктов списка.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Выбрать несколько элементов списка, когда включён атрибут multiple , можно, используя клавиши Ctrl , Cmd и Shift . Клавиши Ctrl (Windows, Linux) и Cmd (Mac OS) работают одинаково. Мы зажимаем эту клавишу на клавиатуре, а затем кликаем мышкой в нужные пункты списка. Этим способом можно выбрать несколько пунктов, находящихся на разном расстоянии друг от друга. Если выбрать пункт списка, зажать клавишу Shift и выбрать любой другой, то будут выбраны последовательно все пункты списка между этими двумя.

На практике

Скопировать ссылку «На практике» Скопировано

Денис Ежков советует

Скопировать ссылку «Денис Ежков советует» Скопировано

🛠 Выпадающий список — это один из элементов формы, почти не поддающийся стилизации. Мы можем немного изменить внешний вид самого элемента , но стилизовать выпадающий список опций можно не для всех браузеров. Многие дизайнеры любят рисовать нестандартные выпадающие списки в угоду красоте, но реализация таких списков очень трудоёмка на чистом HTML и CSS. Рекомендуется для выпадающих списков оставлять родной вид, потому что такие списки обладают рядом преимуществ перед нестандартными. Например, выпадающий список опций может выходить за границы окна браузера, давая пользователю возможность выбрать нужный элемент.

🛠 Несмотря на вышесказанное, немного стилизовать выпадающий список всё же можно. Вот как можно изменить вид стрелочки:

   Нестандартная стрелочка   -- Выберите город -- Санкт-Петербург Москва Казань Самара Пермь Новосибирск    form> label for="city-select">Нестандартная стрелочкаlabel> div class="select-wrapper"> select name="city" id="city-select"> option selected disabled>-- Выберите город --option> option value="petersburg">Санкт-Петербургoption> option value="moscow">Москваoption> option value="kazan">Казаньoption> option value="samara">Самараoption> option value="perm">Пермьoption> option value="novosibirsk">Новосибирскoption> select> div> form>    Скопировать Скопировано Не удалось скопировать   

В данном случае мы оборачиваем наш дополнительным блоком, чтобы задействовать псевдоэлемент : : after этого блока. К сожалению, относится к такому типу элементов, у которых нет своих псевдоэлементов : : before и : : after .

 .select-wrapper  position: relative;> .select-wrapper::after  content: "⬇️"; position: absolute; right: 0; margin-top: -2px; pointer-events: none;> select  appearance: none; width: 200px; padding: 4px; border-color: #aaa; border-radius: 3px;> .select-wrapper  position: relative; > .select-wrapper::after  content: "⬇️"; position: absolute; right: 0; margin-top: -2px; pointer-events: none; > select  appearance: none; width: 200px; padding: 4px; border-color: #aaa; border-radius: 3px; >    Скопировать Скопировано Не удалось скопировать   

Используем свойство appearance , чтобы отключить браузерную стрелку справа. В качестве стрелки ставим псевдоэлемент : : after от родительского блока. Не забываем про позиционирование, а также отключаем у псевдоэлемента взаимодействие с мышкой, иначе при клике на него выпадающий список раскрываться не будет.

Источник