Select html: Атрибут multiple | htmlbook.ru

Зачем нужны и как работают формы на современных сайтах

Та же строка поиска по сайту (здесь описан поиск от яндекса) создается с использованием этих тэгов, а поиск то на вашем проекте будет обязательно. Поэтому понимание того, как они устроены и работают, вам совсем не помешает для успешной работы над дизайном, да и при самостоятельной раскрутке и продвижении будет не лишним.

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

Да, хочу еще напомнить, что мы уже успели рассмотреть много материалов на тему языка гипертекстовой разметки, например, узнали принципы формирования цветов в Html, трех видов списков на тегах ul, ol, li, dl) и принципы создания таблиц на тегах Tr, Th, Td, Table.

По своей сути формы состоят из элементов, для создания которых внутри основного контейнера из тегов Form вставляют различные тэги — Checked, Value, Checkbox, Radio, Checkbox, Submit и др. Нам лишь нужно будет расположить ее код в любом удобном для этого месте шаблона сайта, указав с помощью тегов и их атрибутов, как она должна будет выглядеть.

Это может быть текстовое поле с кнопкой отправки введенного запроса, варианты выбора с радиокнопками (когда можно оставить нажатой только одну из предоставляемых кнопок), несколько текстовых полей с кнопкой для отправки (обратная связь описанная тут) и многое другое.

Например, в случае «поиска», с помощью атрибута Value можно задать, что именно будет написано на кнопке расположенной рядом с полем для ввода запроса. Данные вводимые в формах должны быть в дальнейшем каким-то образом обработаны.

Например, в случае обратной связи пользователь, после того как заполнит поле со своим именем, введет свой E-mail и текст сообщения, а затем нажмет на кнопку отправки, будет вправе надеяться на отправку данных из формы на E-mail автора сайта. Но реализовать такое с помощью только одного языка гипертекстовой разметки (здесь читайте что такое Html, теги и валидатор W3C), к сожалению, не возможно.

Для этих целей потребуется специальная программа обработчик, которая после нажатия пользователем на кнопку отправки возьмет все данные из полей обратной связи и отправит их на E-mail владельцу ресурса. Какая именно программа будет это делать, вы должны указать сами с помощью атрибута Action.

Обычно программа обработки представляет из себя скрипт, написанный на языке PHP. Поэтому в атрибуте Action тэга Form вы должны будете прописать путь к файлу этого скрипта, лежащего на сервере вашего хостинга. Приведу в качестве примера подписку на RSS ленту моего блога посредством E-mail:

Немного непонятно, наверное, кажется по началу, но, думаю, что все прояснится по мере дальнейшего рассказа.

Теги Form и Input для создания кнопок, чекбоксов и радиокнопок

Любая форма должна быть заключена в открывающий и закрывающий тэги Form. Это своеобразный контейнер для их создания. У этого тега имеется ряд обязательных и необязательных атрибутов:

1. Name – уникальное имя, которое нужно указывать, если в Html файле, где вы что-то делаете, будет использоваться несколько вебформ
2. Action – обязательный атрибут указывающий путь к скрипту, которому будут переданы данные из нее для дальнейшей обработки
3. Method – с помощью него вы можете изменить метод передачи данных из этой вебформы скрипту файла обработчика. Если вы его не укажете, то по умолчанию будет использоваться метод Get, который, собственно говоря, предназначен в основном для переменных и коротких сообщений, и к тому же открытым способом передавая данные через адресную строку браузера. Для передачи данных форм скрипту обработчика все же лучше использовать метод POST, предназначенный специально для передачи текстовых сообщений закрытым способом

Рассмотрим остальные тэги, позволяющие создавать разнообразные вебформы. Самый универсальный – это Input. Внутри него обязательно прописывают атрибут Type, который определяет, что именно будет из себя представлять HTML форма, созданная с помощью этого тэга.

C помощью Input и Type можно создавать следующие элементы:

1. однострочные текстовые поля (Type=»Text»)
2. поля для ввода пароля (Type=»Password»)
3. чекбоксы (Type=»Checkbox»)
4. радиокнопки (Type=»Radio»)
5. скрытые поля (Type=»Hidden»)
6. обычные кнопки (Type=»Button»)
7. кнопки для отправки данных в обработчик (Type=»Submit»)
8. кнопки для приведения вебформы к исходному состоянию (Type=»Reset»)
9. поля для загрузки файлов на сервер (Type=»File)
10. кнопки с изображением (Type=»Image»)

Input не имеет закрывающего тега. Что именно будет представлять из себя вебформа, созданная с помощью него, целиком и полностью зависит от параметра указанного в атрибуте Type. Если Type не указан, то по умолчанию будет создано текстовое поле.

Примеры форм, созданных на Input с различными значениями для Type

TEXT	Обычное текстовое поле для ввода символов с клавиатуры
<input type="text" name="ktonanovenkogoru">
PASSWORD	Текстовое поле, в котором вводимые символы закрываются звездочками
<input type="password" name="ktonanovenkogoru">
BUTTON	Просто кнопка
<input type="button" value="Подписаться" name="ktonanovenkogoru">
SUBMIT	Создается кнопка, с помощью которой можно отправить данные в программу обработчика
<input type="submit" value="Подписаться" name="ktonanovenkogoru">
IMAGE	Поле с изображением, при нажатии на которое, данные будут отправлены в обработчик
<input type="image" border="0" src="003. png" name="ktonanovenkogoru">
RADIO	Радиопереключатели — следует использовать, если требуется выбрать только один вариант из предложенных	Joomla WordPress SMF
<input type="radio" value="j" name="ktonanovenkogoru"> Joomla <br> <input type="radio" value="w" name="ktonanovenkogoru" checked> WordPress<br> <input type="radio" value="s" name="ktonanovenkogoru"> SMF
CHECKBOX	CHECKBOX — чекбоксы (можно активировать несколько чекбоксов одновременно)	Joomla WordPress SMF
<input type="checkbox" value="yes" name="ktonanovenkogoru3"> Joomla <br> <input type="checkbox" value="yes" name="ktonanovenkogoru4" checked> WordPress <br> <input type="checkbox" value="yes" name="ktonanovenkogoru5"> SMF
FILE	Создается кнопка для загрузки файла на сервер
<input type="file" name="ktonanovenkogoru">
HIDDEN	Скрытое поле, которое не отображается, но в файл обработчика данные передаются.
<input type="hidden" name="ktonanovenkogoru">
RESET	Кнопка для возвращение данных в первоначальное значение (сброса).
<input type="reset" name="ktonanovenkogoruru">

Другие атрибуты тэга Input и примеры их использования

Рассмотрим, для чего нужны остальные атрибуты:

1. Name – в случае, если данные должны быть отправлены в скрипт программы обработчика, то вы должны обязательно указать параметр для атрибута Name. Под этим именем данные, отправленные из формы, будут фигурировать в программе обработчика информации.
2. Size — с помощью него задается размер поля создаваемой вебформы. Значение указывается в количестве символов, которое сможет поместиться в данном поле. Если Size не указан, то ширина будет принята по умолчанию равной 24 символам
3. Maxlength — по умолчанию количество символов, которое можно будет ввести в Html форму, не ограничено, но с помощью Maxlength можно задать это ограничение. Больше символов, чем в нем будет указано, вам ввести в поле не удастся
4. Value — с помощью него можно задать, что именно будет написано по умолчанию в поле или же на кнопке отправки данных
5. Checked — это атрибут-флаг, который можно вставить в Input для радиокнопок (radio) или же для чекбоксов (checkbox). В этом случае данная радиокнопка или чекбокс будут активными при загрузке страницы с вебформой (в них уже будет стоять галочка)

Теперь давайте рассмотрим все примеры формы с Input. Внешний вид текстового поля похож на вид поля для ввода пароля, поэтому рассмотрим только вариант создания Text, например, для ввода адреса электронной почты:

Теперь давайте рассмотрим создание вебформы с радиокнопками (Radio):

Обратите внимание, что в этой форме два раза используется тег Input – по разу для создания каждой из двух радиокнопок. Причем, в каждом из них прописан атрибут Name с одинаковым значением (rezultat), а значение Value разное (YES и NO).

Это означает, что при ее обработке, в случае выбора любого из переключателей, будет отправлена переменная, название которой прописано в Name, но значение этой переменной будет зависеть от того, какой именно переключатель был выбран.

Рассмотрим пример создание вебформы с чекбоксами (Checkbox):

Чекбоксы отличаются от радиокнопок возможностью выбрать сразу несколько вариантов. Name служит для определения в файле обработчика, в каком именно чекбоксе проставлены флажки,а Value — задает то значение, которое будет отослано в обработчик (если Value задан не будет, то в обработчик будет отправлен текст, расположенный рядом с данным чекбоксом).

Select, Option, Textarea, Label, Fieldset, Legend — выпадающие списки, текстовые области и другие элементы вебформ

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

Все пользователи без каких-либо дополнительный объяснений понимают назначение этих элементов и если они видят кнопку Html формы, то понимают, что на нее нужно нажать.

Причем, все составляющие ее элементы (вроде Select, Option, Textarea, Label, Fieldset, Legend) представляют собой уже законченные заготовки (контейнеры), для вставки которых достаточно будет лишь использовать нужный тег с нужными атрибутами и параметрами.

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

Т.о. получается, что вебформы в Html являются попыткой перенести ключевые элементы, используемые в любой операционной системе, на страницы вебсайта. Но для чего они могут понадобиться на страницах сайта?

В принципе, для того же, для чего аналогичные элементы используются в операционных системах — передача данных от пользователя. В случае форм данные от пользователя передаются на сервер, где обрабатываются специальной программой (язык гипертекстовой разметки, к сожалению, не позволяет вести обработку данных).

Хотя, данные можно отправить не только на сервер, но и, например, по электронной почте на адрес, заданный в атрибуте Action тэга Form. При отправке из Html данных на E-mail у пользователя, заполняющего поля, после нажатия им на кнопку отправки данных, запустится почтовая программа используемая на его компьютере по умолчанию.

Открывающий тег Form в таком случае должен выглядеть примерно так:

<form action="mailto:[email protected]" enctype="text/plain">

Select и Option — тэги выпадающих списков

Все элементы вебформы, которые создают поля с выпадающими списками, формируются одинаковым образом. Сначала задается контейнер поля со списком с помощью открывающего и закрывающего Html тега Select. А затем внутри этого контейнера создаются отдельные контейнеры с пунктами (элементами) этого списка. Это делается с помощью открывающих и закрывающих тэгов Option.

