Выпадающие списки (select, option, optgroup)

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

Опубликовано 04.04.2025
Просмотры 34
Автор
Рек. время прохождения 8 минут
Упражнений 10
Комментарии 0
Тренажер HTML
Выпадающие списки — это неотъемлемый элемент веб-форм. Они позволяют пользователю выбрать один или несколько вариантов из предложенного перечня, экономя место на странице и упорядочивая данные. В этой серии заданий мы отработаем создание списков с помощью тегов <select>, <option> и <optgroup>. Вы научитесь не только создавать базовые списки, но и группировать опции для лучшей навигации, устанавливать значения по умолчанию и делать выбор обязательным. Эти навыки пригодятся при создании любых форм, будь то выбор страны, категории товара или настройка параметров в профиле. Пройдите эти упражнения, чтобы закрепить знания и уверенно использовать выпадающие списки в своих проектах.
Список тем

Создание простого выпадающего списка

id: 37849_html-select-1

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

CSS
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  padding: 20px;
  background-color: #f4f7f9;
  color: #333;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #555;
}

select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff;
  font-size: 16px;
  cursor: pointer;
  appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: right 10px top 50%;
  background-size: .65em auto;
}

select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

select:invalid {
  box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.25);
}
HTML
<label for="lang-select">Выберите язык:</label>

<input1 name="language" id="lang-select">
</input1>
Для создания выпадающего списка используется парный тег `<select>`. Он служит контейнером для всех пунктов списка. Не забудьте также добавить атрибуты `name` и `id` для правильной работы с формами и связки с элементом `<label>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Добавление пунктов в список

id: 37849_html-select-2

Теперь, когда у нас есть контейнер, нужно его наполнить. Добавьте три пункта (опции) в выпадающий список: 'Английский', 'Испанский' и 'Французский'.

CSS
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  padding: 20px;
  background-color: #f4f7f9;
  color: #333;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #555;
}

select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff;
  font-size: 16px;
  cursor: pointer;
  appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: right 10px top 50%;
  background-size: .65em auto;
}

select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

select:invalid {
  box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.25);
}
HTML
<label for="lang-select">Выберите язык:</label>

<select name="language" id="lang-select">
  <input1>Английский</input1>
  <input2>Испанский</input2>
  <input3>Французский</input3>
</select>
Каждый пункт в выпадающем списке создается с помощью парного тега `<option>`, который размещается внутри `<select>`. Текст между открывающим и закрывающим тегами будет виден пользователю.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Задание значения для каждого пункта

id: 37849_html-select-3

Текст, который видит пользователь, и значение, которое отправляется на сервер, могут отличаться. Добавьте атрибут `value` для каждого пункта, чтобы задать отправляемые значения: 'en', 'es' и 'fr' соответственно.

CSS
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  padding: 20px;
  background-color: #f4f7f9;
  color: #333;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #555;
}

select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff;
  font-size: 16px;
  cursor: pointer;
  appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: right 10px top 50%;
  background-size: .65em auto;
}

select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

select:invalid {
  box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.25);
}
HTML
<label for="lang-select">Выберите язык:</label>

<select name="language" id="lang-select">
  <option input1="en">Английский</option>
  <option input2="es">Испанский</option>
  <option input3="fr">Французский</option>
</select>
Для указания значения, которое будет отправлено на сервер, используется атрибут `value` у тега `<option>`. Например: `<option value="значение">Текст</option>`. Это очень важно для обработки данных форм.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Выбор пункта по умолчанию

id: 37849_html-select-4

Часто нужно, чтобы один из пунктов списка был выбран по умолчанию при загрузке страницы. Сделайте так, чтобы пункт 'Испанский' был выбран изначально.

CSS
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  padding: 20px;
  background-color: #f4f7f9;
  color: #333;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #555;
}

select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff;
  font-size: 16px;
  cursor: pointer;
  appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: right 10px top 50%;
  background-size: .65em auto;
}

select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

select:invalid {
  box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.25);
}
HTML
<label for="lang-select">Выберите язык:</label>

<select name="language" id="lang-select">
  <option value="en">Английский</option>
  <option value="es" <input1>>Испанский</option>
  <option value="fr">Французский</option>
</select>
Чтобы сделать пункт списка выбранным по умолчанию, добавьте к нужному тегу `<option>` булевый атрибут `selected`. Ему не нужно значение, достаточно простого присутствия.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Отключенный пункт-подсказка

id: 37849_html-select-5

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

CSS
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  padding: 20px;
  background-color: #f4f7f9;
  color: #333;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #555;
}

select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff;
  font-size: 16px;
  cursor: pointer;
  appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: right 10px top 50%;
  background-size: .65em auto;
}

select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

select:invalid {
  box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.25);
}
HTML
<label for="lang-select">Выберите язык:</label>

<select name="language" id="lang-select">
  <option value="" input1>Выберите язык</option>
  <option value="en">Английский</option>
  <option value="es">Испанский</option>
  <option value="fr">Французский</option>
</select>
Чтобы пункт нельзя было выбрать, используйте атрибут `disabled`. Чтобы он отображался по умолчанию, используйте `selected`. Эти два атрибута можно написать в одном теге через пробел в любом порядке.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Группировка пунктов

id: 37849_html-select-6

Для улучшения навигации по длинным спискам пункты можно объединять в группы. Сгруппируйте планеты 'Меркурий' и 'Венера' в группу под названием 'Ближайшие к Солнцу'.

CSS
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  padding: 20px;
  background-color: #f4f7f9;
  color: #333;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #555;
}

select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff;
  font-size: 16px;
  cursor: pointer;
  appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: right 10px top 50%;
  background-size: .65em auto;
}

select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

optgroup {
  font-weight: bold;
  font-style: italic;
}
option { 
  font-style: normal;
}
HTML
<label for="planets">Выберите планету:</label>
<select name="planets" id="planets">
  <input1 label="Ближайшие к Солнцу">
    <option value="mercury">Меркурий</option>
    <option value="venus">Венера</option>
  </input1>
  <option value="earth">Земля</option>
  <option value="mars">Марс</option>
</select>
Для создания группы используется тег `<optgroup>`. Он размещается внутри `<select>`, а теги `<option>` — уже внутри `<optgroup>`. Название группы задается через атрибут `label` у тега `<optgroup>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Создание нескольких групп

