Формы и Ввод Данных

С возвращением.

В предыдущем уроке ты научился создавать таблицы для структурированных данных.

Теперь переходим к формам.

Формы — это место, где пользователи наконец отвечают твоему сайту.

Они могут написать своё имя.

Отправить сообщение.

Выбрать вариант.

Нажать кнопку.

Короче говоря, формы превращают статическую страницу в разговор.

А иногда — в хаос.

Но вежливый хаос.

Что Ты Изучишь

В этом уроке ты узнаешь:

• что такое HTML-формы;
• как использовать элемент form;
• как создавать текстовые поля;
• как использовать label;
• почему атрибут name важен;
• как создавать кнопки;
• как использовать textarea;
• как создавать select menu;
• как использовать required;
• частые ошибки с формами.

Что Такое Форма?

Форма собирает информацию от пользователя.

Примеры:

• контактные формы;
• login forms;
• registration forms;
• поисковые поля;
• подписка на newsletter;
• feedback forms;
• order forms.

Форма обычно содержит поля и кнопку.

Пример:

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

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

Это очень маленькая форма.

Но она уже имеет структуру.

Как маленький офис с одним столом и одной кнопкой.

Элемент form

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

<form>
  ...
</form>

Всё внутри принадлежит форме.

Inputs.

Labels.

Buttons.

Text areas.

Select menus.

Элемент form — это контейнер.

Он говорит:

Эта группа элементов работает вместе, чтобы собрать информацию.

Очень официально.

Почти как документы.

Но с меньшим количеством печатей.

Текстовые Поля

Текстовое поле позволяет пользователю ввести одну строку текста.

Пример:

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

type="text" означает, что это обычное текстовое поле.

Используй его для:

• имён;
• usernames;
• коротких сообщений;
• городов;
• простых ответов.

Пример:

<form>
  <label for="username">Username</label>
  <input id="username" name="username" type="text">
</form>

Пользователь может писать внутри поля.

Сайт слушает.

Хоть раз.

Label

Label описывает input.

Пример:

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

Атрибут for должен соответствовать id input.

Здесь:

<label for="email">
<input id="email">

Оба используют email.

Это соединяет label с input.

Почему это полезно?

• пользователи понимают, что писать;
• screen readers могут объяснить поле;
• клик по label фокусирует input;
• форма становится доступнее.

Форма без label — как дверь без таблички.

Возможно, работает.

Но никто не понимает, что происходит.

Атрибут name

Атрибут name даёт input название, когда форма отправляется.

Пример:

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

Без name поле может не отправиться правильно.

Это важно.

Пример:

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

id соединяет input с label.

name идентифицирует данные.

Это не одно и то же.

HTML любит детали.

Иногда слишком.

Placeholder

Placeholder показывает временный текст внутри input.

Пример:

<input type="text" name="name" placeholder="Введи своё имя">

Он может помочь пользователю понять, что писать.

Но не используй placeholder вместо label.

Плохо:

<input type="email" placeholder="Email">

Лучше:

<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="you@example.com">

Placeholder исчезает, когда пользователь начинает писать.

Label остаётся.

Labels верные.

Placeholders драматичные и исчезают.

Email Input

Для email-адресов используй type="email":

<input type="email" name="email">

Пример:

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

Браузер может проверить, ввёл ли пользователь что-то похожее на email.

Не идеально.

Но полезно.

HTML даёт маленькую помощь.

Не чудо.

Маленькую помощь.

Password Input

Для паролей используй type="password":

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

Браузер скрывает символы.

Пример:

<label for="password">Password</label>
<input id="password" name="password" type="password">

Это полезно для login forms.

Не используй обычные текстовые поля для паролей.

Это не “просто”.

Это проблема в шляпе.

Обязательные Поля

Можно сделать поле обязательным:

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

Браузер не отправит форму, если поле пустое.

Пример:

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

Используй required для важных полей.

Но не делай каждое поле обязательным.

Никто не любит форму, которая просит историю жизни только для того, чтобы отправить “привет”.

Textarea

Для длинных сообщений используй textarea.

Пример:

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

Используй textarea для:

• контактных сообщений;
• комментариев;
• описаний;
• feedback;
• длинных ответов.