Получается примерно так:

Но это упрощенная конструкция, т.к. у Select и Option имеется ряд атрибутов, которые определяют свойства и внешний вид создаваемого поля с выпадающим списком.

1. Name — вы должны задать уникальное имя для данного элемента вебформы, создаваемого с помощью Select. Это имя будет передано на сервер в программу обработчик данных в качестве имени для переменной. В качестве значения этой переменной будет передано значение атрибута Value (задается в Option для каждого пункта) того пункта выпадающего списка, который выберет пользователь.
2. Size — с помощью него можно задать количество отображаемых пунктов. Иначе говоря, с помощь Size можно задать высоту списка, измеряемую в количестве отображаемых строк. Если вы не указываете в явном виде значение Size в теге Select, то будет использоваться значение высоты выпадающего списка по умолчанию, при этом она будет разной в случае отсутствия или присутствия в Select атрибута Multiple:
   1. Если Multiple в Select присутствует, то высота выпадающего списка в вебформе будет по умолчанию равна количеству его элементов. Т.е. будут показаны все элементы выпадающего списка с множественным выбором. См. пример множественного ниже. Если атрибут Size в Select задать меньше количества пунктов, то справа появится полоса прокрутки.
   2. Если Multiple в Select отсутствует, то высота выпадающего списка в вебформе будет по умолчанию равна одной строке. Т.е. видна будет только одна строка, а остальные пункты будут доступны только при нажатии на кнопку лифта (справа). См. пример приведенный ниже
3. Multiple — приписывание данного атрибута в теге Select позволит вам создать выпадающий список с возможность одновременного выбора нескольких пунктов. Подробнее об этом атрибуте читайте ниже.

Формы с выпадающими списками можно разделить на два варианта. В первом варианте вы сможете выбрать только один элемент (строку) поля с выпадающим списком, во втором варианте — удерживая Ctrl или Shift сможете выбрать одновременно несколько из имеющихся пунктов.

При этом во втором варианте будут отправлены на сервер данные о всех выбранных пунктах. Какой именно выпадающий список будет создан, определяется наличием или отсутствием в тэге Select атрибута Multiple.

Multiple указывается в Select без параметра, т.к. пишется просто Multiple и все. Если он присутствует, то будет создана вебформа выпадающего списка с возможностью множественного выбора (удерживая Ctrl или Shift).

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

LabelSelectSelectEDKtoNaNovenkogo.ruLegend

Справа приведен пример вебформы выпадающего списка со множественным выбором, который создан на основе кода, приведенного выше. Как вы видите, удерживая Ctrl или Shift можно выделить несколько пунктов одновременно.

Если в тэге Select атрибута Multiple не будет, то выбрать можно будет только один элемент этого выпадающего списка (строку).

Пример, в котором можно выбрать только один пункт, вы можете видеть здесь:

LabelSelectSelectEDKtoNaNovenkogo. ruLegend

Атрибуты тега Option

1. SelectED — он определяет, какой пункт выпадающего списка будет выделен. Т.е. будет отображаться с одним видимым пунктом. В случае же списка с множественным выбором (если в Select присутствует атрибут Multiple) можно будет с помощью указания SelectED в Html теге Option выделить сразу несколько пунктов.
2. Value — на сервер из вебформы поля выпадающего списка будет отправлена пара значений — имя для переменной и значение этой переменной. Так вот, имя для переменной берется из атрибута Name тэга Select, а значение этой переменной будет взято из Value тега Option, но только того пункта (или пунктов, в случае множественного выбором), который выбрал пользователь перед тем, как нажать кнопку отправки данных.

   SelectLabelSelectEDKtoNaNovenkogo.ruLegend

В создаваемый выпадающий список (с помощью Select и Option) можно добавить что-то вроде разделителей с заголовком групп, которые будут отличаться от остальных пунктов меню по начертанию шрифта.

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

Например так:

LabelSelectSelectEDKtoNaNovenkogo.ruLegend

Textarea — создание текстового поля в форме

Остался еще один элемент вебформ, который мы не рассмотрели — Textarea (поле с возможностью ввода многострочного текста). Создается оно с помощью парного Html тега Textarea. Причем, в нем можно переносить текст на новую строку и он будет передаваться на сервер с учетом сделанных переносов.

Итак, для создания многострочного текстового поля нужно прописать открывающий и закрывающий Textarea, а между ними вы можете добавить текст, который будет виден при загрузке страницы с вебформой. Пользователь потом сможет стереть этот текст и написать свой.

<form>
<textarea rows=»3″ cols=»15″ name=»textt»>Что вы можете сообщить о себе?</textarea>
</form>

Вместе с Textarea можно использовать следующие атрибуты:

1. Name — вы задаете имя для этого элемента вебформы. Оно будет передано на сервер в программу обработчика данных
2. Cols — вы можете задать с помощью него ширину создаваемого многострочного поля в символах.
3. Rows — задаем высоту создаваемого многострочного поля (в строках). Если строк у текста, вводимого пользователем, окажется больше, чем высота многострочного поля для текста, то справа от поля в вебформе появится полоса прокрутки.
4. Readonly — запрет пользователям на изменение или добавление своего текста в это поле (только для чтения).
5. Disabled — пользователь, так же как в случае с атрибутом Readonly, не сможет изменить содержимое текстового поля в вебформе, но оно изменит свой цвет на серый, обозначающий его неактивность.

Label — для чего нужен этот Html тэг в форме

Html тег Label позволяет реализовать одну очень интересную возможность в формах, которая имеется в операционных системах. Там, если вы помните, для того чтобы активировать какой-либо элемент, не обязательно щелкать именно по нему, можно щелкнуть и по названию этого элемента — все равно произойдет его активация.

В вебформах по умолчанию этого не происходит — нужно щелкать именно по самому элементу Html формы для его активации. Например, нужно щелкать по флажку, для того чтобы поставить в нем галочку. Щелчок же по тексту рядом с флажком результата не принесет. Попробуйте сами:

Как вы можете убедиться, по тексту щелкать для активации этого элемента бесполезно — нужно щелкать именно по нему самому. Вот именно такое положение вещей и призван исправить тэг Label. Он позволить сделать текст рядом с элементом веб формы кликабельным, что несомненно улучшит юзабилити.

Но как связать элемент Html формы и текст? Для этого нужно дописать в атрибут ID с уникальным параметром, а текст нужно окружить открывающим и закрывающим тэгами Label. И это еще не все. В открывающем теге Label нужно прописать атрибут For, параметр которого должен быть точно таким же, как и у атрибута ID в Html теге элемента формы. Получается примерно так:

Как вы можете видеть, теперь, благодаря использованию Label, элементы вебформы можно активировать не только щелчком по нему самому, но и щелчком по тексту, расположенному рядом.

Fieldset и Legend — разбиваем форму на части

Вы, наверное, часто видели, что большие формы в Html бывают разбиты на группы (Fieldset), которые обведены в рамочку и у каждой такой группы имеется свой заголовок (Legend). Реализуется это с помощью всего двух тэгов: Fieldset и Legend. Они парные, т.е. у них должны быть в обязательном порядке открывающий и закрывающий.

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

Вот пример создания групп с помощью Fieldset и Legend:

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Form Select | Components | BootstrapVue

Пользовательский Bootstrap элемент <select> с использованием пользовательских стилей. При необходимости укажите параметры на основе массива, массива объектов или объекта.

Сгенерируйте ваши опции выбора, передав массив или объект в свойства options:

<template>
  <div>
    <b-form-select v-model="selected" :options="options"></b-form-select>
    <b-form-select v-model="selected" :options="options" size="sm"></b-form-select>
    <div>Выбрано: <strong>{{ selected }}</strong></div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        selected: null,
        options: [
          { value: null, text: 'Пожалуйста, выберите опцию' },
          { value: 'a', text: 'Это первая опция' },
          { value: 'b', text: 'Выбранная опция' },
          { value: { C: '3PO' }, text: 'Эта опция со значением объекта' },
          { value: 'd', text: 'Эта одна отключена', disabled: true }
        ]
      }
    }
  }
</script>
<!-- b-form-select-options. vue -->

Вы даже можете определить группы опций с помощью свойства options:

<template>
  <div>
    <b-form-select v-model="selected" :options="options"></b-form-select>
    <div>Выбрано: <strong>{{ selected }}</strong></div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        selected: null,
        options: [
          { value: null, text: 'Пожалуйста, выберите опцию' },
          { value: 'a', text: 'Это первая опция' },
          { value: 'b', text: 'Выбранная опция', disabled: true },
          {
            label: 'Сгруппированные опции',
            options: [
              { value: { C: '3PO' }, text: 'Опция со значением объекта' },
              { value: { R: '2D2' }, text: 'Другая опция со значением объекта' }
            ]
          }
        ]
      }
    }
  }
</script>
<!-- b-form-select-options.vue -->

Или укажите свои параметры и группы параметров вручную:

<template>
  <div>
    <b-form-select v-model="selected">
      <b-form-select-option :value="null">Пожалуйста, выберите опцию</b-form-select-option>
      <b-form-select-option value="a">Опция A</b-form-select-option>
      <b-form-select-option value="b" disabled>Опция B (отключена)</b-form-select-option>
      <b-form-select-option-group label="Сгруппированные опции">
        <b-form-select-option :value="{ C: '3PO' }">Опция со значением объекта</b-form-select-option>
        <b-form-select-option :value="{ R: '2D2' }">Другая опция со значением объекта</b-form-select-option>
      </b-form-select-option-group>
    </b-form-select>
    <div>Выбрано: <strong>{{ selected }}</strong></div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        selected: null
      }
    }
  }
</script>
<!-- b-form-select-manual. vue -->

Не стесняйтесь смешивать опцию options с <b-form-select-option> и <b-form-select-option-group>. Параметры и группы параметров, размещенные вручную, появятся под параметрами, созданными с помощью свойства options. Чтобы разместить ручные опции и группы опций выше опций, заданных опцией options, используйте именованный слот first.

