День 23 | HTML формы

Что такое HTML формы?

Формы — это способ собирать данные от пользователей. Через формы пользователи могут:

• Вводить текст
• Выбирать из списка
• Отмечать чекбоксы
• Загружать файлы
• Отправлять данные на сервер

Базовая структура формы

Форма начинается с тега <form>:

<form action="/submit" method="POST">
  <!-- Поля формы -->
  <button type="submit">Отправить</button>
</form>

Атрибуты формы:

• action — URL, куда отправляются данные
• method — метод отправки (GET или POST)
  • GET — данные в URL (для поиска, фильтров)
  • POST — данные в теле запроса (для регистрации, отправки сообщений)

Поле ввода текста (input)

Тег <input> создаёт поле ввода. Тип поля определяется атрибутом type:

Текстовое поле

<input type="text" name="username" placeholder="Введите имя">

Email

<input type="email" name="email" placeholder="email@example.com">

Браузер автоматически проверяет формат email.

Пароль

<input type="password" name="password">

Текст скрывается точками или звёздочками.

Телефон

<input type="tel" name="phone" placeholder="+7 (999) 123-45-67">

Число

<input type="number" name="age" min="18" max="100">

Дата

<input type="date" name="birthday">

Поиск

<input type="search" name="search" placeholder="Поиск...">

Специальный тип для поисковых полей. На мобильных может показывать кнопку очистки.

URL

<input type="url" name="website" placeholder="https://example.com">

Браузер проверяет формат URL.

Время

<input type="time" name="time">
<input type="datetime-local" name="datetime">

Чекбокс

<input type="checkbox" name="agree" id="agree">
<label for="agree">Я согласен с условиями</label>

Радио-кнопка

<input type="radio" name="gender" value="male" id="male">
<label for="male">Мужской</label>

<input type="radio" name="gender" value="female" id="female">
<label for="female">Женский</label>

Важно: У всех радио-кнопок одной группы должен быть одинаковый name, но разные value.

Textarea (многострочный текст)

<textarea name="message" rows="5" cols="50" placeholder="Ваше сообщение"></textarea>

Атрибуты:

• rows — количество видимых строк
• cols — ширина в символах (лучше задавать через CSS)

Select (выпадающий список)

<select name="country">
  <option value="">Выберите страну</option>
  <option value="ru">Россия</option>
  <option value="us">США</option>
  <option value="uk">Великобритания</option>
</select>

Label (подпись поля)

<label> связывает текст с полем ввода. При клике на label фокус переходит на поле.

Способ 1: Обёртка

<label>
  Имя:
  <input type="text" name="name">
</label>

Способ 2: Связь через for и id

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

Второй способ предпочтительнее — более гибкий для стилизации.

Важные атрибуты

required

<input type="text" name="name" required>

Поле обязательно для заполнения. Браузер не отправит форму, если поле пустое.

placeholder

<input type="text" placeholder="Введите имя">

Подсказка внутри поля (исчезает при вводе).

name

Имя поля. Используется при отправке формы для идентификации данных.

id

Уникальный идентификатор. Используется для связи с <label>.

value

<input type="text" name="name" value="Иван">

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

Кнопки

Submit (отправить)

<button type="submit">Отправить</button>
<!-- или -->
<input type="submit" value="Отправить">

Reset (сбросить)

<button type="reset">Сбросить</button>

Обычная кнопка

<button type="button">Кнопка</button>

Не отправляет форму, используется для JavaScript действий.

Полный пример формы

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

1. Создайте форму обратной связи с полями: имя, email, сообщение
2. Добавьте чекбокс "Согласен с условиями"
3. Создайте форму регистрации с полями: имя, email, пароль, подтверждение пароля
4. Используйте правильные типы input (email, password)
5. Свяжите все поля с label через for/id
6. Добавьте атрибут required для обязательных полей

Что дальше?

Отлично! Теперь вы знаете, как создавать HTML формы. В следующем уроке мы добавим валидацию форм через JavaScript, чтобы проверять данные перед отправкой.