id: 37849_html-select-7

Давайте усложним задачу. У вас есть список отделов компании. Объедините их в две группы: 'Технический отдел' и 'Отдел продаж'. Вам нужно добавить теги групп и их названия.

CSS
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  padding: 20px;
  background-color: #f4f7f9;
  color: #333;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #555;
}

select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff;
  font-size: 16px;
  cursor: pointer;
  appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: right 10px top 50%;
  background-size: .65em auto;
}

select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

optgroup {
  font-weight: bold;
  font-style: italic;
}
option { 
  font-style: normal;
}
HTML
<label for="department">Выберите отдел:</label>
<select name="department" id="department">
  <input1 input2="Технический отдел">
    <option value="dev">Разработчики</option>
    <option value="qa">Тестировщики</option>
  </input1>
  <optgroup label="Отдел продаж">
    <option value="sales_manager">Менеджеры по продажам</option>
    <option value="support">Поддержка клиентов</option>
  </optgroup>
</select>
Используйте тег `<optgroup>` для каждой группы и не забудьте добавить атрибут `label` для указания названия группы.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Отключение целой группы

id: 37849_html-select-8

Иногда нужно временно отключить целую группу опций, например, если товары закончились. Сделайте так, чтобы все размеры из группы 'Большие размеры' были недоступны для выбора.

CSS
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  padding: 20px;
  background-color: #f4f7f9;
  color: #333;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #555;
}

select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff;
  font-size: 16px;
  cursor: pointer;
  appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: right 10px top 50%;
  background-size: .65em auto;
}

select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

optgroup {
  font-weight: bold;
  font-style: italic;
}
option { 
  font-style: normal;
}
HTML
<label for="size">Выберите размер:</label>
<select name="size" id="size">
  <optgroup label="Стандартные размеры">
    <option value="S">S</option>
    <option value="M">M</option>
  </optgroup>
  <optgroup label="Большие размеры" input1>
    <option value="L">L</option>
    <option value="XL">XL</option>
  </optgroup>
</select>
Как и для отдельного тега `<option>`, для тега `<optgroup>` можно использовать атрибут `disabled`. Он сделает все вложенные опции неактивными.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Обязательный выбор

id: 37849_html-select-9

Сделайте выбор города обязательным для отправки формы. Если пользователь не выберет город (оставит пункт '-- Пожалуйста, выберите --'), форма не должна отправиться.

CSS
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  padding: 20px;
  background-color: #f4f7f9;
  color: #333;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #555;
}

select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff;
  font-size: 16px;
  cursor: pointer;
  appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  background-position: right 10px top 50%;
  background-size: .65em auto;
}

select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

select:required:invalid {
  border-color: #e53e3e;
  box-shadow: 0 0 0 2px rgba(229, 62, 62, 0.25);
}
HTML
<form>
  <label for="city">Выберите ваш город:</label>
  <select name="city" id="city" input1>
    <option value="">-- Пожалуйста, выберите --</option>
    <option value="msk">Москва</option>
    <option value="spb">Санкт-Петербург</option>
    <option value="ekb">Екатеринбург</option>
  </select>
</form>
Чтобы сделать выбор в выпадающем списке обязательным, добавьте булевый атрибут `required` к тегу `<select>`. Это стандартный способ валидации форм в HTML5.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

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

id: 37849_html-select-10

Стандартный выпадающий список позволяет выбрать только один пункт. Измените его так, чтобы пользователь мог выбрать несколько любимых жанров музыки, зажав клавишу Ctrl (или Cmd на Mac).

CSS
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  padding: 20px;
  background-color: #f4f7f9;
  color: #333;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #555;
}

select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff;
  font-size: 16px;
}

select[multiple] {
  height: 120px;
}

select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
HTML
<label for="music">Выберите любимые жанры:</label>
<select name="music" id="music" input1>
  <option value="rock">Рок</option>
  <option value="jazz">Джаз</option>
  <option value="pop">Поп</option>
  <option value="classic">Классика</option>
  <option value="electronic">Электроника</option>
</select>
Для того чтобы разрешить выбор нескольких опций, добавьте булевый атрибут `multiple` к тегу `<select>`. Визуально список изменится, показывая несколько пунктов одновременно.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру