Списки выбора и многострочный текст

Не все данные удобно вводить в однострочное поле. Когда вариантов много, а правильные ответы известны заранее, человеку проще выбрать из списка. А для отзыва или комментария нужно поле на несколько строк.

Выпадающий список

<select> создаёт выпадающий список, а каждый вариант заворачивают в <option>:

<select>
  <option>Москва</option>
  <option>Казань</option>
  <option>Новосибирск</option>
</select>

Щёлкните по списку — откроются варианты. Выбран первый, пока пользователь не выберет другой.

Значение и выбор по умолчанию

Атрибут value у <option> — то, что уйдёт на сервер. Человек видит понятный текст, а сервер получает короткий код. selected выбирает вариант заранее:

<label>
  Город
  <select name="city">
    <option value="msk">Москва</option>
    <option value="kzn" selected>Казань</option>
    <option value="nsk">Новосибирск</option>
  </select>
</label>

При отправке формы придёт city=kzn. Как и у любого поля, подпись делают через <label>.

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

Длинный список удобно разбить на группы тегом <optgroup>. Название группы задают атрибутом label, выбрать его нельзя:

<select name="drink">
  <optgroup label="Кофе">
    <option>Эспрессо</option>
    <option>Капучино</option>
  </optgroup>
  <optgroup label="Чай">
    <option>Зелёный</option>
    <option>Чёрный</option>
  </optgroup>
</select>

Несколько вариантов

Атрибут multiple разрешает выбрать несколько пунктов — с зажатой клавишей Ctrl (на Mac — Cmd). Список тогда показывается открытым, size задаёт число видимых строк:

<select name="toppings" multiple size="4">
  <option>Корица</option>
  <option>Сироп</option>
  <option>Сливки</option>
  <option>Шоколад</option>
</select>

Такой список неудобен на телефонах, поэтому для пары вариантов лучше подходят флажки.

Многострочный текст

<textarea> — поле на несколько строк. rows задаёт высоту в строках, cols — ширину в символах. В отличие от <input>, тег парный:

<label for="review">Ваш отзыв</label><br>
<textarea id="review" name="review" rows="4" cols="40"></textarea>

Потяните за уголок справа внизу — поле меняет размер.

Подсказки при вводе

<datalist> даёт полю список подсказок, но разрешает ввести и своё. Он связывается с полем через атрибут list:

<label>Любимый напиток <input list="drinks" name="drink"></label>
<datalist id="drinks">
  <option value="Капучино">
  <option value="Латте">
  <option value="Раф">
</datalist>

Частая ошибка

У <textarea> нет атрибута value: начальный текст пишут между тегами. И всё, что стоит между ними, — включая пробелы и переносы для красоты кода, — попадёт в поле:

<textarea rows="3">
    Перед этим текстом лишние пробелы, а после — пустая строка
</textarea>
<textarea rows="3">Этот — сразу с первой строки</textarea>

Закрывающий тег ставьте вплотную к тексту, а пустое поле пишите как <textarea></textarea> без пробелов внутри.