Select, textarea и валидация

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

<select> — выпадающий список, <textarea> — многострочное поле, а атрибуты вроде required проверяют ввод ещё до отправки.

Выпадающий список — <select>

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

<label for="city">Город:</label>
<select id="city" name="city">
  <option value="msk">Москва</option>
  <option value="spb">Санкт-Петербург</option>
  <option value="kzn">Казань</option>
</select>

Атрибут value хранит то, что отправится на сервер, а текст между тегами — то, что видит пользователь.

Многострочное поле — <textarea>

Поле <input type="text"> — это одна строка. Для длинного текста (комментарий, сообщение) есть <textarea> — парный тег с большой областью ввода:

<label for="msg">Сообщение:</label>
<textarea id="msg" name="message" rows="4"></textarea>

Атрибут rows задаёт высоту в строках. Учтите: <textarea> закрывается обязательно, даже если пуст.

Кнопка — <button>

Кнопка отправки формы — <button type="submit">. Текст кнопки пишут между тегами, поэтому на ней легко разместить что угодно:

<button type="submit">Отправить заявку</button>

Базовая валидация

Браузер умеет сам проверять поля ещё до отправки — нужно лишь добавить атрибуты:

required — поле обязательно; пустую форму браузер не отправит;
placeholder — серая подсказка внутри пустого поля (это не значение!);
pattern — шаблон-маска, которому должно соответствовать значение.

<input type="text" name="phone"
       placeholder="Введите телефон"
       pattern="[0-9]{10}" required>

Здесь поле обязательное, показывает подсказку и принимает ровно 10 цифр. Если условия не выполнены, браузер сам покажет сообщение и не отправит форму.

Важно: проверка в браузере — это удобство, а не защита. Серьёзную проверку обязательно дублируют на сервере, ведь данные можно подделать.

Атрибут	Что делает
`required`	поле обязательно для заполнения
`placeholder`	подсказка внутри пустого поля
`pattern`	шаблон допустимого значения

Почему проверке в браузере нельзя доверять

Встроенная валидация — это удобство для честного пользователя: она мгновенно подсказывает «вы забыли заполнить поле» или «неверный формат», не дожидаясь ответа сервера. Но это не защита. Любой человек может отключить проверку в браузере, отредактировать страницу или отправить данные в обход формы. Поэтому всё, что критично (уникальность логина, корректность пароля, безопасность), обязательно проверяют ещё раз на сервере.

Запомните формулировку: проверка в браузере — для удобства, проверка на сервере — для надёжности. Сейчас, изучая HTML, вы делаете первую, удобную часть. Серверную проверку добавите, когда дойдёте до программирования backend. А пока хорошая привычка — расставлять required и подходящий type у всех полей: это бесплатно и сразу делает форму приятнее.

Итог

<select> с <option> — выпадающий список; <textarea> — многострочное поле.
Кнопку отправки задаёт <button type="submit">.
required, placeholder и pattern дают базовую проверку; настоящую защиту делают на сервере.