Как сделать раскрывающийся список в html: Тег HTML выпадающий список

alexxlab

Содержание

Тег HTML выпадающий список

Рейтинг: 4 из 5, голосов 44

28 декабря 2019 г.

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

С помощью атрибута multiple можно создать список с выбором нескольких значений (список с множественным выбором).

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

Выпадающий список в HTML является одним из элементов форм. Подробно о создании форм описано в статье: Все про формы и поля в HTML. Создание и работа с формами.

При отправке формы, на сервер будет отправлена переменная, в качестве названия имеющая имя списка select (значение атрибута name), содержащая значение выбранного пункта списка. Если в выбранном пункте списка <option> есть атрибут value, то значением считается его содержимое, в противном случае значением считается содержимое тега <option>.

Синтаксис

<select>элементы списка</select>

Примеры использования выпадающего списка <select> в HTML коде

Ниже представлены 4 основных варианта выпадающих списков HTML.

Простой HTML выпадающий список

СинийЗеленыйЖелтыйКрасныйОранжевыйЧерный

HTML код простого выпадающего списка

<select name="user_profile_color_1">
<option value="1">Синий</option>
<option value="2">Зеленый</option>
<option value="3">Желтый</option>
<option value="4">Красный</option>
<option value="5">Оранжевый</option>
<option value="6">Черный</option>
</select>

Выпадающий список с выбором нескольких значений

Добавить списку возможность множественного выбора (выбора одновременно нескольких значений) можно используя атрибут multiple. Количество одновременно выводимых на экран пунктов списка с множественным выбором регулируется с помощью атрибута size.

Атрибут name такого списка должен заканчиваться символами «[]», например, name=»cars[]».

NissanToyotaBMWWolksvagenSkodaMercedes-Benz

HTML код выпадающего списка с выбором нескольких значений

<select name="user_cars[]" multiple="multiple" size="4">
<option value="1">Nissan</option>
<option value="2">Toyota</option>
<option value="3">BMW</option>
<option value="4">Wolksvagen</option>
<option value="5">Skoda</option>
<option value="6">Mercedes-Benz</option>
</select>

Раскрывающийся список с группами пунктов

Пункты в HTML списке select можно группировать с помощью тега <optgroup>. Название группы не доступно для выбора, служит для удобства пользователей.

МоскваСанкт-ПетербургНовосибирскКиевХарьковЛьвовМинскБобруйскГомель

HTML код раскрывающегося списка с группами пунктов

<select name="user_city">
<optgroup label="Россия">
<option value="1">Москва</option>
<option value="2">Санкт-Петербург</option>
<option value="3">Новосибирск</option>
</optgroup>
<optgroup label="Украина">
<option value="4">Киев</option>
<option value="5">Харьков</option>
<option value="6">Львов</option>
</optgroup>
<optgroup label="Беларусь">
<option value="7">Минск</option>
<option value="8">Бобруйск</option>
<option value="9">Гомель</option>
</optgroup>
</select>

HTML список обязательный для заполнения (выбора)

Для того, чтобы создать список select, обязательный для заполнения (<select> список, где пользователь должен обязательно выбрать значение) нужно использовать атрибут required, а также добавить внутрь списка первым пунктом <option> с пустым значением атрибута value.

Выберите значениеСинийЗеленыйЖелтыйКрасныйОранжевыйЧерный

HTML код выпадающего списка обязательного для выбора (заполнения)

<select name="user_profile_color_2" required="required">
<option value="">Выберите значение</option>
<option value="1">Синий</option>
<option value="2">Зеленый</option>
<option value="3">Желтый</option>
<option value="4">Красный</option>
<option value="5">Оранжевый</option>
<option value="6">Черный</option>
</select>

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

Тег
<select> Да Да Да Да Да

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

Атрибут Значения Описание
autofocus не указывается / autofocus

Логический атрибут. Если указан, при загрузке документа фокус будет переведен на список.
disabled не указывается / disabled

Логический атрибут. Если указан, делает список неактивным.

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

Указывает на форму, к которой относится список. Используется, если список <select> находится вне HTML кода формы.

Если список находится внутри тега <form>, то использовать атрибут form не нужно, список по умолчанию привязан к форме, внутри которой находится.
multiple не указывается / multiple

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

size.
name текст

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

Логический атрибут. Если указан, список будет определен как обязательный для заполнения (обязательный для выбора). Форма не будет отправлена на сервер, если в таком списке не будет выбрано ни одно значение.

Заполнение контролируется браузером. При попытке отправить форму с незаполненным обязательным списком браузеры обычно выводят на экран ошибку заполнения.
size число

Количество пунктов списка, одновременно выводимых на экран. Для выпадающего списка используется значение 1. Это значение по умолчанию.

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

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

by Lebedev

Выпадающий список HTML, как сделать раскрывающийся список

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

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

Создание раскрывающегося блока, списка

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

Как это работает

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

Вам нужно:

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

Таким образом, у Вас должно получиться, например:

Текст описания…

Таблица размеров

Россий-
ский размер

Между-
народ-
ный размер

Обхват груди (см)

Обхват талии (см)

Обхват бедер (см)

