Урок 10: Формы в HTML

Наступил десятый урок и сегодня мы погрузимся в одну из самых важных тем для любого веб-разработчика это формы в HTML. Формы это мост между пользователем и вашим сайтом. Без них невозможны регистрация, авторизация, поиск, опросы и множество других интерактивных элементов. В этом уроке мы разберем, как создавать формы, работать с полями ввода, чекбоксами и радиокнопками.

Создание форм <form>

Форма в HTML начинается с тега <form>. Это контейнер для всех элементов, которые будут собирать данные от пользователя. У формы есть два ключевых атрибута:

• action — указывает URL, куда отправляются данные формы.
• method — определяет метод отправки данных (GET или POST).

Пример формы:

<form action="/submit" method="POST">
  <!-- Здесь будут поля ввода -->
</form>

Пояснение:

• Если method="GET", данные формы добавляются в URL (видимы пользователю).
• Если method="POST", данные отправляются скрыто (используется для паролей, личных данных).

Поля ввода <input>

Тег <input>основа любой формы. Его тип определяется атрибутом type. Рассмотрим основные варианты.

1. Текстовое поле (type="text")

Используется для ввода текста: имени, email, комментариев.

Пример:

<label for="username">Имя пользователя:</label>
<input type="text" id="username" name="username" placeholder="Введите имя">

Атрибуты:

• id — уникальный идентификатор для связи с <label>.
• name — имя поля, которое будет отправлено на сервер.
• placeholder — подсказка внутри поля.

2. Поле для пароля (type="password")

Скрывает вводимые символы (точками или звездочками).

Пример:

<label for="password">Пароль:</label>
<input type="password" id="password" name="password">

3. Кнопки (type="button", submit, reset")

• submit — отправляет форму.
• reset — очищает все поля формы.
• button — обычная кнопка (часто используется с JavaScript).

Пример:

<input type="submit" value="Отправить">
<input type="reset" value="Очистить">
<input type="button" value="Просто кнопка">

Чекбоксы и радиокнопки

1. Чекбоксы (type="checkbox")

Позволяют выбрать несколько вариантов из списка.

Пример:

<p>Выберите интересы:</p>
<label>
  <input type="checkbox" name="interests" value="sport"> Спорт
</label>
<label>
  <input type="checkbox" name="interests" value="music"> Музыка
</label>

Важно:

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

2. Радиокнопки (type="radio")

Позволяют выбрать только один вариант из группы.

Пример:

<p>Выберите пол:</p>
<label>
  <input type="radio" name="gender" value="male"> Мужской
</label>
<label>
  <input type="radio" name="gender" value="female"> Женский
</label>

Правила:

• У всех радиокнопок в группе одинаковый name.
• Атрибут value должен быть уникальным для каждого варианта.

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

Задача 1: Форма регистрации

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

• Имя (текст),
• Email (текст),
• Пароль (пароль),
• Кнопка «Зарегистрироваться».

Решение:

<form action="/register" method="POST">
  <label for="name">Имя:</label>
  <input type="text" id="name" name="name"><br>

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

  <label for="password">Пароль:</label>
  <input type="password" id="password" name="password"><br>

  <input type="submit" value="Зарегистрироваться">
</form>

Задача 2: Опросник

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

1. Любите ли вы путешествовать? (чекбокс Да/Нет).
2. Выберите ваш возрастной диапазон: 18-25, 26-35, 36+ (радиокнопки).

Решение:

<form action="/survey" method="POST">
  <p>Любите ли вы путешествовать?</p>
  <label>
    <input type="checkbox" name="travel" value="yes"> Да
  </label>
  <label>
    <input type="checkbox" name="travel" value="no"> Нет
  </label>

  <p>Ваш возраст:</p>
  <label>
    <input type="radio" name="age" value="18-25"> 18-25
  </label>
  <label>
    <input type="radio" name="age" value="26-35"> 26-35
  </label>
  <label>
    <input type="radio" name="age" value="36+"> 36+
  </label><br>

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

Сегодня мы разобрали основы работы с формами в HTML. Вы научились создавать контейнер <form>, добавлять текстовые поля, пароли, кнопки, чекбоксы и радиокнопки.

Советы:

• Всегда связывайте <label> с полями ввода через id, это улучшает доступность.
• Используйте placeholder, чтобы подсказать пользователю, какие данные вводить.

Хотите продолжить обучение? Переходите к полному курсу по HTML и CSS для начинающих, где вас ждут еще 20 уроков, практические задания и поддержка.