<template>
  <div>
    <b-form-select v-model="selected" :options="options">
      <!-- Этот слот появляется над опциями из свойства 'options' -->
      <template #first>
        <b-form-select-option :value="null" disabled>-- Пожалуйста, выберите опцию --</b-form-select-option>
      </template>
      <!-- Эти параметры появятся после параметров из свойства 'options' -->
      <b-form-select-option value="C">Опция C</b-form-select-option>
      <b-form-select-option value="D">Опция D</b-form-select-option>
    </b-form-select>
    <div>Выбрано: <strong>{{ selected }}</strong></div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        selected: null,
        options: [
          { value: 'A', text: 'Опция A (из свойства опций)' },
          { value: 'B', text: 'Опция B (из свойства опций)' }
        ]
      }
    }
  }
</script>
<!-- b-form-select-both. vue -->

Свойство Options

options может быть массивом строк или объектов или объектом значения ключа. Доступные поля:

• value Выбранное значение, которое будет установлено на v-model
• disabled Отключает элемент для выбора
• text Отображать текст или html Отображать базовый инлайновый html

value может быть строкой, числом или простым объектом. Избегайте использования сложных типов в значениях.

Если указаны и html, и text, приоритет будет иметь html. В поле html поддерживается только базовый / собственный HTML (компоненты работать не будут). Обратите внимание, что не все браузеры будут отображать встроенный html (т. е. <i>, <strong> и т. д.). Внутри элементов <option> элемента <select>.

Будьте осторожны при размещении пользовательского контента в поле html, поскольку это может сделать вас уязвимыми для XSS-атаки, если вы сначала не очистите строку, введенную пользователем.

Опции как массив

const options = ['A', 'B', 'C', { text: 'D', value: { d: 1 }, disabled: true }, 'E', 'F']

Если запись массива является строкой, она будет использоваться как для сгенерированных полей value и text.

Вы можете смешивать, используя строки и объекты в массиве.

Внутри BootstrapVue преобразует указанный выше массив в следующий формат (формат массив объектов):

const options = [
  { text: 'A', value: 'A', disabled: false },
  { text: 'B', value: 'B', disabled: false },
  { text: 'C', value: 'C', disabled: false },
  { text: 'D', value: { d: 1 }, disabled: true },
  { text: 'E', value: 'E', disabled: false },
  { text: 'F', value: 'F', disabled: false }
]

Параметры как массив объектов

const options = [
  { text: 'Элемент 1', value: 'first' },
  { text: 'Элемент 2', value: 'second' },
  { html: '<b>Элемент</b> 3', value: 'third', disabled: true },
  { text: 'Элемент 4' },
  { text: 'Элемент 5', value: { foo: 'bar', baz: true } }
]

Если value отсутствует, то text будет использоваться как поля value и text. Если вы используете свойство html, вы должны предоставить свойство value.

Новое в версии 2.2.0 Чтобы определить группы опций, просто добавьте объект со свойством label в качестве имени группы и свойством options с массивом опций группы.

const options = [
  { text: 'Элемент 1', value: 'first' },
  { text: 'Элемент 2', value: 'second' },
  {
    label: 'Сгруппированные опции',
    options: [{ html: '<b>Элемент</b> 3', value: 'third', disabled: true }, { text: 'Элемент 4' }]
  },
  { text: 'Элемент 5', value: { foo: 'bar', baz: true } }
]

Опции как объект

Устарело

Ключи отображаются в value, а значения отображаются в параметр text.

const options = {
  a: 'Элемент A',
  b: 'Элемент B',
  c: { html: 'Элемент C', disabled: true },
  d: { text: 'Элемент D', value: 'overridden_value' },
  e: { text: 'Элемент E', value: { foo: 'bar', baz: true } }
}

Внутри BootstrapVue преобразует указанный выше объект в следующий формат (формат массив объектов):

const options = [
  { text: 'Элемент A', value: 'a', disabled: false },
  { text: 'Элемент B', value: 'b', disabled: false },
  { html: 'Элемент C', value: 'c', disabled: false },
  { text: 'Элемент D', value: 'overridden_value', disabled: true },
  { text: 'Элемент E', value: { foo: 'bar', baz: true }, disabled: false }
]

Примечание: При использовании формата объекта порядок окончательного массива не гарантирован. По этой причине рекомендуется использовать любой из ранее упомянутых форматов массивов.

Изменение названий полей опций

Если вы хотите настроить имена свойств поля (например, используя поле name для отображения text), вы можете легко изменить их, установив text-field, html-field, value-field и disabled-field прописывает строку, содержащую имя свойства, которое вы хотите использовать:

<template>
  <div>
    <b-form-select
      v-model="selected"
      :options="options"
     
      value-field="item"
      text-field="name"
      disabled-field="notEnabled"
    ></b-form-select>
    <div>Выбрано: <strong>{{ selected }}</strong></div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        selected: 'A',
        options: [
          { item: 'A', name: 'Опция A' },
          { item: 'B', name: 'Опция B' },
          { item: 'D', name: 'Опция C', notEnabled: true },
          { item: { d: 1 }, name: 'Опция D' }
        ]
      }
    }
  }
</script>
<!-- b-form-select-options-fields. vue -->

Примечания опции

Если начальное значение вашего выражения v-model не соответствует ни одному из параметров, компонент <b-form-select> (который является встроенным в HTML5 <select>) будет отображаться в не выбранное состояние. В iOS это приведет к тому, что пользователь не сможет выбрать первый элемент, потому что iOS в этом случае не запускает событие изменения. Поэтому рекомендуется в качестве первого варианта указать отключенный параметр с пустым значением.

<b-form-select v-model="selected" :options="options">
  <template #first>
    <b-form-select-option value="" disabled>-- Пожалуйста, выберите опцию --</b-form-select-option>
  </template>
</b-form-select>

Дополнительную информацию смотрите в документации Vue select.

Стандартный (одиночный) выбор

По умолчанию применяется настраиваемый стиль выбора Bootstrap v4.

Значение в одиночном режиме

В режиме, отличном от multiple, <b-form-select> возвращает единственное value текущей выбранной опции.

<template>
  <div>
    <b-form-select v-model="selected" :options="options"></b-form-select>
    <div>Выбрано: <strong>{{ selected }}</strong></div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        selected: null,
        options: [
          { value: null, text: 'Пожалуйста, выберите какой-нибудь элемент' },
          { value: 'a', text: 'Это первая опция' },
          { value: 'b', text: 'Выбранная опция по умолчанию' },
          { value: 'c', text: 'Это другая опция' },
          { value: 'd', text: 'Эта одна отключена', disabled: true }
        ]
      }
    }
  }
</script>
<!-- b-form-select-single.vue -->

Размеры селекта (отображаемые строки)

Вы можете использовать свойство select-size, чтобы переключить пользовательский выбор в список выбора, а не в раскрывающийся список. Установите для свойства select-size числовое значение больше 1, чтобы контролировать количество видимых строк параметров.

Обратите внимание, когда для параметра select-size установлено значение больше 1, пользовательский стиль Bootstrap v4 не будет применяться, если также не установлено свойство multiple.

Обратите внимание, что не все мобильные браузеры отображают выбор в виде списка.

<template>
  <div>
    <b-form-select v-model="selected" :options="options" :select-size="4"></b-form-select>
    <div>Выбрано: <strong>{{ selected }}</strong></div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        selected: null,
        options: [
          { value: null, text: 'Пожалуйста, выберите какой-нибудь элемент' },
          { value: 'a', text: 'Это Опция a' },
          { value: 'b', text: 'Выбранная опция b по умолчанию' },
          { value: 'c', text: 'Это Опция c' },
          { value: 'd', text: 'Эта одна отключена', disabled: true },
          { value: 'e', text: 'Это Опция e' },
          { value: 'e', text: 'Это Опция f' }
        ]
      }
    }
  }
</script>
<!-- b-form-select-size. vue -->

Поддержка множественного выбора

Включите режим множественного выбора, установив свойство multiple, и управляйте количеством строк, отображаемых в списке множественного выбора, установив select-size равным количеству отображаемых строк. По умолчанию браузер использует значение по умолчанию (обычно 4).

Значение в режиме множественного выбора

В режиме multiple, <b-form-select> всегда возвращает массив значений параметров. Вы должны предоставить ссылку на массив в качестве v-model в режиме multiple.

<template>
  <div>
    <b-form-select v-model="selected" :options="options" multiple :select-size="4"></b-form-select>
    <div>Выбрано: <strong>{{ selected }}</strong></div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        selected: ['b'], // Array reference
        options: [
          { value: 'a', text: 'Это первая опция' },
          { value: 'b', text: 'Выбранная опция по умочланию' },
          { value: 'c', text: 'Это другая опция' },
          { value: 'd', text: 'Эта одна отключена', disabled: true },
          { value: 'e', text: 'Это опция e' },
          { value: 'f', text: 'Это опция f' },
          { value: 'g', text: 'Это опция g' }
        ]
      }
    }
  }
</script>
<!-- b-form-select-multiple-mode. vue -->

Размер контролов

Установите размер текста элемента управления формой, используя свойство size равное sm или lg для малых или больших соответственно.

По умолчанию <b-form-select> будет занимать всю ширину контейнера, в котором он появляется. Чтобы контролировать ширину выбора, поместите ввод внутри стандартного столбца сетки Bootstrap.

Автофокус

Когда свойство autofocus установлено на <b-form-select>, выделение будет автоматически сфокусировано, когда оно вставлено (т.е. mounted) в документ или повторно активировано, когда оно находится внутри компонента Vue <keep-alive>. Обратите внимание, что эта опция не устанавливает атрибут autofocus для выбора и не может сказать, когда выбор становится видимым.

Контекстные состояния

Bootstrap включает стили проверки valid и invalid состояний для большинства элементов управления формой.

Вообще говоря, вы захотите использовать определенное состояние для определенных типов обратной связи:

• false (обозначает недопустимое состояние) отлично подходит, когда есть блокирующее или обязательное поле. Пользователь должен правильно заполнить это поле, чтобы отправить форму.
• true (обозначает допустимое состояние) идеально подходит для ситуаций, когда у вас есть проверка по каждому полю во всей форме и вы хотите побудить пользователя пройти через остальные поля.
• null Не отображает состояние проверки (ни действительное, ни недействительное)

Чтобы применить один из значков контекстного состояния к <b-form-select>, установите для свойства state значение false (для недопустимого), true (для действительного) или null (состояние проверки отсутствует).

Передача состояния контекстной проверки вспомогательным технологиям и пользователям с дальтонизмом

Использование этих контекстных состояний для обозначения состояния элемента управления формы обеспечивает только визуальную цветовую индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана, или пользователям с дальтонизмом.

