select и textarea

<select> создаёт выпадающий список для выбора из предложенных вариантов. <textarea> -- многострочное текстовое поле.

Зачем нужно

<select> подходит когда вариантов выбора фиксированное количество (страна, категория, роль). <textarea> -- для произвольного многострочного текста (комментарий, описание, сообщение). Оба элемента -- стандартные части форм с встроенной доступностью.

Где используется

  • Выбор из списка (страна, город, категория)
  • Комментарии и отзывы
  • Формы обратной связи
  • Редакторы контента

Предпосылки

<select> -- выпадающий список

Базовый пример

<label for="country">Страна:</label>
<select id="country" name="country" required>
  <option value="">-- Выберите страну --</option>
  <option value="ru">Россия</option>
  <option value="ua">Украина</option>
  <option value="by">Беларусь</option>
  <option value="kz">Казахстан</option>
</select>

<option> -- пункт списка

<option value="ru">Россия</option>
<!--
  value="ru"  -- значение, отправляемое на сервер
  "Россия"    -- текст, видимый пользователю
-->

<!-- Если value не указан, отправляется текст -->
<option>Россия</option>  <!-- отправит "Россия" -->

<!-- Выбранный по умолчанию -->
<option value="ru" selected>Россия</option>

<!-- Заблокированный -->
<option value="other" disabled>Недоступно</option>

<optgroup> -- группировка

<label for="lang">Язык программирования:</label>
<select id="lang" name="language">
  <optgroup label="Frontend">
    <option value="js">JavaScript</option>
    <option value="ts">TypeScript</option>
  </optgroup>
  <optgroup label="Backend">
    <option value="py">Python</option>
    <option value="go">Go</option>
    <option value="rs">Rust</option>
  </optgroup>
  <optgroup label="Мобильные" disabled>
    <option value="swift">Swift</option>
    <option value="kotlin">Kotlin</option>
  </optgroup>
</select>

Множественный выбор (multiple)

<label for="skills">Навыки (зажмите Ctrl для множественного выбора):</label>
<select id="skills" name="skills" multiple size="6">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="react">React</option>
  <option value="node">Node.js</option>
  <option value="sql">SQL</option>
</select>

Примечание: multiple select имеет плохой UX -- пользователи не знают про Ctrl+Click. Для множественного выбора лучше использовать группу чекбоксов.

Атрибуты <select>

Атрибут Описание
name Имя поля (ключ при отправке)
required Обязательный выбор
disabled Заблокирован
multiple Множественный выбор
size Количество видимых строк
autofocus Фокус при загрузке
form Привязка к форме по ID
autocomplete Автозаполнение

Пустой первый option как placeholder

<select name="city" required>
  <!-- Пустой value + required = пользователь обязан выбрать -->
  <option value="" disabled selected>Выберите город</option>
  <option value="msk">Москва</option>
  <option value="spb">Санкт-Петербург</option>
</select>

<textarea> -- многострочное поле

Базовый пример

<label for="message">Сообщение:</label>
<textarea id="message" name="message"
          rows="5" cols="40"
          placeholder="Введите ваше сообщение..."
          required></textarea>

Атрибуты <textarea>

Атрибут Описание
name Имя поля
rows Количество видимых строк
cols Количество видимых столбцов
placeholder Подсказка
required Обязательное поле
disabled Заблокировано
readonly Только чтение
minlength Минимальная длина
maxlength Максимальная длина
wrap soft / hard / off
autofocus Фокус при загрузке
spellcheck Проверка орфографии
autocomplete Автозаполнение

Управление изменением размера

<style>
  /* Запретить ресайз */
  .no-resize { resize: none; }

  /* Только вертикально */
  .v-resize { resize: vertical; }

  /* Только горизонтально */
  .h-resize { resize: horizontal; }

  /* Оба направления (по умолчанию) */
  .both-resize { resize: both; }
</style>

<textarea class="v-resize" rows="5">Только вертикальный ресайз</textarea>

Счётчик символов

<label for="bio">О себе:</label>
<textarea id="bio" name="bio" maxlength="200" rows="4"></textarea>
<p class="counter"><span id="count">0</span>/200</p>

<script>
  const bio = document.getElementById('bio');
  const count = document.getElementById('count');
  bio.addEventListener('input', () => {
    count.textContent = bio.value.length;
  });
</script>

Автоматическая высота

<textarea id="autosize" rows="1" placeholder="Авто-расширение..."></textarea>

<script>
  const textarea = document.getElementById('autosize');
  textarea.addEventListener('input', () => {
    textarea.style.height = 'auto';
    textarea.style.height = textarea.scrollHeight + 'px';
  });
</script>

<style>
  #autosize {
    resize: none;
    overflow: hidden;
    min-height: 2rem;
  }
</style>

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

<!-- У textarea значение -- это содержимое тега, НЕ атрибут value -->
<textarea name="comment">Текст по умолчанию</textarea>

<!-- НЕ так: -->
<textarea name="comment" value="Не работает"></textarea>

Стилизация

<style>
  select,
  textarea {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    font-family: inherit;  /* Важно! textarea по умолчанию monospace */
    line-height: 1.5;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: white;
  }

  select:focus,
  textarea:focus {
    outline: none;
    border-color: #0066cc;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.25);
  }

  /* Кастомная стрелка select */
  select {
    appearance: none;
    background-image: url("data:image/svg+xml,...");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.5rem;
  }
</style>

Частые ошибки

Ошибка Почему плохо Как правильно
multiple select для UX Плохой UX, пользователи не знают Ctrl+Click Группа чекбоксов
Нет пустого <option> с required Первый вариант выбран по умолчанию <option value="">Выберите...</option>
textarea без font-family: inherit Моноширинный шрифт по умолчанию font-family: inherit в CSS
value атрибут на <textarea> Не работает Текст между тегами
Нет resize контроля textarea растягивается бесконечно resize: vertical
cols и rows без CSS Размер непредсказуем Используй CSS width/height

Практика

  1. Создай <select> с <optgroup> для выбора категории товара
  2. Создай <textarea> с счётчиком символов и maxlength
  3. Создай select с пустым placeholder и required -- проверь валидацию
  4. Стилизуй select и textarea: убери дефолтные стили, добавь focus-состояние
  5. Реализуй auto-resize для textarea

Связанные темы

Ресурсы