Приклад 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 писати не потрібно. Почніть із форми зворотного зв’язку або безкоштовного шаблону. Створіть обліковий запис — і форму можна публікувати.

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