Пример HTML-формы: контактная форма, которую можно скопировать

Пример HTML-формы — это готовая форма, которую можно вставить на страницу: поля, подпись к каждому и кнопка, которая их отправляет. Ниже контактная форма. Она же простой пример веб-формы. Что такое веб-форма, из чего она состоит и где применяется, разобрано отдельно.

Контактная форма в HTML

Скопируйте этот блок. Он спрашивает имя, адрес почты, тему и сообщение, а затем добавляет флажок согласия и кнопку отправки.

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

  <label for="email">Электронная почта</label>
  <input type="email" id="email" name="email" required>

  <label for="topic">Тема</label>
  <select id="topic" name="topic">
    <option value="question">Вопрос</option>
    <option value="order">Заказ</option>
  </select>

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

  <label>
    <input type="checkbox" name="consent" value="yes" required>
    Согласен на обработку моего сообщения
  </label>

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

Поставьте блок туда, где должна появиться форма. Браузер нарисует поля. В примере нет CSS, поэтому элементы выглядят как стандартные, пока вы их не оформите.

Что делает каждая часть

Тег form собирает всё, что отправляется вместе. action — это адрес, который принимает заявку, а method="post" кладёт ответы в тело запроса, а не в адрес страницы. POST нужен, когда форма собирает имя, почту или сообщение. GET подходит поиску и фильтрам: он записывает ответы в URL, и они остаются в истории и журналах.

У каждого поля есть label, связанный с ним через for и id: щелчок по словам ставит курсор в поле, а программа чтения экрана может их озвучить. Атрибут name — это ключ, который получит обработчик: name, email, topic, message, consent. Без name поле видно, но его значение не отправляется. required не даёт отправить форму, пока поле пустое. type="email" просит браузер проверить, что значение похоже на адрес. select — это выпадающий список с одним вариантом, textarea — сообщение длиннее одной строки. Флажок нужно отметить. Кнопке нужен type="submit": без него она форму не отправляет.

Те же поля, уже рабочие

Вот та же контактная форма, опубликованная так, чтобы её можно было заполнить на этой странице.

Почему сам HTML не отправляет письмо

action="/send" — это только адрес. Когда посетитель нажимает «Отправить», браузер обращается по этому адресу и прилагает поля. Если там их никто не принимает, заявке некуда попасть. Ссылка mailto: в action тоже письмо не отправляет: она открывает почтовую программу посетителя и оставляет остальное ему. Чтобы ответы попали в ящик, нужен обработчик или форма, у которой он уже есть.

Веб-форма без серверного скрипта

Веб-форма в браузере — это те же поля, только приём ответов размещён за вас. В FormDesigner вы добавляете имя, почту и сообщение, указываете адрес, на который должны приходить заявки, и копируете код на страницу. Тег form и скрипт по адресу action писать не нужно. Начните с формы обратной связи или бесплатного шаблона. Создайте аккаунт — и форму можно публиковать.

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