Пример:

<textarea id="message" name="message" rows="5"></textarea>

Атрибут rows контролирует видимую высоту.

Не эмоциональную глубину.

К сожалению.

Select Menu

Select menu позволяет пользователю выбрать один вариант.

Пример:

<label for="course">Выбери курс</label>
<select id="course" name="course">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="javascript">JavaScript</option>
</select>

select — это меню.

Каждый option — это один вариант.

value — это значение, которое отправляется вместе с формой.

Это полезно, когда пользователь должен выбрать из фиксированного списка.

Очень цивилизованно.

Без хаоса клавиатуры.

Кнопки

Форма обычно имеет кнопку.

Пример:

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

type="submit" означает, что кнопка отправляет форму.

Пример:

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

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

Также можно использовать:

<button type="reset">Reset</button>

Но осторожно.

Reset button может стереть всё, что пользователь ввёл.

Это быстрый способ стать непопулярным.

action и method

Формы могут иметь action и method.

Пример:

<form action="/contact" method="post">
  ...
</form>

action говорит, куда идут данные формы.

method говорит, как они отправляются.

Распространённые методы:

• get;
• post.

Пока что мы фокусируемся на HTML-структуре.

Backend-обработка придёт позже.

HTML строит форму.

Сервер занимается сообщением.

Как рецепция и офис.

Создай Контактную Форму

Создай файл:

touch form.html

Добавь это:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Контактная Форма</title>
</head>
<body>
  <h1>Связаться со мной</h1>

  <p>Используй эту форму, чтобы отправить простое сообщение.</p>

  <form action="#" method="post">
    <label for="name">Имя</label>
    <input id="name" name="name" type="text" required>

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

    <label for="topic">Тема</label>
    <select id="topic" name="topic">
      <option value="question">Вопрос</option>
      <option value="project">Проект</option>
      <option value="feedback">Отзыв</option>
    </select>

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

    <button type="submit">Отправить Сообщение</button>
  </form>
</body>
</html>

Открой её в браузере.

Она ещё не будет отправлять настоящий email.

Для этого нужен backend или form service.

Но HTML-структура правильная.

Один шаг за раз.

Не нужно строить Рим, Stripe и CRM за один послеобеденный период.

Частые Ошибки

Inputs без labels

Плохо:

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

Лучше:

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

Labels важны.

Используй их.

Отсутствующий name

Плохо:

<input id="email" type="email">

Лучше:

<input id="email" name="email" type="email">

Без name данные могут не отправиться правильно.

Text input для всего

Не идеально:

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

Лучше для длинных сообщений:

<textarea name="message"></textarea>

Используй правильный элемент для задачи.

Не используй ложку, чтобы рубить дерево.

Практика

Создай файл:

signup.html

Построй signup form с:

• одним h1;
• одним абзацем;
• name input;
• email input;
• password input;
• course select menu;
• message textarea;
• submit button;
• labels для каждого поля;
• required на важных полях.

Без CSS.

Без JavaScript.

Только HTML.

Мини-Задание

Создай feedback form.

Она должна содержать:

• имя;
• email;
• rating select menu;
• message textarea;
• submit button;
• полезные labels;
• placeholders там, где они помогают;
• required fields только там, где действительно нужно.

Держи форму простой.

Хорошая форма спрашивает то, что ей нужно.

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

Итог

Сегодня ты узнал, что:

• формы собирают user input;
• form группирует элементы формы;
• input создаёт разные типы полей;
• label описывает поля и улучшает доступность;
• id соединяет input с label;
• name идентифицирует отправленные данные;
• placeholder даёт временные подсказки;
• required делает поле обязательным;
• textarea нужен для длинного текста;
• select и option создают dropdown menus;
• button type="submit" отправляет форму;
• action и method описывают, куда и как отправляются данные.

Формы мощные.

Они позволяют пользователям взаимодействовать со страницей.

Но строй их внимательно.

Потому что формы — это место, где сайты перестают говорить и начинают слушать.

Следующий Урок

В следующем уроке мы изучим semantic HTML.

Потому что HTML — это не только теги.

Это значение.

А значение отделяет чистую страницу от катастрофы под названием div soup.