Html select атрибуты: Тег | htmlbook.ru

Leave a Comment / Html / By /

⚡️ HTML и CSS с примерами кода

Тег <option> (от англ. option — пункт, параметр, опция) определяет отдельные пункты списка, создаваемого с помощью контейнера <select>.

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

Формы
  • button
  • datalist
  • fieldset
  • form
  • input
  • label
  • legend
  • meter
  • optgroup
  • option
  • output
  • progress
  • select
  • textarea

Синтаксис

<select>
  <option>Пункт 1</option>
  <option>Пункт 2</option>
</select>

Закрывающий тег не обязателен.

Атрибуты

disabled
Заблокировать для доступа элемент списка.
label
Указание метки пункта списка.
selected
Заранее устанавливает определённый пункт списка выделенным.
value
Значение пункта списка, которое будет отправлено на сервер или прочитано с помощью скриптов.

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

disabled

Блокирует элемент списка для его выбора.

Синтаксис

<option disabled>...</option>

Значения

Нет.

Значение по умолчанию

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

label

Атрибут предназначен для указания метки пункта списка, сокращённой по сравнению с текстом внутри <option>. Если атрибут label присутствует, то текст внутри <option>

игнорируется и в списке выводится значение label.

Синтаксис

<option label="<текст>">...</option>

Значения

Любая текстовая строка.

Значение по умолчанию

Нет.

selected

Делает текущий пункт списка выделенным. Если к элементу <select> добавлен атрибут multiple, то можно выделять более одного пункта списка.

Синтаксис

<option selected>...</option>

Значения

Нет.

Значение по умолчанию

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

value

Определяет значение пункта списка, которое будет отправлено на сервер. На сервер отправляется пара «имя=значение», где имя задаётся атрибутом name элемента

<select>, а значение — атрибутом value выделенных пунктов списка. Значение может как совпадать с текстом пункта, так быть и самостоятельным. Также атрибут value применяется для получения значений данных через скрипты.

Синтаксис

<option value="<текст>">...</option>

Значения

Любая текстовая строка.

Значение по умолчанию

Нет.

Спецификации

  • WHATWG HTML Living Standard
  • HTML 5
  • HTML 4.01 Specification

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>OPTION</title>
  </head>
  <body>
    <form action="option2.php">
      <p>
        <select size="3" name="hero">
          <option disabled>Выберите рыцаря</option>
          <option value="t1" selected>Гавейн</option>
          <option value="t2">Ланселот</option>
          <option value="t3">Галахэд</option>
          <option value="t4">Персиваль</option>
        </select>
      </p>
      <p><input type="submit" value="Отправить" /></p>
    </form>
  </body>
</html>

Ссылки

  • Тег <option> MDN (рус. )

Тег — Учебник HTML

❮ Назад HTML Справочник Далее ❯


Пример

Создайте раскрывающийся список с четырьмя вариантами:

<label for=»cars»>Выберите автомобиль:</label>

<select name=»cars»>
 <option value=»volvo»>Вольво</option>
 <option value=»saab»>Сааб</option>

 <option value=»mercedes»>Мерседес</option>
 <option value=»audi»>Ауди</option>
</select>

Попробуйте сами »

Определение и использование

Тег <select> используется для создания выпадающего списка.

Тег <select> чаще всего используется в форме, чтобы собрать пользовательский ввод.

Атрибут name необходим для ссылки на данные формы после отправки формы (если вы опустите атрибут name, никакие данные из выпадающего списка не будут представлены).

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

Тег <option> внутри элемента <select> определяет доступные параметры в раскрывающемся списке.

Совет: Всегда добавляйте тег <label> для лучших практик доступности!

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

Элемент
<select> Да Да Да Да Да

Атрибуты

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

Глобальные атрибуты

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

События атрибутов

Тег <select> также поддерживает События атрибутов в HTML.

Еще примеры

Пример

Use <select> with <optgroup> tags:

<label for=»cars»>Выберите автомобиль:</label>
<select name=»cars»>
 <optgroup label=»Шведские Автомобили»>
   <option value=»volvo»>Вольво</option>

   <option value=»saab»>Сааб</option>
 </optgroup>
 <optgroup label=»Немецкие Автомобили»>
   <option value=»mercedes»>Мерседес</option>
   <option value=»audi»>Ауди</option>
 </optgroup>
</select>

Попробуйте сами »

Связанные страницы

HTML DOM Справочник: Объект Select

CSS Учебник: Стили форм

Настройки CSS по умолчанию

Нет.

❮ Назад HTML Справочник Далее ❯


НОВОЕ

Мы только что запустили
SchoolsW3 видео

Узнать сейчас

ВЫБОР ЦВЕТА

Получите сертификат,
пройдите
курс сегодня!

Приступить

КОДОВАЯ ИГРА

Играть

ТОП Учебники
HTML Учебник
CSS Учебник
JavaScript Учебник
КАК Учебник
SQL Учебник
Python Учебник
W3.
CSS Учебник
Bootstrap Учебник
PHP Учебник
Java Учебник
C++ Учебник
jQuery Учебник

ТОП Справочники
HTML Справочник
CSS Справочник
JavaScript Справочник
SQL Справочник
Python Справочник
W3.CSS Справочник
Bootstrap Справочник
PHP Справочник
HTML Цвета
Java Справочник
Angular Справочник
jQuery Справочник

ТОП Примеры
HTML Примеры
CSS Примеры
JavaScript Примеры
КАК Примеры
SQL Примеры
Python Примеры
W3.CSS Примеры
Bootstrap Примеры
PHP Примеры
Java Примеры
XML Примеры
jQuery Примеры

Форум | О SchoolsW3

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

Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, cookies и политика конфиденциальности.

Авторское право 1999- Все права защищены.
SchoolsW3 работает на площадке от W3.CSS.

HTML-тег — GeeksforGeeks

Улучшить статью

Сохранить статью

  • Последнее обновление: 28 июл, 2022

  • Читать
  • Обсудить

    • Улучшить статью

    Сохранить статью

    Тег содержит тег

    Примечание: Тег

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

  • disabled: Атрибут используется для указания одной или нескольких форм, которым принадлежит элемент является логическим атрибутом. Он указывает, что пользователю разрешено выбирать более одного значения, представленного в элементе используется для указания имени раскрывающегося списка. Он используется для ссылки на данные формы после отправки формы или для ссылки на элемент в JavaScript.
  • required: Обязательный HTML-атрибут

    Пример 2: В этом примере описывается HTML-тег Пример 9 002913

    30022 В этом примере мы используем тег optgroup с тегом . или тег e=, который также известен как … . Для одного варианта можно использовать элементWherever пользователь собирается вызывать datalist через сценарии или собирается отправлять данные на сервер, тогда тег

    Как показано выше синтаксис, — это тег, используемый для создания списка данных. Тег

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

    Пример:

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

     <выберите имя = "Состояние">

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

    Синтаксис: 

     <выбрать несколько>
<опция значение=""> опция1 

<опция значение=""> опция3

    Пример того же синтаксиса: 

     


    Здесь можно выбрать несколько вариантов. Нажмите клавишу Ctrl и выберите несколько вариантов из списка.
    
<скрипт>
функцияmultiFunc() {
document.getElementById("multiselectopt").multiple = true;
}

    Вывод:

    Заключение

    Из всей приведенной выше информации мы узнали, что тег

    • Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *