Тег select html: Тег | htmlbook.ru

Leave a Comment / Html / By /

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Подія викликається коли користувач клацає ЛКМ по елементу.

Теги select, option и optgroup

← Перейти к списку тегов

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

Поддержка браузеров

Синтаксис

<select>
    <option value="option1">Опция 1</option>
    <option value="option2">Опция 2</option>
    <option value="option3">Опция 3</option>
    <option value="option4">Опция 4</option>
</select>

Синтаксис с использованием <optgroup>:

<select>
    <optgroup label="Группа 1">
        <option value="option1">Опция 1</option>
        <option value="option2">Опция 2</option>
    </optgroup>
    <optgroup label="Группа 1">
        <option value="option3">Опция 3</option>
        <option value="option4">Опция 4</option>
    </optgroup>
</select>

Атрибуты

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

<select>

АтрибутОписание
autofocusУказывает на то, что элемент должен автоматически получать фокус при загрузке страницы. Этот атрибут может иметь только один элемент на странице.
disabledУказывает на то, что элемент отключен и пользователь не может с ним взаимодейтсвовать.
formУказывает к какой форме относится элемент. Значением атрибута должен быть id формы из того же документа. Этот атрибут позволяет размещать элементы формы не только внутри неё, но и в любом месте на странице.
multiple Указывает на то, что возможен выбор нескольких опций из списка.
nameИспользуется для указания имени элемента.
required Указывает на то, что пользователь должен выбрать значение для того чтобы отправить форму.
sizeЕсли данный атрибут указан, то элемент будет представлен как список опций. Значение атрибута указывает на количество опций, которые видны сразу.

Тег <select> поддерживает глобальные атрибуты.

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

<option>

АтрибутОписание
disabledУказывает на то, что опция отключена и пользователь не может с ней взаимодейтсвовать.
labelИспольуется для создания ярлыка отображающего описание опции. Если ярлык есть, то текст опции будет таким, как указан в ярлыке, если нет, то будет совпадать с содержимым тега.
selected Указывает на то, что опция предварительно выбрана при загрузке страницы.
valueУказывает значение, которое будет отправлено на сервер.

Тег <option> поддерживает глобальные атрибуты.

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

<optgroup>

АтрибутОписание
disabledУказывает на то, что группа опций отключена и пользователь не может с ней взаимодейтсвовать.
labelИспольуется для создания ярлыка отображающего описание группы опций. Если ярлык есть, то название группы опций будет таким, как указан в ярлыке, если нет, то название будет отсутствовать.

Тег <optgroup> поддерживает глобальные атрибуты.

Песочница

<select>
    <option value="option1">Опция 1</option>
    <option value="option2">Опция 2</option>
    <option value="option3">Опция 3</option>
    <option value="option4">Опция 4</option>
</select>
<select>
    <optgroup label="Группа 1">
        <option value="option1">Опция 1</option>
        <option value="option2">Опция 2</option>
    </optgroup>
    <optgroup label="Группа 1">
        <option value="option3">Опция 3</option>
        <option value="option4">Опция 4</option>
    </optgroup>
</select>
<hr>                   
<select multiple>
    <option value="option1">Опция 1</option>
    <option value="option2">Опция 2</option>
    <option value="option3">Опция 3</option>
    <option value="option4">Опция 4</option>
</select>
<select size="4">
    <option value="option1">Опция 1</option>
    <option value="option2">Опция 2</option>
    <option value="option3">Опция 3</option>
    <option value="option4">Опция 4</option>
</select>

HTML

← Перейти к списку тегов

HTML: тег

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

Синтаксис

В HTML синтаксис тега :

.
Атрибут Описание 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-элемент обычно находится внутри тега
    .
  • Тег отображается как выбранный элемент. Пользователь может выбрать другой вариант в раскрывающемся списке.

Совместимость с браузерами

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

 

<голова>
<мета-кодировка="UTF-8">
Пример HTML5 от www.techonthenet.com

<тело>
  
  <выбрать>

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

 

<голова>

Переходный пример HTML 4.01 от www.techonthenet.com

<тело>
  
  <выбрать>

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

 

<голова>

Переходный пример XHMTL 1.0 от www.techonthenet.com

<тело>
  
  <выбрать>

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

 

<голова>

Строгий пример XHTML 1.0 от www.techonthenet.com

<тело>
<дел>
  
  <выбрать>

В этом примере XHTML 1.0 Strict Document мы использовали тег может выглядеть следующим образом:

  1//EN" " http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<голова>

Пример XHTML 1.1 с сайта www.techonthenet.com

<тело>
<дел>
  
  <выбрать>

В этом примере документа XHTML 1.1 мы использовали тег …., где каждый элемент в списке будет заключен в тег option, а select позволит функция выбора пользователя. Чтобы упростить другие методы выбора, такие как выбор группы и множественный выбор, тег можно использовать внутри тега можно использовать вместо тега ….

Синтаксис этого тега следующий:

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

Синтаксис для этого следующий:

 <выбрать>





<оптгруппа>

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

определенного размера, только такой:

  автозаполнение: 9Тег select 0005 также используется для автозаполнения значений поля следующим образом:

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

 <выбрать автофокус>

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

 

<Выбрать имя="" form="Id_name">

  required: Этот параметр в теге select определяет обязательный параметр из заданного списка перед фактической отправкой формы.

 <выберите имя = "требуемое значение">

placeholder: Как мы знаем, при использовании тега select первый вариант будет рассматриваться как параметр по умолчанию, но если мы хотим показать какой-либо параметр по умолчанию, мы можем установить выбранное ключевое слово на конкретный вариант следующим образом:

 <выбрать имя="значение">

disabled: еще один полезный прием в теге select для отображения параметра в отключенном формате следующим образом:

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

 <выбрать имя="значение" >

Примеры тега Select в HTML

Ниже приведены следующие примеры.

Example #1

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

Код 

 

<голова>

<стиль>
.div-контейнер {
дисплей: таблица;
ширина: 100%;
}
.блокировать {
отображение: таблица-ячейка;
отступ: 10 пикселей;
}


<тело>
<дел>
<дел>
 
Тег простого выбора