Убедитесь, что также имеется альтернативная индикация состояния. Например, вы можете включить подсказку о состоянии в самом тексте элемента управления формы <label> или предоставив дополнительный блок текста справки (через <b-form-group> или <b-form-*-feedback>). В частности, для вспомогательных технологий недопустимым элементам управления формой также может быть назначен атрибут aria-invalid="true" (смотрите ниже).

Атрибут ARIA

Когда <b-form-select> имеет недопустимое контекстное состояние (например, state = false), вы также можете установить для <b-form-select> свойства aria-invalid значение true.

Поддерживаемые invalid значения:

• false (по умолчанию) Ошибок не обнаружено
• true Значение не прошло проверку

Когда для параметра state установлено значение false, для параметра aria-invalid также будет установлено значение true.

Не кастомный селект

Задайте для свойства plain свойство рендеринга <select> в собственном браузере (хотя класс .form-control всегда будет помещен в выделение).

plain выбор всегда будет отображаться для не multiple селектов, для которых свойство select-size установлено на значение больше 1.

Справочник по компонентам

Смотреть источник

• <b-form-select> Псевдонимы компонентов
• <b-form-select> Свойства
• <b-form-select> v-model
• <b-form-select> Слоты
• <b-form-select> События

Псевдонимы компонентов

<b-form-select> также может использоваться через следующие псевдонимы:

• <b-select>

Примечание: Псевдонимы компонентов доступны только при импорте всего BootstrapVue или при использовании подключаемого модуля группы компонентов.

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство (Click to sort ascending)	Тип (Click to sort ascending)	По умолчанию	Описание
aria-invalid	Boolean или String	false	Необязательное значение для атрибута ‘aria-invalid’. Поддерживаемые значения: ‘true’ и ‘false’. Если не установлен, свойство ‘state’ будет определять значение
autofocus	Boolean	false	Если установлено значение `true`, пытается автоматически сфокусировать элемент управления, когда он установлен, или повторно активировать, когда находится в состоянии активности. Не устанавливает атрибут `autofocus` на элементе управления
disabled	Boolean	false	Если установлено значение `true`, отключает функциональность компонента и переводит его в отключенное состояние.
disabled-field	String	'disabled'	Имя поля в массиве `options`, которое следует использовать для отключенного состояния
form	String		Идентификатор формы, к которой принадлежит элемент управления формой. Устанавливает атрибут `form` в элементе управления
html-field Использовать с осторожностью	String	'html'	Имя поля в массиве `options`, которое следует использовать для html-метки вместо текстового поля
id	String		Используется для установки атрибута `id` для визуализированного контента и используется в качестве основы для генерации любых дополнительных идентификаторов элементов по мере необходимости.
label-field	String	'label'	Ключ, который нужно использовать из объекта option для получения метки
multiple	Boolean	false	Когда установлено, позволяет выбрать несколько опций (множественный выбор)
name	String		Устанавливает значение атрибута `name` в элементе управления формы
options	Array или Object	[]	Массив элементов для визуализации в компоненте
options-field	String	'options'	Ключ, который нужно использовать из объекта option для получения опций
plain	Boolean	false	Визуализируйте элемент управления формы в обычном режиме, а не в режиме пользовательского стиля
required	Boolean	false	Добавляет атрибут `required` в элемент управления формы
select-size	Number	0	Если установлено значение больше 0, будет установлено количество строк параметров отображения. Обратите внимание, что не все браузеры будут учитывать этот параметр
size	String		Установите размер внешнего вида компонента. ‘sm’, ‘md’ (по умолчанию) или ‘lg’
state	Boolean	null	Управляет внешним видом состояния проверки компонента. `true` для действительного, `false` для недопустимого или `null` для отсутствия проверки состояния
text-field	String	'text'	Имя поля в массиве `options`, которое следует использовать для текстовой метки
value v-model	Any		Текущее значение выбора. Должен быть установлен в массив, если задано свойство ‘multiple’
value-field	String	'value'	Имя поля в массиве `options`, которое следует использовать для значения

Осторожно: Свойства, поддерживающие HTML-строки (*-html) может быть уязвим для Атаки межсайтового скриптинга (XSS) при передаче необработанных значений, предоставленных пользователем. Вы должны правильно очищать ввод пользователя!

Слоты

События

v2. 2.0+ Функциональный компонент

Смотреть источник

• <b-form-select-option> Псевдонимы компонентов
• <b-form-select-option> Свойства
• <b-form-select-option> Слоты

Псевдонимы компонентов

<b-form-select-option> также может использоваться через следующие псевдонимы:

• <b-select-option>

Примечание: Псевдонимы компонентов доступны только при импорте всего BootstrapVue или при использовании подключаемого модуля группы компонентов.

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство	Тип	По умолчанию	Описание
disabled	Boolean	false	Если установлено значение `true`, отключает функциональность компонента и переводит его в отключенное состояние.
value Обязательный	Any		Значение опции

Слоты

v2. 2.0+

Смотреть источник

• <b-form-select-option-group> Псевдонимы компонентов
• <b-form-select-option-group> Свойства
• <b-form-select-option-group> Слоты

Псевдонимы компонентов

<b-form-select-option-group> также может использоваться через следующие псевдонимы:

• <b-select-option-group>

Примечание: Псевдонимы компонентов доступны только при импорте всего BootstrapVue или при использовании подключаемого модуля группы компонентов.

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Осторожно: Свойства, поддерживающие HTML-строки (*-html) может быть уязвим для Атаки межсайтового скриптинга (XSS) при передаче необработанных значений, предоставленных пользователем. Вы должны правильно очищать ввод пользователя!

Слоты

Импорт отдельных компонентов

Вы можете импортировать отдельные компоненты в свой проект с помощью следующих именованных экспортов:

Пример:

import { BFormSelect } from 'bootstrap-vue'
Vue. component('b-form-select', BFormSelect)

Импортировать как плагин Vue.js

Этот плагин включает в себя все перечисленные выше отдельные компоненты. Плагины также включают псевдонимы любых компонентов.

Пример:

import { FormSelectPlugin } from 'bootstrap-vue'
Vue.use(FormSelectPlugin)

HTML тег

onplay	Скрипт викликається коли медіа дані готові почати відтворення.
onafterprint	Скрипт виконується тільки після як документ надрукований.
onbeforeprint	Скрипт виконується перед тим, як документ надрукований.
onbeforeunload	Скрипт виконується коли документ ось-ось буде вивантажений
onhashchange	Скрипт виконується коли там відбулися зміни до частини якоря в URL
onload	Викликається після того як завантаження елемента завершене.
onmessage	Скрипт виконується коли викликане повідомлення.
onoffline	Спрацьовує коли браузер починає працювати в автономному режимі
ononline	Спрацьовує коли браузер починає працювати в режимі онлай.
onpagehide	Скрипт виконується коли користувач переходить на іншу сторінку сторінку.
onpageshow	Скрипт виконується коли користувач заходить на сторінку.
onpopstate	Скрипт виконується коли змінено історію одного вікна.
onresize	Скрипт виконується, коли розмір вікна браузера змінюється.
onstorage	Скрипт виконується, коли вміст Web Storage оновлюється.
onunload	Викликається, коли сторінка розвантажена, або вікно браузера було зачинено.
onblur	Скрипт виконується, коли елемент втрачає фокус.
onchange	Викликається в той момент, коли значення елемента змінюється.
oncontextmenu	Скрипт виконується коли викликається контекстне меню.
onfocus	Викликається в той момент, коли елемент отримує фокус.
oninput	Скрипт викликається коли користувач вводить дані поле.
oninvalid	Скрипт виконується, коли елемент недійсний.
onreset	Викликається, коли натискається у формі кнопка типу Reset.
onsearch	Викликається, коли користувач щось пише в поле пошуку (для <input type="search">)
onselect	Викликаєтсья після того як будь-який текст був обраний в елементі.
onsubmit	Викликається при відправленні форми.
onkeydown	Подія викликається, коли користувач затис (натиснув та не відпускає) клавішу.
onkeypress	Викликається коли корисрувач натиснув на клавішу.
onkeyup	Викликається коли користувач відпускає клавішу.
ondblclick	Виникає при подвійному клацанні ЛКМ на елементі.
ondrag	Періодично викликається при операції перетягування.
ondragend	Викликається коли користувач відпускає перелягуваний елемент.
ondragenter	Викликається, коли перетягуваний елемент входить в цільову зону.
ondragleave	Викликається, коли перетягуваний елемент виходть з зони призначення.
ondragover	Викликається, коли перетягуваний елемент знаходиться в зоні призначення.
ondragstart	Викликається, коли користувач починає перетягувати елемент, або виділений текст.
ondrop	Викликається, коли перетягуваний елемент падає до зони призначення.
onmousedown	Викликається, коли користувач затискає ЛКМ на елементі.
onmousemove	Викликається, коли курсор миші переміщається над елементом.
onmouseout	Викликається, коли курсор виходить за межі елемента.
onmouseover	Виконується, коли курсор наводиться на елемент.
onmouseup	Викликається, коли користувач відпускає кнопку миші.
onscroll	Викликається при прокручуванні вмісту елемента (чи веб-сторінки).
onwheel	Викликається, коли користувач прокручує коліщатко миші.
oncopy	Викликається, коли користувач копіює вміст елемента.
oncut	Викликається, коли користувач вирізає вміст елемента.
onpaste	Викликається, коли користувач вставляє вміст в елемент.
onabort	Виконується при перериванні якоїсь події.
oncanplay	Скрипт виконується коли файл готовий, для початку відтворення (коли він буферизований достатньо, щоб почати відтворення)
oncanplaythrough	Скрипт виконується, коли контент вже може бути відтворений без переривання на буферизацію.
oncuechange	Скрипт виконується коли змінюється кий в <track> елемента
ondurationchange	Викликається коли змінюється довжина медіа файлу.
onemptied	Викликається коли доступ до медіа контенту обривається (зникло з’єднання з мережею).
onended	Викликається коли медіа елемент повністю відтворив свій зміст.
onshow	Викликається, коли елемент <menu> буде відображено як контекстне меню.
onloadedmetadata	Скрипт виконується коли метадані (розміри чи тривалість) завантажуються.
onloadeddata	Викликається коли медіа данні завантажено.
onloadstart	Викликається коли браузер тільки починає завантажувати медіа дані з сервера.
onpause	Викликається коли відтворення медіа даних призупинено.
onplaying	Викликається коли розпочато відтворення медіа даних.
onprogress	Подія onprogress відбувається, коли браузер завантажує вказане аудіо / відео.
onratechange	Викликається коли змінюється швидкість відтворення медіа даних.
onseeked	Викликається коли атрибут seeked у тега audio або video змінює значення з true на false.
onseeking	Викликається коли атрибут seeking у тегів audio або video змінює значення з false на true
onstalled	Скрипт виконується коли браузер з будь-якої причини не може отримати медіа дані.
onsuspend	Скрипт виконується коли з будь-якої причини завантаження данних призупинено до його повного завантаження.
ontimeupdate	Викликається коли змінилася позиція відтворення елемента <audio> або <video>.
onvolumechange	Викликається коли змінюється гучність звуку.
onwaiting	Викликається коли наступний кадр при відтворенні медіа даних недоступний, але браузер очікує що він незабаром завантажиться.
ontoggle	Викликається, коли користувач відкриває або закриває елемент <details>.
onerror	Викликається якщо при завантаженні елемента сталася помилка.
onclick	Подія викликається коли користувач клацає ЛКМ по елементу.

