HTML-формы: поля, кнопки и доступная отправка

Форма — главный инструмент конверсии на многих сайтах. В HTML вы описываете поля и способ отправки; проверку и UX усиливают CSS/JS и сервер.

Связка label и input

Каждое поле должно иметь подпись. Связывайте label for с id поля — так увеличивается зона клика и работает доступность. Атрибут name нужен серверу: без него значение может не уйти.

Типы полей

Используйте подходящий type: email, tel, url, checkbox, radio. Для длинного текста — textarea. Кнопка отправки — button type="submit" или input type="submit".

Безопасность и UX

HTML-атрибуты вроде required помогают, но не заменяют серверную валидацию. Не кладите секреты в клиентскую разметку. Дальше по теме таблиц данных — таблицы.

HTML

<form action="/submit" method="post">
  <p>
    <label for="name">Имя</label>
    <input id="name" name="name" type="text" required autocomplete="name">
  </p>
  <p>
    <label for="email">Email</label>
    <input id="email" name="email" type="email" required autocomplete="email">
  </p>
  <p>
    <label for="msg">Сообщение</label>
    <textarea id="msg" name="message" rows="4" required></textarea>
  </p>
  <button type="submit">Отправить</button>
</form>

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

Задание: сделайте форму обратной связи из трёх полей.

У каждого поля есть label, связанный через for/id
Есть name у всех контролов
Email с type="email", кнопка submit
Хотя бы одно поле required