Длина рукава (см)

44

M

88

70

96

60/62

46

M

92

74

100

60/62

48

L

96

78

104

60/62

50

L

100

82

108

61/63

Текст описания.

..

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

Текст описания…

Таблица размеров (нажмите для действия)

Россий-
ский размер

Между-
народ-
ный размер

Обхват груди (см)

Обхват талии (см)

Обхват бедер (см)

Длина рукава (см)

44

M

88

70

96

60/62

46

M

92

74

100

60/62

48

L

96

78

104

60/62

50

L

100

82

108

61/63

Текст описания. ..

Как сделать раскрывающийся список/блок в редакторе

Конструкция в виде HTML для формирования данной функции (развертывание/сертывание списка по клику):

<div>
<div>Заголовок блока</div>
<div>Разворачивающийся блок</div>
 
</div>

После того, как вы уже разместили необходимую информацию или список, которые будут раскрываться по клику в тексте раздела, необходимо перейти в редактирование HTML-кода страницы. Для этого, в панели инструментов визуального редактора выберите инструмент «Исходный код»

Для справки:

Теги HTML, которыми размечается документ для корректного отображения в браузере.

  • Абзац: <p>…</p>
  • Таблица: <table>…</table>
  • Список: <ul>…</ul>
  • Заголовок: <h2>….</h2> // (h3,h4,h5…)

Конечно, тегов HTML гораздо больше, однако, скорее всего, вы встретите в основном те, что указаны.

HTML-код

 Описание

<p>Текст описания….. </p>

<p><strong>Таблица размеров</strong></p>

<table>
<tbody>
<tr>
<td>

———-//———-//———-//———-

</td>
</tr>
</tbody>
</table>

<p>Текст описания….. </p>

— текст до блока, который будем раскрывать

— заголовок раскрывающегося блока — ссылка-действие

— начало таблицы


— содержимое таблицы

— конец таблицы

— текст после выпадающего блока, который будем раскрывать

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

HTML-код Описание

<p>Текст описания. …. </p>

<div>

<div>
    <p><strong>Таблица размеров</strong></p>
</div>

<div>
    <table>
    <tbody>
    <tr>
    <td>

    ———-//———-//———-//———-

    </td>
    </tr>
    </tbody>
    </table>
</div>

</div>

<p>Текст описания….. </p>

— текст до блока, который будем раскрывать

— начало раскрывающегося блока

— указание на заголовок блока — ссылка (начало)
—     заголовок блока — ссылка-действие
— указание на заголовок блока — ссылка (конец)

— начало блока, который раскрывается по ссылке
—     начало таблицы

—     содержимое таблицы

—     конец таблицы
— конец блока, который раскрывается по ссылке

— конец раскрывающегося блока

— текст после выпадающего блока, который будем раскрывать

Таким образом, расставив в HTML необходимый код, Вы сможете создать раскрывающийся блок или список из примера выше.

После того, как код вставлен в нужные места, нажмите кнопку «Обновить», затем сохраните страницу.

Примеры раскрывающихся списков

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

Пример 1. (Разворачивающийся список)

Заголовок выпадающего списка

  • Первый пункт выпадающего списка с длинным описанием
  • Второй пункт выпадающего списка с длинным описанием
  • Третий пункт выпадающего списка, без описания
  • Четвертый выпадающего пункт списка

Пример 2. (Таблица)

Заголовок таблицы

Название Значение 1 Значение 2 Значение 3
Название пункта 1 0 1 2
Название пункта 2 3 4 5

Пример 3. (Картинка + текст)

Заголовок блока

Текст описания……………………

Атрибут размера HTML select

❮ Тег HTML




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

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

Атрибут size указывает количество видимых параметров в раскрывающемся списке.

Если значение атрибута размера больше 1, но меньше общее количество опций в списке, браузер добавит полосу прокрутки к указать, что есть дополнительные параметры для просмотра.

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

Атрибут
размер Да Да Да Да Да

Примечание: В Chrome и Safari этот атрибут может не работать, т. к. ожидается для size="2" и размер = "3" .

Синтаксис


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Практическое руководство
Учебное пособие по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3. CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

900 95 лучших примеров Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

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

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Маленький тег HTML

❮ Предыдущий Полный справочник HTML Далее ❯


Пример

Определить меньший текст:

Это обычный текст.


Это меньший текст text.

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

Другие примеры «Попробуйте сами» ниже.

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

Тег определяет меньший текст (например, авторские права и другие комментарии).

Совет: Этот тег не устарел, но его можно сделать богаче. (или тот же) эффект с помощью CSS.

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

Элемент
<маленький> Да Да Да Да Да

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

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

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

Тег также поддерживает атрибуты событий в HTML.

Дополнительные примеры

Пример

Используйте CSS для определения меньшего текста:





Это обычный текст.


Это текст меньшего размера.


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

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

Учебник HTML: Форматирование текста HTML

Ссылка HTML DOM: Малый объект 023 <маленький> со следующими значениями по умолчанию:

Пример

small {
 размер шрифта: меньше;
}

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

❮ Предыдущий Полный справочник HTML Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

900 95 лучших примеров Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

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

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