: элемент выбора HTML — The HTML-элемент представляет собой элемент управления, предоставляющий меню параметров.

HTML — элемент <select> представляет собой элемент управления, предоставляющий меню опций.

Try it

В приведенном выше примере показано типичное использование <select> . Ему дается атрибут id , позволяющий связать его с <label> для целей доступности, а также атрибут name для представления имени связанной точки данных, отправленной на сервер. Каждая опция меню определяется элементом <option> , вложенным внутри <select> .

Каждый элемент <option> должен иметь атрибут value , содержащий значение данных для отправки на сервер при выборе этого параметра. Если атрибут value не включен, по умолчанию используется текст, содержащийся внутри элемента. Вы можете включить selected атрибут в элемент <option> , чтобы сделать его выбранным по умолчанию при первой загрузке страницы.

Элемент <select> имеет некоторые уникальные атрибуты, которые вы можете использовать для управления им, например, multiple чтобы указать, можно ли выбрать несколько параметров, и size чтобы указать, сколько параметров должно отображаться одновременно. Он также принимает большинство атрибутов ввода общей формы, таких как required , disabled , autofocus и т. Д.

Вы можете дополнительно <optgroup> элементы <option> в элементы <optgroup>, чтобы создать отдельные группы параметров внутри раскрывающегося списка.

Дополнительные примеры см. В разделе Виджеты собственных форм: раскрывающееся содержимое .

Attributes

Этот элемент включает глобальные атрибуты .

autocomplete

DOMString обеспечивает подсказку для агента пользователя функции автозаполнения. См . Атрибут автозаполнения HTML для получения полного списка значений и подробностей о том, как использовать автозаполнение.

autofocus

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

disabled

Этот логический атрибут указывает, что пользователь не может взаимодействовать с элементом управления. Если этот атрибут не указан, элемент управления наследует свои настройки от содержащего элемента, например <fieldset> ; если нет содержащего элемента с установленным атрибутом disabled , то элемент управления включен.

form

Элемент <form> ,с которым нужно связать <select> (его владельца формы ). Значение этого атрибута должно быть id из <form> в том же документе. (Если этот атрибут не установлен, <select> связан со своим предком <form> элементом, если таковой имеется. )

Этот атрибут позволяет вам связывать элементы <select> с <form> в любом месте документа, а не только внутри <form> . Он также может переопределить элемент- предок <form> .

multiple

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

name

Данный атрибут используется для указания имени элемента управления.

required

Булевый атрибут,указывающий на то,что необходимо выбрать опцию со значением непустой строки.

size

Если элемент управления представлен в виде окна списка с прокруткой (например, если указано multiple ), этот атрибут представляет количество строк в списке, которые должны быть видимы одновременно. Браузеры не обязаны представлять элемент выбора в виде прокручиваемого списка. Значение по умолчанию — 0 .

Примечание. Согласно спецификации HTML5, значение по умолчанию для размера должно быть 1 ; однако на практике было обнаружено, что это нарушает работу некоторых веб-сайтов, и ни один другой браузер в настоящее время этого не делает, поэтому Mozilla решила продолжать возвращать 0 на данный момент с Firefox.

Usage notes

Выбор нескольких вариантов

На настольном компьютере есть несколько способов выбрать несколько параметров в элементе <select> с multiple атрибутами:

Пользователи мыши могут удерживатьCtrl,Command, orShift(в зависимости от того,что имеет смысл для вашей операционной системы),а затем щелкните несколько вариантов,чтобы выбрать/отменить их.

Предупреждение . Механизм выбора нескольких несмежных элементов с помощью клавиатуры, описанный ниже, в настоящее время работает только в Firefox.

В macOSCtrl+UpandCtrl+DownЯрлыки конфликтуют с ярлыками ОС по умолчанию для окон Mission Control и Application , поэтому вам придется отключить их, прежде чем они будут работать.

Пользователи клавиатуры могут выбрать несколько смежных элементов с помощью:

• Сосредоточение внимания на элементе <select> (например, использованиеTab).
• Выбор элемента в верхней или нижней части диапазона,который они хотят выбрать,с помощью кнопкиUpandDownкурсорные клавиши для перехода вверх и вниз по опциям.
• Удерживая нажатой кнопкуShiftи затем с помощью клавишиUpandDownклавиши курсора для увеличения или уменьшения диапазона выбранных элементов.

Пользователи клавиатуры могут выбрать несколько несмежных элементов с помощью:

• Сосредоточение внимания на элементе <select> (например, использованиеTab).
• Удерживая нажатой кнопкуCtrlзатем с помощью кнопкиUpandDownклавиши курсора,чтобы изменить «сфокусированный» вариант выбора,т.е.тот,который будет выбран,если вы решите это сделать.»Сфокусированный» вариант выбора выделяется пунктирным контуром,так же как и ссылка,сфокусированная с помощью клавиатуры.
• PressingSpaceдля выбора/отмены опций «сфокусированного» выбора.

Стиль с CSS

Общеизвестно , что элемент <select> сложно продуктивно стилизовать с помощью CSS. Вы можете воздействовать на определенные аспекты, как и на любой элемент — например, манипулируя блочной моделью , отображаемым шрифтом и т. д ., и вы можете использовать свойство appearance , чтобы удалить appearance системы по умолчанию .

Однако эти свойства не дают единообразного результата в разных браузерах, и сложно делать такие вещи, как выравнивание элементов формы разных типов друг с другом в столбце. <select> Внутренняя структура элемента является сложной и трудно контролировать. Если вы хотите получить полный контроль, вам следует рассмотреть возможность использования библиотеки с хорошими возможностями для стилизации виджетов форм или попробовать развернуть собственное раскрывающееся меню с использованием несемантических элементов, JavaScript и WAI-ARIA для обеспечения семантики.

Дополнительные полезные сведения о стилизации <select> см.

• Стилизация HTML форм
• Расширенный стиль для форм HTML

Также см. Пример «Настройка выбранных стилей» ниже, где вы можете попробовать простой стиль <select> .

Тег выбора HTML | Синтаксис тега, примеры, атрибуты

❮ Пред. Следующий ❯

Тег HTML используется для создания выпадающего списка параметров, который появляется, когда пользователь щелкает элемент формы, и позволяет выбрать один из вариантов.

Тег

используется для определения возможных вариантов выбора. Тег помещается в тег .

По умолчанию выбрана первая опция из списка опций. Чтобы изменить предопределенный параметр, используется выбранный атрибут.

Тег используется для группировки нескольких параметров в одну группу. Содержимое выглядит как заголовок, выделенный жирным шрифтом.

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

Тег трудно эффективно стилизовать с помощью CSS. Вы можете воздействовать на определенные части элемента. Например, можно управлять отображаемым шрифтом, блочной моделью и т. д., а также можно использовать свойство внешнего вида для удаления внешнего вида системы по умолчанию. Но эти свойства не дают стабильного результата в разных браузерах. Внутренняя структура тега сложна, и ее трудно контролировать. Для получения полного контроля вам может понадобиться библиотека с улучшенными виджетами форм или выпадающее меню, использующее несемантические элементы.

Если вам нужно отправить данные на сервер или обратиться к списку со скриптами, тег должен быть помещен внутри тега

.

Тег

идет парами. Содержимое записывается между открывающим () и закрывающим () тегами.

Пример тега HTML

 

  <голова>
    
  
  <тело>
    <форма>
      <выбрать>
        Книги
        HTML
        CSS
        PHP
        JavaScript
      
    
  
 

 

  <голова>
    
  
  <тело>
    
      
        HTML
        CSS
      
      
        Git
        Java
      
    
  
 
 Попробуй сам »
 В этом примере тег используется для объединения параметров в группы.
 Результат 
 HTMLCSSGitJava
 Пример тега HTML 
  с тегом:
 

  <голова>
    
  
  <тело>
    
Аэропорт отправления:
    <форма action="action_form.php" метод="получить">
      
      <список данных>
        
        
        
        
      
      <тип ввода="отправить" значение="подтвердить">
    
  
 
 Попробуй сам »
 В этом примере используется тег, так как нам нужно отправить информацию на сервер.
 Результат 
 Аэропорт отправления:
 Тег  поддерживает глобальные атрибуты и атрибуты событий.
 Как оформить тег ?
 Общие свойства для изменения визуального веса/выделения/размера текста в теге 
:
 Свойство CSS font-style устанавливает стиль шрифта. нормальный | курсив | наклонный | начальная | наследовать.
 Свойство CSS font-family задает приоритетный список из одного или нескольких имен семейств шрифтов и/или общих имен семейств для выбранного элемента.
 Свойство CSS font-size устанавливает размер шрифта.
 Свойство CSS font-weight определяет, должен ли шрифт быть полужирным или толстым.
 Свойство CSS text-transform управляет регистром и регистром текста.
 Свойство CSS text-decoration определяет украшение, добавляемое к тексту, и является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.
 Окрашивание текста в теге :
 Свойство CSS color описывает цвет текстового содержимого и оформления текста.
 Свойство CSS background-color устанавливает цвет фона элемента.
 Стили макета текста для тега 
