Select html тег: Тег | htmlbook.ru

Leave a Comment / Html / By /

Содержание

Выпадающий список на странице. Тег — журнал «Доктайп»

  • 25 января 2023

Справочник

Нейрокекс

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

Синтаксис тега <select>

<select>
  <option value="value1">Option 1</option>
  <option value="value2">Option 2</option>
  <option value="value3">Option 3</option>
</select>

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

Тег <select> является частью спецификации HTML Living Standard.

Семантический или нет

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

Примеры использования

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

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

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

<select multiple>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
</select>

Для чего использовать тег <select>

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

Атрибуты тега <select>

  • autocomplete — подсказка для функции автозаполнения формы;
  • disabled — делает элемент неактивным;
  • form — связывает список с формой;
  • multiple — позволяет выбрать несколько опций;
  • name — задает имя элемента, которое будет отправляться на сервер;
  • required — делает элемент обязательным для заполнения;
  • size — задает количество строк в списке.

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

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

Ограничения

Тег <select> не может использоваться внутри элементов <button>, <datalist> и <progress>.

Нюансы

  • Все опции списка должны быть обернуты в тег <option>.
  • Атрибуты value в тегах <option> могут быть использованы для отправки значений на сервер.

Поддержка браузерами

Тег <select> поддерживается всеми современными браузерами. Актуальная информация — на сaniuse.

Альтернативные теги

Альтернативными тегами для <select> являются теги <input> и <datalist>.

Чем заменить этот тег

Если нужно предоставить пользователю возможность ввода текста в список, можно использовать тег <datalist> вместо <select>.

Актуальность

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

Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.

Попробовать

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

Справочник по HTML

Основные HTML-теги в 2023 году.

Справочник

  • 31 марта 2023

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

Список основных атрибутов, которые подойдут ко всему.

Справочник

  • 29 марта 2023

Как добавить раздел на страницу. Тег <div>

Синтаксис, примеры использования, основные атрибуты.

Справочник

  • 25 января 2023

Список описаний. Тег <dl>

Синтаксис, примеры использования, основные атрибуты.

Справочник

  • 25 января 2023

Пункт выпадающего списка. Тег <option>

Синтаксис, примеры использования, основные атрибуты.

Справочник

  • 25 января 2023

<ul>

Синтаксис, примеры использования, основные атрибуты.

Справочник

  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

Справочник

  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

Справочник

  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

Справочник

  • 25 января 2023

Как правильно добавить секцию на страницу. Тег <section>

Синтаксис, примеры использования, основные атрибуты.

Справочник

  • 25 января 2023

Тег | HTML справочник

HTML теги

Значение и применение

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

Первый пункт в списке, как правило, отображается как выбранный, но вы сможете добавить к этому элементу атрибут selected (HTML тега <option>), чтобы задать предопределенный вариант.

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

Поддержка браузерами

Тег
Chrome
Firefox
Opera
Safari
IExplorer
Edge
<select>ДаДаДаДаДаДа

Атрибуты

АтрибутЗначениеОписание
autofocusautofocusУказывает, что выпадающий список должен автоматически получать фокус при загрузке страницы.
disableddisabledЛогический атрибут, который указывает, что выпадающий список должен быть отключен.
formform_idЗадает одну, или несколько форм к которым элемент принадлежит.
multiplemultipleЛогический атрибут, который указывает, что может быть выбрано несколько вариантов сразу (через Ctrl в Windows и через
Command в Mac).
namenameОпределяет имя для выпадающего списка.
requiredrequiredУказывает, что пользователь должен выбрать значение перед отправкой формы.
sizenumberОпределяет число видимых опций в выпадающем списке.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования элемента <select></title>
	</head>
	<body>
		<select name = "blacklist">
			<option value = "2PAC">Tupac Amaru Shakur</option>
			<option value = "50cent">Curtis Jackson</option>
			<option value = "Snoop Dogg" selected>Calvin Cordozar Broadus, Jr.</option>
		</select>
	</body>
