Карта сайта

Урок 11: Дополнительные элементы форм в HTML

/Уроки по HTML/CSS/Урок 11: Дополнительные элементы форм в HTML
Урок 11: Дополнительные элементы форм в HTML
Автор: написал в рубрике Уроки по HTML/CSS. 0 Комментариев.

Мы продолжаем наш курс по изучению HTML и CSS. В предыдущих уроках мы разобрали базовые элементы форм: текстовые поля, чекбоксы, радио-кнопки и другие <input>. Сегодня углубимся в тему и изучим три важных элемента, которые сделают ваши формы более функциональными и удобными для пользователей: текстовые области (<textarea>), выпадающие списки (<select>) и кнопки (<button>). В конце урока вас ждут практические задачи и примеры кода.

Текстовые области <textarea>

Когда обычного текстового поля (<input type="text">) недостаточно, на помощь приходит <textarea>. Этот элемент позволяет пользователям вводить многострочный текст, например, комментарии, отзывы или сообщения.

Основы использования

  • Синтаксис: 
    <textarea rows="4" cols="50"></textarea>
    • rows — количество видимых строк.
    • cols — ширина области в символах.
  • Атрибуты:
    • placeholder — подсказка внутри поля.
    • maxlength — максимальное количество символов.
    • readonly или disabled — блокировка редактирования.

Пример кода

<label for="comment">Ваш комментарий:</label>
<textarea 
  id="comment" 
  name="comment" 
  rows="5" 
  cols="30" 
  placeholder="Напишите здесь..."
  maxlength="500"
></textarea>

Для стилизации <textarea> используйте CSS. Например, можно изменить шрифт, добавить границы или тень.

Выпадающие списки <select>

Элемент <select> создает список вариантов, из которых пользователь может выбрать один или несколько. Идеально подходит для экономии места на странице.

Структура:

  • <select> — контейнер для списка.
  • <option> — отдельный пункт.
  • <optgroup> — группа пунктов (для визуального разделения).

Пример простого списка

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

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

Добавьте атрибут multiple, чтобы разрешить выбор нескольких вариантов (удерживая Ctrl или Shift):

<select id="skills" name="skills" multiple>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
</select>

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

Используйте <optgroup>, чтобы объединить элементы:

<select id="car" name="car">
  <optgroup label="Немецкие">
    <option value="bmw">BMW</option>
    <option value="audi">Audi</option>
  </optgroup>
  <optgroup label="Японские">
    <option value="toyota">Toyota</option>
    <option value="honda">Honda</option>
  </optgroup>
</select>

Значение, которое отправится на сервер, определяется атрибутом value у <option>. Если он не указан, будет использоваться текст внутри тега.

Кнопки <button>

Кнопки это неотъемлемая часть любой формы. Хотя можно использовать <input type="submit">, элемент <button> дает больше гибкости.

Типы кнопок:

  • type="submit" — отправляет форму (по умолчанию).
  • type="reset" — очищает поля формы.
  • type="button" — обычная кнопка (для JavaScript).

Примеры

<!-- Кнопка отправки -->
<button type="submit">Отправить</button>

<!-- Кнопка сброса -->
<button type="reset">Очистить форму</button>

<!-- Кастомизированная кнопка -->
<button type="button" onclick="alert('Привет!')">Нажми меня</button>

Преимущества <button> перед <input>:

  • Можно добавлять вложенные элементы (например, иконки или <span>).
  • Легче стилизовать через CSS.

Практические задачи

Закрепим материал на практике! Решите задачи ниже, сверяясь с примерами.

Задача 1: Форма обратной связи

Создайте форму с полями:

  1. Имя (текстовое поле).
  2. Email (поле для email).
  3. Сообщение (<textarea> на 7 строк).
  4. Выпадающий список для выбора темы («Вопрос», «Предложение», «Жалоба»).
  5. Кнопка «Отправить».

Пример решения:

<form>
  <label for="name">Имя:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

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

  <label for="topic">Тема:</label>
  <select id="topic" name="topic">
    <option value="question">Вопрос</option>
    <option value="suggestion">Предложение</option>
    <option value="complaint">Жалоба</option>
  </select>

  <button type="submit">Отправить</button>
</form>

Задача 2: Множественный выбор

Создайте форму для выбора навыков (HTML, CSS, JavaScript) с возможностью отметить несколько вариантов.

Пример решения:

<form>
  <label for="skills">Ваши навыки:</label>
  <select id="skills" name="skills" multiple>
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
  </select>
  <button type="submit">Сохранить</button>
</form>

Сегодня вы научились:

  • Создавать многострочные текстовые поля через <textarea>.
  • Работать с выпадающими списками (<select>, <option>, <optgroup>).
  • Использовать гибкие кнопки <button> с разными типами.

Эти элементы помогут вам проектировать удобные и профессиональные формы. Поэкспериментируйте с атрибутами и не забывайте проверять код на валидность через валидатор W3C.

Полный курс «HTML/CSS для начинающих» доступен здесь: https://max-gabov.ru/html-css-dlya-nachinaushih. Переходите, чтобы освоить верстку от основ до продвинутых техник.