:
 Свойство CSS text-indent определяет отступ первой строки в текстовом блоке.
 Свойство CSS text-overflow указывает, как пользователь должен сигнализировать о переполненном содержимом, которое не отображается.
 Свойство CSS white-space указывает, как обрабатывается пробел внутри элемента.
 Свойство CSS word-break указывает, где строки должны быть разорваны.
 Другие свойства тега , на которые стоит обратить внимание:
 Свойство text-shadow CSS добавляет тень к тексту.
 Свойство CSS text-align-last устанавливает выравнивание последней строки текста.
 Свойство CSS line-height определяет высоту строки.
 Свойство CSS letter-spacing определяет интервалы между буквами/символами в тексте.
 Свойство CSS word-spacing устанавливает расстояние между словами.
 Что такое элемент выбора HTML? [+ Как его сделать] 
 Если у вас бизнес-сайт, вы, вероятно, захотите собирать ответы посетителей через формы. Формы — отличный способ собрать отзывы, информацию о заказе, личную информацию или любые другие данные, которые могут предоставить ваши посетители.
 Формы настолько полезны, что в HTML даже есть набор специальных элементов для сбора ответов на интерфейсе. Итак, если вы создаете сайт с нуля или разрабатываете пользовательскую страницу обратной связи, вы можете создавать формы в точном соответствии со своими требованиями.
 Одним из элементов формы, с которым вы будете часто сталкиваться, является HTML-элемент «select», который добавляет на страницу раскрывающееся поле формы. Есть большая вероятность, что вы недавно столкнулись с элементом выбора на веб-сайте — они интуитивно понятны, доступны и являются основным элементом дизайна формы. В этом посте мы покажем вам, как сделать его в HTML.
 Что такое элемент выбора HTML? 
 В HTML элемент select — это элемент формы, который создает раскрывающийся список параметров, из которых пользователь может выбрать один (или несколько, если разрешено). Элемент select обычно реализуется внутри HTML-форм для сбора пользовательских материалов и лучше всего подходит для выбора одного варианта из многих при сохранении места на странице.
 HTML-элемент select состоит из открывающего и закрывающего тега   . В этот тег вложен как минимум один  Тег , представляющий параметр в раскрывающемся списке. Вот как элемент select выглядит в HTML:
 См. пример Pen HTML Select от Christina Perricone (@hubspot) на CodePen.
 Как видите, этот код создает простое выпадающее HTML-меню. По умолчанию первый параметр в меню отображается выбранным, и при нажатии на элемент отображаются все параметры. Давайте рассмотрим каждую часть этого примера кода более подробно.
 Во-первых, у нас есть  <метка>  элемент, содержащий текст для представления элемента select. Хотя тег    технически не обязателен (для этой цели вы с таким же успехом можете использовать тег 
  или тег заголовка), он рекомендуется для обеспечения хорошей доступности. Элемент    сообщает вспомогательным технологиям, что текст внутри должен быть связан с раскрывающимся списком.    содержит один атрибут,  для  , значение которого должно быть  id  связанного элемента   .
 Далее идет сам элемент   , открывающий тег которого содержит два атрибута. Во-первых, атрибут  name  называет элемент раскрывающегося списка, который необходим для сбора материалов. Когда ответ формы пользователя отправляется на сервер сбора, значение  имя  будет сопряжено с ответом, выбранным пользователем. Во-вторых, атрибут id внутри    объединяет элемент select с предыдущим элементом label.
 У нас есть три тега  , вложенных в тег   , по одному для каждого элемента списка. Каждый   имеет атрибут  value , который указывает значение, отправляемое на сервер сбора при отправке формы. Например, если вы выберете «Синий» из списка выше, страница отправит значение «shirts=blue» (помните, что  shirts  — это имя   элемента select).
 Атрибуты выбора HTML 
 Элемент select принимает глобальные атрибуты HTML, а также имеет несколько собственных атрибутов для изменения его работы. Вот эти атрибуты:
 автозаполнение 
 Атрибут автозаполнения позволяет функции автозаполнения браузера выбирать вариант из раскрывающегося списка для пользователя.
 autofocus 
 Если атрибут  autofocus  включен в тег   , браузер пользователя автоматически сфокусируется на выбранном элементе при загрузке страницы.
 disabled 
 При добавлении к тегу    атрибут  disabled  отключает весь раскрывающийся список. Пользователь не может взаимодействовать с ним или выбрать ответ.
 См. Pen HTML Select: отключено Кристиной Перриконе (@hubspot) на CodePen.
 Атрибут  disabled  также можно поместить внутрь тега  , чтобы отключить элемент в раскрывающемся списке.
 См. атрибут Pen HTML Select: disabled Кристины Перриконе (@hubspot) на CodePen.
  
 форма 
 Атрибут  формы  связывает тег    с элементом   на странице. Этот атрибут полезен для размещения тега    за пределами   в HTML. Значением атрибута  формы  является идентификатор   формы, к которой он принадлежит.
 несколько 
 По умолчанию элемент select позволяет выбрать только один вариант.  множественный атрибут  позволяет пользователю выбирать несколько элементов. Он также отображает все параметры в прокручиваемом списке, а не в раскрывающемся списке.
 Чтобы выбрать несколько элементов, щелкните их, удерживая клавишу  ctrl  или  shift  в Windows или клавишу  command  или  shift  в macOS.
 См. атрибут Pen HTML Select: Multiple от Кристины Перриконе (@hubspot) на CodePen.
 Обратите внимание, что этот выбор интерфейса может быть не самым интуитивным для всех пользователей и имеет относительно высокую стоимость взаимодействия (поскольку пользователи должны щелкать, удерживая нажатой клавишу, чтобы выбрать несколько ответов). Лучшей альтернативой было бы использование флажков, позволяющих пользователям выбирать один или несколько элементов из списка.
 name 
 Как уже упоминалось, атрибут  name  присваивает раскрывающемуся списку имя, которое отправляется на сервер при отправке формы. Если вы не включите этот атрибут, ответы пользователей не будут отправляться на сервер.
 required 
 Когда атрибут  required  включен в    , пользователи должны выбрать ответ из раскрывающегося списка перед отправкой формы.
 размер 
 Если ваш    допускает несколько ответов, 9Атрибут 0125 size  устанавливает, сколько строк ответов будет видно без прокрутки. Здесь я установил три строки для отображения.
 См. атрибут Pen HTML Select: size от Christina Perricone (@hubspot) на CodePen.
  
 В этом видео рассказывается все, что вам нужно знать об HTML-элементе select.
 
 Другие приемы выбора HTML 
 Помимо атрибутов, есть еще несколько способов настройки раскрывающихся списков, которые вы, вероятно, видели раньше.
 Изменить HTML select Параметр по умолчанию 
    автоматически выбирает первый   вложенный в него. Если вы хотите установить другой элемент в качестве параметра по умолчанию, добавьте атрибут  selected  к нужному тегу  . Ниже я сделал второй вариант ответом по умолчанию.
 См. атрибут Pen HTML Select: selected от Кристины Перриконе (@hubspot) на CodePen.
  
 Добавить текст заполнителя в HTML select 
 Заполнитель предотвращает выбор элемента списка по умолчанию — вместо этого вы можете сделать отображаемый текст подсказкой, например «Выберите один…» и т. д.
 Чтобы добавить заполнитель, напишите ваш текст-заполнитель как элемент   и добавьте к этому элементу атрибуты  disabled  и  selected .
 См. Pen HTML Select: placeholder от Christina Perricone (@hubspot) на CodePen.
  
 Элементы выбора группы HTML 
 Вы также можете разделить элементы ответов на группы, что удобно для особенно больших раскрывающихся списков. Вложите теги   (option group) в ваш основной тег   , по одному на каждую группу. Назначьте атрибут  label  каждому   для имени группы. Затем вложите 90 125 тегов 90 126 внутри ваших 90 125 тегов 90 126.
 См. Pen HTML Select: groups Кристины Перриконе (@hubspot) на CodePen.
  
 Как использовать HTML-выбор в форме 
 Элемент select предназначен для использования внутри элемента HTML-формы, который позволяет пользователям вводить и отправлять ответы в интерфейсе вашего сайта.  Теги  , вложенные в тег  , включаются в форму, и ответы отправляются, когда пользователь нажимает кнопку отправки. Вот как выглядит HTML-форма, содержащая элемент отправки:
 См. Pen HTML Select:forms 1 от Christina Perricone (@hubspot) на CodePen.
 Вы также можете поместить элемент    вне тега   и связать его с этой формой, используя атрибут формы  , например: Перриконе (@hubspot) на CodePen.
  
 Выбор HTML: простое решение для раскрывающихся списков 
 Если вы хотите представить параметры в виде раскрывающегося меню, используйте выбор — он обрабатывает все необходимые функции за вас, и вы можете настроить их с помощью простых атрибутов. Этот элемент также экономит место в ваших формах, что делает его идеальным для длинных списков (например, «В какой стране вы живете?»). Лучше всего то, что им легко пользоваться, поэтому вы можете начать собирать ответы за считанные минуты.
 Темы: 
 HTML
 Не забудьте поделиться этим постом! 
 HTML тег — GeeksforGeeks 
 Просмотреть обсуждение
 Улучшить статью
 Сохранить статью
 Последнее обновление:
28 июл, 2022
 Читать
 Обсудить
 Посмотреть обсуждение
 Улучшить статью
 Сохранить статью
 Тег    в HTML используется для создания раскрывающегося списка. Тег  содержит тег для отображения доступных опций раскрывающегося списка.
  Примечание:  Тег  используется в форме для получения ответов пользователей.
  Синтаксис: 
 <выбрать>
    <опция>
    
    . ..
 
  Атрибуты:  Атрибуты тега  перечислены ниже: 
  autofocus:  HTML-атрибут  autofocus используется для указания того, что раскрывающийся список должен автоматически получать фокус при открытии страницы. нагрузки. Это тип логического атрибута.
  disabled:  Атрибут disabled используется для указания того, что выбранный элемент отключен. Отключенный раскрывающийся список нельзя щелкнуть и использовать. Это логический атрибут.
  форма:  Атрибут формы HTML  используется для указания одной или нескольких форм, которым принадлежит элемент .
  множественный:  Множественный атрибут HTML  является логическим атрибутом. Он указывает, что пользователю разрешено выбирать более одного значения, представленного в элементе .
  имя:  HTML-атрибут имени  используется для указания имени раскрывающегося списка. Он используется для ссылки на данные формы после отправки формы или для ссылки на элемент в JavaScript.
  required:  Обязательный HTML-атрибут  — это логический атрибут, который используется для указания того, что пользователь должен выбрать значение перед отправкой формы.
  размер:  Атрибут размера HTML используется для указания количества видимых параметров в раскрывающемся списке.
  Пример 1:  В этом примере мы просто создаем раскрывающийся список в HTML.
 HTML 
   
  <   html   > 
  
  <   body   > 
         <   h3   >Добро пожаловать в GeeksforGeeks  h3   > 
         <   select   > 
             <   option   value   =   "By the way"   >BTW  option   > 
    <   option   value   =   "Talk to you later"   >TTYL  option   > 
             <   option   value   =   "To be honest"   >TBH  option   > 
             <   option   value   =   " I don't know"   >IDK  option   > 
           select   > 
    body  > 
    HTML  > 
 . тег с одним предварительно выбранным параметром.
 HTML 
   
  <   html   >