</html>

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

Атрибутом selected указали, что третий пункт предопределен (будет выбран по умолчанию вместо первого).

Обращаю Ваше внимание на то, что необходимо использовать атрибут value (значение) тега <option>, чтобы указать какое значение отправляется на сервер для дальнейшей обработки.

В браузере это выглядит следующим образом:

HTML раскрывающийся список.

Рассмотрим следующий пример в котором с использованием тега <optgroup> сгруппируем логически две группы в нашем раскрывающемся списке.

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования HTML тега <optgroup></title>
	</head>
	<body>
		<select  name = "black&white">
			<optgroup label = "Blacklist"> <!--Группа №1 -->
				<option value = "2PAC"> Tupac Amaru Shakur </option>
				<option value = "50cent"> Curtis Jackson </option>
				<option value = "Snoop Dogg" selected > Calvin Cordozar Broadus, Jr.
 
 
  </option>
			</optgroup>
			<optgroup label = "Whitelist"> <!--Группа №2 -->
				<option value = "Eminem">Marshall Bruce Mathers III</option>
			</optgroup>
		</select>
	</body>
</html>

В данном примере мы выделили 2 группы тегом <optgroup>. Атрибут label элемента задает наименование выделенной группы, выполненное полужирным начертанием:

Группировка данных в раскрывающемся списке HTML.

Отличия HTML 4.01 от HTML 5

В HTML 5 добавлены 3 новых атрибута.

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

Нет.

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

Атрибуты событий

Элемент поддерживает «атрибуты событий».

HTML теги

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

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

Тег HTML .

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

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

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

Тег

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

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

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

Пример тега HTML

с тегом:
 

  <голова>
    Заголовок окна страницы
  
  <тело>
     с тегом:
 

  <голова>
    Заголовок окна страницы
  
  <тело>
    
Аэропорт отправления:

    <форма action="action_form.php" метод="получить">
      
      <список данных>
        
 Попробуй сам »
 В этом примере тег используется, поскольку нам нужно отправить информацию на сервер.
 Результат 
 Аэропорт отправления:
 Тег ?
 Общие свойства для изменения визуального веса/выделения/размера текста в теге 
:
  •  Свойство CSS color описывает цвет текстового содержимого и оформления текста.
  •  Свойство CSS background-color устанавливает цвет фона элемента.
 Стили макета текста для тега 
, на которые стоит обратить внимание:
  •  Свойство 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 с предыдущим элементом label.
 У нас есть три тега , вложенных в тег   , браузер пользователя автоматически сфокусируется на выбранном элементе при загрузке страницы.
 disabled 
 При добавлении к тегу    с элементом   на странице. Этот атрибут полезен для размещения тега    , пользователи должны выбрать ответ из раскрывающегося списка перед отправкой формы.
 size 
 Если ваш    автоматически выбирает первый  вложенный в него. Если вы хотите установить другой элемент в качестве опции по умолчанию, добавьте  выбранный атрибут  в нужный тег . Ниже я сделал второй вариант ответом по умолчанию.
 См. атрибут Pen HTML Select: selected от Кристины Перриконе (@hubspot) на CodePen.
  
 Добавить текст заполнителя в HTML select 
 Заполнитель предотвращает выбор элемента списка по умолчанию — вместо этого вы можете сделать отображаемый текст подсказкой, например «Выберите один…» и т. д.
 заполнитель, напишите текст заполнителя как  элемент и добавьте к этому элементу атрибуты  disabled  и  selected .
 См. Pen HTML Select: placeholder от Christina Perricone (@hubspot) на CodePen.
  
 Элементы выбора группы HTML 
 Вы также можете разделить элементы ответа на группы, что удобно для особенно больших раскрывающихся списков. Вложите теги   (option group) в ваш основной тег    вне тега   и связать его с этой формой, используя атрибут  формы , например:
 См.

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

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