003 
  <   head   > 
         <   title   >HTML select Tag  title   > 
    head   > 
  
  <   тело   стиль   =   "выравнивание текста: по центру;"   > 
         <   h2   >Гики для гиков  h2   > 
         <   h3   >HTML select Tag  h3   > 
         
  
  <   p   >Select one option from drop-down list:  p   > 
  
  
         <   select   > 
             <   option   value   =   "GFG"   >GFG  option   > 
             <   option   value   =   "OS"   >OS  option   > 
             <   option   value   =   "DBMS"   >DBMS  option   > 
             <   option   value   =   "Data Structure"   >Data Structure  option   > 
           select   > 
    body   > 
  
    html   > 
  Вывод: 
 Тег HTML  с предварительно выбранной опцией
  Пример 3:  В этом примере мы используем тег optgroup с тегом . Тег optgroup используется для отображения связанных опций в раскрывающемся списке.
 HTML 
   
  <   html   > 
  
  <   body   > 
         <   h3   >Welcome To GeeksforGeeks  h3   > 
         <   label   for   =   "Brands"  > Выберите бренд:   Метка  > 
    <  SELECT   Имя   =      =      =      =      =      =     . 0451 id   =   "Brands"   > 
             <   optgroup   label   =   "Tech Brands"   > 
                 <   option   значение   =   "Google"   >Google  опция   > 
                                       < 2 опция0451 value   =   "Apple"   >Apple  option   > 
               optgroup   > 
             <   optgroup   label   =   "Автомобильные марки"   > 
                 <   option   value  0452  >Tesla  option   > 
                 <   option   value   =   "audi"   >Audi  option   > 
               optgroup   > 
             <   optgroup   этикетка   =  Бренд "Развлечения"20452  > 
                 <   option   value   =   "Disney"   >Disney  option   > 
               optgroup   > 
           select   > 
    body   > 
  
    HTML  > 
  Выход: 
 HTML  с 
 HTML  с
 HTML  с
 HTML  с тегом. выше
 Internet Explorer
 Microsoft Edge
 Firefox 1 и выше
 Safari
 Opera
 
 Далее
 Форматирование HTML-текста
 Рекомендуемые статьи
 Страница :
 Тег HTML 
 Тег HTML    представляет элемент управления для выбора из набора параметров.
 Тег    используется с тегом   для создания списка опций, из которых пользователь может выбирать. Элемент   также можно использовать для группировки этих элементов  .
 Синтаксис 
 9Тег 0451   записывается как       с любым количеством тегов  , вложенных между начальным и конечным тегами.
 Атрибут  name  часто включается, чтобы любой сценарий, обрабатывающий элемент управления формы, мог ссылаться на выбранное значение.
 Вот так:
 <выберите имя="моеИмя">Вариант 1Вариант 2Вариант 3 
 Примеры 
 Использование базового тега 
 <выберите имя="город">СиднейМельбурнКромвельКвинстаун 
 Элемент 
 
 Элемент   позволяет сгруппировать   элемента в вашем списке   . Это может быть полезно, когда элементов списка много и их можно отсортировать по логическим группам.
 Вот так:
 <выберите имя="Город">
СиднейМельбурнБрисбен ОклендДанединНельсон БангкокЧиангмайПаттайя  
 Множественный 
  Атрибут
 Атрибут  множественный  позволяет пользователю выбирать более одного варианта одновременно. Браузеры обычно представляют несколько списков выбора иначе, чем обычный список выбора.
 Вот так:
 <выберите имя = "Город" несколько>СиднейМельбурнБрисбен ОклендДанединНельсон БангкокЧиангмайПаттайя  
 Размер 
  Атрибут
 Если у вас много параметров, вы можете захотеть отобразить дополнительные параметры для пользователя (без необходимости сначала прокручивать или взаимодействовать с элементом управления).
 Можно использовать атрибут размера  , чтобы указать количество параметров, отображаемых пользователю.
 Вот так:
 <выберите имя="Город" размер="10" несколько>СиднейМельбурнБрисбен ОклендДанединНельсон БангкокЧиангмайПаттайя  
 Атрибуты 
 Атрибуты могут быть добавлены к элементу HTML, чтобы предоставить больше информации о том, как элемент должен выглядеть или вести себя.
 Элемент    принимает следующие атрибуты.
 Атрибут
 Описание
  автофокус 
 Автоматически передает фокус этому элементу управления при загрузке страницы. Это позволяет пользователю начать использовать элемент управления, не выбирая его предварительно. В документе не должно быть более одного элемента с указанным атрибутом автофокуса.
 Это логический атрибут. Если атрибут присутствует, его значение должно быть либо пустой строкой, либо значением, нечувствительным к регистру ASCII, совпадающим с каноническим именем атрибута, без начальных или конечных пробелов (т. е. либо  autofocus , либо  autofocus="autofocus" ).
 Возможные значения:
  [Пустая строка] 
  автофокус 
  инвалид 
 Отключает управление вводом. Элемент управления формы не будет принимать изменения от пользователя. Он также не может получить фокус и будет пропущен при табуляции.
 Это логический атрибут. Если атрибут присутствует, его значение должно быть либо пустой строкой, либо значением, нечувствительным к регистру ASCII, совпадающим с каноническим именем атрибута, без начальных или конечных пробелов (т. е. либо  disabled , либо  disabled="disabled" ).
 Возможные значения:
  [Пустая строка] 
  отключен 
  форма 
 Указывает идентификатор формы, которой принадлежит этот элемент управления.
 Возможные значения:
  [Идентификатор элемента формы в владельце элемента  Документ  ] 
  множественный 
 Указывает, может ли пользователь выбрать сразу несколько строк.
 Это логический атрибут. Если атрибут присутствует, его значение должно быть либо пустой строкой, либо значением, которое является нечувствительным к регистру ASCII-соответствием каноническому имени атрибута без начальных или конечных пробелов (т. е. либо  кратный  или  кратный = "множественный"  ).
 Возможные значения:
  [Пустая строка] 
  несколько 
  имя 
 Присваивает имя элементу управления вводом.
  required 
 Указывает, что пользователь должен выбрать параметр перед отправкой формы.
 Это логический атрибут. Если атрибут присутствует, его значение должно быть либо пустой строкой, либо значением, которое является нечувствительным к регистру ASCII-соответствием каноническому имени атрибута без начальных или конечных пробелов (т. е. либо  требуется  или  требуется = "требуется"  ).
 Возможные значения:
  [Пустая строка] 
  требуется 
  размер 
 Указывает количество параметров, отображаемых пользователю. Значение должно быть допустимым неотрицательным целым числом больше нуля. Если присутствует атрибут , кратный , то значение атрибута  размера  по умолчанию равно 4. Если , кратный  атрибут отсутствует, то значение атрибута size по умолчанию равно 1.
 Глобальные атрибуты 
 Следующие атрибуты являются стандартными для всех элементов HTML. Поэтому вы можете использовать эти атрибуты с тегом   , а также со всеми другими тегами HTML.
  ключ доступа 
  автокапитализация 
  класс 
  редактируемый контент 
  данные-* 
  директор 
  перетаскиваемый 
  скрытый 
  идентификатор 
  режим ввода 
  это 
  ИД товара 
  элементпроп 
  Артикул 
  предметная область 
  тип изделия 
  язык 
  часть 
  гнездо 
  проверка орфографии 
  стиль 
  tabindex 
  Название 
  перевод 
 Полное объяснение этих атрибутов см. в разделе Глобальные атрибуты HTML 5.
 Обработчики событий 
 Атрибуты содержимого обработчика событий позволяют вам вызывать сценарий из вашего HTML. Скрипт вызывается, когда происходит определенное «событие». Каждый атрибут содержимого обработчика событий имеет дело с другим событием.
  прерывание 
  onauxclick 
  размытие 
  при отмене 
  онканплей 
  oncanplaythrough 
  на смену 
  по клику 
  при закрытии 
  в контекстном меню 
  онкопия 
  при обмене 
  нарезной 
  ondblclick 
  ондраг 
  ондрагенд 
  Драгентер 
  драгенвыход 
  на накладке 
  ондраговер 
  ондрагстарт 
  
  ondurationchange 
  пустой 
  односторонний 
  при ошибке 
  онфокус 
  данные формы 
  на входе 
  недействительный 
  нажатие клавиши 
  нажатие клавиши 
  onkeyup 
  onlanguagechange 
  под нагрузкой 
  загруженные данные 
  загруженные метаданные 
  запуск при загрузке 
  
  ввод с помощью мыши 
  на коврике для мыши 
  onmousemove 
  onmouseout 
  при наведении мыши 
  для мыши 
  паста 
  при паузе 
  в игре 
  в игре 
  в процессе 
  при изменении скорости 
  при сбросе 
  изменение размера 
  при прокрутке 
  нарушение политики безопасности 
  поиск 
  поиск 
  по выбору 
  при смене слота 
  установлен 
  при отправке 
  на подвесе 
  своевременное обновление 
  нагрудник 
  onvolumechange 
  в ожидании 
  на колесе 
 Большинство атрибутов содержимого обработчиков событий можно использовать во всех элементах HTML, но для некоторых обработчиков событий действуют особые правила, определяющие, когда их можно использовать и к каким элементам они применимы.
 Дополнительные сведения см. в разделе Атрибуты содержимого обработчика событий HTML.
 Тег HTML 5 
 Тег HTML    используется для определения списка выбора.
 Этот элемент используется вместе с элементом для создания списка опций, из которых пользователь может выбирать.
 См. также элемент для группировки опций.
 Демо 
 Атрибуты 
 Теги HTML могут содержать один или несколько атрибутов. Атрибуты добавляются к тегу, чтобы предоставить браузеру больше информации о том, как тег должен выглядеть или вести себя. Атрибуты состоят из имени и значения, разделенных знаком равенства (=), при этом значение заключено в двойные кавычки. Вот пример:  style="color:black;"  .
 Существует 3 типа атрибутов, которые вы можете добавить к своим HTML-тегам: специфичные для элемента, глобальные атрибуты и атрибуты содержимого обработчика событий.
 Ниже перечислены атрибуты, которые можно добавить к этому тегу.
 Специфичные для элемента атрибуты 
 В следующей таблице показаны атрибуты, характерные для этого тега/элемента.
 Атрибут
 Описание
 автофокус
 Автоматически передает фокус этому элементу управления при загрузке страницы. Это позволяет пользователю начать использовать элемент управления, не выбирая его предварительно. В документе не должно быть более одного элемента с указанным атрибутом автофокуса.
 Это логический атрибут. Если атрибут присутствует, его значение должно быть либо пустой строкой, либо значением, нечувствительным к регистру ASCII, совпадающим с каноническим именем атрибута, без начальных или конечных пробелов (т. е. либо  autofocus , либо  autofocus="autofocus" ).
 Возможные значения:
  [Пустая строка] 
 автофокус
 отключено
 Отключает управление вводом. Элемент управления формы не будет принимать изменения от пользователя. Он также не может получить фокус и будет пропущен при табуляции.
 Это логический атрибут. Если атрибут присутствует, его значение должно быть либо пустой строкой, либо значением, нечувствительным к регистру ASCII, совпадающим с каноническим именем атрибута, без начальных или конечных пробелов (т. е. либо  disabled , либо  disabled="disabled" ).
 Возможные значения:
  [Пустая строка] 
 отключен
 форма
 Указывает идентификатор формы, которой принадлежит этот элемент управления.
 Возможные значения:
  [Идентификатор элемента формы в владельце элемента  Документ  ] 
 множественный
 Указывает, может ли пользователь выбрать несколько строк одновременно.
 Это логический атрибут. Если атрибут присутствует, его значение должно быть либо пустой строкой, либо значением, которое является нечувствительным к регистру ASCII-соответствием каноническому имени атрибута без начального или конечного пробела (т. е. либо , кратное 9).0452 или  Multiple="множественный"  ).
 Возможные значения:
  [Пустая строка] 
 несколько
 имя
 Присваивает имя элементу управления вводом.
 required
 Указывает, что пользователь должен выбрать параметр перед отправкой формы.
 Это логический атрибут. Если атрибут присутствует, его значение должно быть либо пустой строкой, либо значением, которое является нечувствительным к регистру ASCII-соответствием каноническому имени атрибута без начальных или конечных пробелов (т. е. либо  требуется  или  требуется = "требуется"  ).
 Возможные значения:
  [Пустая строка] 
 требуется
 размер
 Указывает количество параметров, отображаемых пользователю. Значение должно быть допустимым неотрицательным целым числом больше нуля. Если атрибут  множественный  присутствует, то значение по умолчанию атрибута  размера  равно 4. Если атрибут  множественного  отсутствует, то значение атрибута размера по умолчанию равно 1.
 Глобальные атрибуты 
 Следующие атрибуты являются стандартными для всех тегов HTML 5 (хотя атрибут  tabindex  не применяется к элементам  диалога ).
  ключ доступа 
  автокапитализация 
  класс 
  редактируемый контент 
  данные-* 
  директор 
  перетаскиваемый 
  скрытый 
  идентификатор 
  режим ввода 
  это 
  ИД товара 
  элементпроп 
  Артикул 
  предметная область 
  тип изделия 
  язык 
  часть 
  гнездо 
  проверка правописания 
  стиль 
  tabindex 
  Название 
  перевод 
 Полное объяснение этих атрибутов см. в разделе Глобальные атрибуты HTML 5.
 Атрибуты содержимого обработчика событий 
 Атрибуты содержимого обработчика событий позволяют вам вызывать сценарий из вашего HTML. Скрипт вызывается, когда происходит определенное «событие». Каждый атрибут содержимого обработчика событий имеет дело с другим событием.
  прерывание 
  onauxclick 
  размытие 
  при отмене 
  онканплей 
  oncanplaythrough 
  на смену 
  по клику 
  при закрытии 
  в контекстном меню 
  онкопия 
  при обмене 
  нарезной 
  ondblclick 
  ондраг 
  ондрагенд 
  Драгентер 
  драгенвыход 
  на накладке 
  ондраговер 
  ондрагстарт 
  
  ondurationchange 
  пустой 
  односторонний 
  при ошибке 
  онфокус 
  данные формы 
  на входе 
  недействительный 
  нажатие клавиши 
  нажатие клавиши 
  onkeyup 
  onlanguagechange 
  под нагрузкой 
  загруженные данные 
  загруженные метаданные 
  запуск при загрузке 
  
  ввод с помощью мыши 
  на мышелист 
  onmousemove 
  onmouseout 
  при наведении мыши 
  для мыши 
  паста 
  при паузе 
  в игре 
  в игре 
  в процессе 
  при изменении скорости 
  при сбросе 
  изменение размера 
  при прокрутке 
  onsecuritypolicyviolation 
  поиск 
  поиск 
  по выбору 
  при смене слота 
  установлен 
  при отправке 
  на подвесе 
  своевременное обновление 
  нагрудник 
  onvolumechange 
  в ожидании 
  на колесе 
 Полный список обработчиков событий см. в разделе Атрибуты содержимого обработчиков событий HTML 5.
 HTML: тег 
 В этом руководстве по HTML объясняется, как использовать элемент HTML, называемый тегом   , с синтаксисом и примерами.
 Описание 
 Тег HTML    создает раскрывающийся список значений, из которых пользователь может выбирать. Эти раскрывающиеся значения определяются серией тегов внутри тега . Этот тег также часто называют элементом .
 Синтаксис 
 В HTML синтаксис тега   :
 
  Учебники: 
  <выбрать>
    HTML
    CSS
    SQL
    
 Пример вывода 
 
 Атрибуты 
 Помимо глобальных атрибутов, ниже приведен список атрибутов, специфичных для тега :
.
 Атрибут
 Описание
 HTML-совместимость
 автозаполнение
 Значение либо  на , либо  на , чтобы указать, может ли браузер автоматически заполнять значения в элементе управления  на основе значений, ранее введенных в форму
 HTML 4. 01, HTML5
 автофокус
 Логическое значение, указывающее, что элемент управления  имеет фокус ввода при загрузке страницы, если пользователь не переопределяет его.
 HTML 4.01, HTML5
 инвалид
 Логическое значение, указывающее, что пользователь не может взаимодействовать с элементом управления .
 HTML 4.01, HTML5
 форма
 Значение, указывающее форму, которой принадлежит элемент управления . Это идентификатор   в том же документе.
 HTML 4.01, HTML5
 многократный
 Логическое значение, указывающее, можно ли выбрать несколько параметров в элементе управления . Значение по умолчанию для элемента управления  — разрешить выбор только одного параметра.
 HTML 4.01, HTML5
 имя
 Имя элемента управления 
 HTML 4. 01, HTML5
 требуется
 Логическое значение, указывающее, требуется ли элемент управления . Необходимые элементы управления  должны быть заполнены до отправки формы.
 HTML 4.01, HTML5
 размер
 Количество строк, видимых в элементе управления , когда указано , кратное , или когда элемент управления  отображается в виде прокручиваемого списка. Значение по умолчанию для размера равно 0,
 HTML 4.01, HTML5
 Примечание 
 HTML-элемент  находится внутри тега. Тег  обычно находится внутри тега.
 Тег  содержит набор тегов, предоставляющих список раскрывающихся значений.
 По умолчанию первый параметр в теге  отображается как выбранный элемент. Пользователь может выбрать другой вариант в раскрывающемся списке.
 Совместимость с браузерами 
 Тег  имеет базовую поддержку со следующими браузерами:
 Chrome
 Андроид
 Firefox (Геккон)
 Firefox Mobile (Геккон)
 Internet Explorer (IE)
 Пограничный мобильный телефон
 Опера
 Опера Мобайл
 Сафари (веб-кит)
 Сафари Мобильный
 Пример 
 Мы обсудим тег  ниже, исследуя примеры использования тега  в HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict и XHTML 1.1.
 HTML5
 HTML4
 XHTML
 Документ HTML5 
 Если вы создали новую веб-страницу в HTML5, ваш тег  может выглядеть следующим образом:
 

<голова>
<мета-кодировка="UTF-8">


<тело>
  Учебники: 
  <выбрать>
    HTML
    CSS
    SQL
  

 
 В этом примере документа HTML5 мы использовали тег  для создания списка из трех выпадающих значений — HTML, CSS и SQL. Эти значения будут отображаться в виде раскрывающегося списка, из которого пользователь может выбирать.
 HTML 4.01 Transitional Document 
 Если вы создали новую веб-страницу в HTML 4.01 Transitional, ваш тег  может выглядеть следующим образом:
 

<голова>



<тело>
  Учебники: 
  <выбрать>
    HTML
    CSS
    SQL
  

 
 В этом примере переходного документа HTML 4.01 мы использовали тег  для создания списка из трех выпадающих значений — HTML, CSS и SQL. Эти значения будут отображаться в виде раскрывающегося списка, из которого пользователь может выбирать.
 Документ XHTML 1.0 Transitional 
 Если вы создали новую веб-страницу в XHTML 1.0 Transitional, ваш тег  может выглядеть следующим образом:
 

<голова>



<тело>
  Учебники: 
  <выбрать>
    HTML
    CSS
    SQL
  

 
 В этом примере переходного документа XHTML 1.0 мы использовали тег  для создания списка из трех выпадающих значений — HTML, CSS и SQL. Эти значения будут отображаться в виде раскрывающегося списка, из которого пользователь может выбирать.
 XHTML 1.0 Strict Document 
 Если вы создали новую веб-страницу в XHTML 1. 0 Strict, ваш тег  может выглядеть следующим образом:
 

<голова>



<тело>
<дел>
  Учебники: 
  <выбрать>
    HTML
    CSS
    SQL