Тег используется для создания HTML-формы, в которой пользователь может ввести данные. Этот тег определяет область, в которой содержится контент формы, а также указывает на сервер, куда отправлять данные формы.
Синтаксис тега
Здесь action определяет URL, куда будут отправлены данные формы, а method указывает метод отправки данных: GET или POST .
Спецификация HTML
Тег является частью спецификации HTML Living Standard.
Семантический или нет
Тег считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого. Он определяет область, которая предназначена для ввода данных пользователем, и указывает на сервер, куда отправить эти данные.
Примеры использования
Форма для входа на сайт:
Имя пользователя: >
Пароль: >
Этот код создаёт форму для входа на сайт с полями для ввода имени пользователя и пароля. Данные будут отправлены на сервер по адресу /login методом POST .
Форма обратной связи:
КАК СДЕЛАТЬ ФОРМУ СБОРА ЗАЯВОК ВКОНТАКТЕ?
Ваше имя: >
Email: >
Сообщение: >
Здесь мы создаём форму обратной связи с полями для ввода имени, электронной почты и сообщения. Данные будут отправлены на сервер по адресу /feedback методом POST .
Форма с выбором опции:
Выберите цвет: > Красный Зелёный Синий
Выберите размер: > Маленький > Средний > Большой
Этот пример создаёт форму с выпадающим списком цветов и группой радиокнопок для выбора размера. Данные будут отправлены на сервер по адресу /options методом GET .
Для чего использовать тег
- Для формы обратной связи, в которой пользователь может оставить контактные данные и сообщение.
- Для формы поиска на сайте.
- Для формы регистрации — формы, в которой пользователь вводит данные для создания учётной записи или входа в личный кабинет.
- Для формы оформления заказа.
- Для формы оплаты, в которой пользователь может ввести данные банковской карты и подтвердить оплату.
- Для анкеты или опроса, в которых пользователи могут выбрать один или несколько вариантов ответов.
Атрибуты тега
- action — адрес, на который будут отправлены данные формы.
- method — метод отправки данных: GET или POST .
- target — окно или фрейм, в котором будет открыт результат отправки данных формы.
- name — имя формы, которое используется для её идентификации при отправке данных на сервер.
- autocomplete — может ли браузер запоминать введённые пользователем данные для автозаполнения.
- enctype — способ кодирования данных формы при отправке на сервер.
- novalidate — указывает, что данные формы не нужно проверять на корректность перед отправкой на сервер.
Пример использования атрибутов тега :
Глобальные атрибуты
Ограничения
Нюансы
- Не рекомендуется использовать вложенные формы.
- Если использовать метод GET , параметры формы будут отображены в адресной строке браузера. Это небезопасно, так как данные формы можно легко изменить.
- Для отправки файлов на сервер необходимо использовать атрибут enctype=»multipart/form-data» .
Поддержка браузерами
Тег поддерживается всеми современными браузерами. Актуальная информация — на caniuse.
Альтернативные теги
Альтернативных тегов для тега не существует.
Чем заменить этот тег
Прямой замены тегу не существует.
Актуальность
Тег является актуальным и широко используется в веб-разработке.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Источник: htmlacademy.ru
Как сделать форму генерации клиентов в ВКонтакте
Вы можете собирать и обрабатывать контакты прямо в своем сообществе ВКонтакте. Для этого понадобится приложение для сбора контактов. Это форма, которую вы можете использовать для своей рекламы, и получать с помощью нее заявки на консультации, услуги и курсы.
Как настроить форму сбора заявок ВКонтакте
Читайте об этом далее в статье или смотрите видео.
ШАГ 1. На своей странице в ВК заходим в то сообщество, с которого ведутся продажи.
Если у вас его нет, то нужно будет создать. В сообществе на панели справа находим вкладку «Управление» — «Приложения». В каталоге во вкладке «Бизнес» находим приложение «Форма сбора заявок», добавляем ее в то сообщество, которое нужно. Форма подключилась.
ШАГ 2. Нажимаем «Настроить приложение».
В открывшемся окне «добавить новую форму». Задаем название. Например, у вас будет реклама на консультации 20-25 ноября. Назвать форму можно так: «Заявки на консультации 20-25 ноября».
Загружаем заранее подготовленную обложку формата 1200х300 рх.
В описании можно использовать смайл. Их можно взять здесь. Кликаем на нужный смайл, копируем его и вставляем.
ШАГ 3. Далее вкладка «Вопросы» — какие данные нужно оставить клиенту:
- имя;
- телефон;
- e-mail;
- возраст и т.д.
Источник: novator.vip
Передача контактов с лид-формы Vkontakte
Настраиваем сбор контактов с Лид-формы в Вконтакте и их передачу в Vakas-tools для последующего создания автоматической рассылки СМС, звонков и email-писем.
Подключение лид-формы к Vakas-tools
1. В настройках своего сообщества в Вконтакте выберите «Управление».
2. Перейдите в меню справа в раздел «Работа с API».
3. Перейдите на вкладку «Callback API».
4. Если у Вас еще не подключен сервер, добавьте его.
ВАЖНО! Возможно подключить до 10 серверов для Callback API, задать каждому из них отдельный набор событий и версию API.
5. Перейдите в Vakas-tools. Нажмите на «Ссылки» в нужной базе.
6. Во вкладке «Регистрации» найдите «Webhook для VK Callback API для Lead form». Скопируйте его.
7. Вернитесь во Вконтакте. Вставьте скопированный вебхук в строку «Адрес».
8. Скопируйте строку, который должен вернуть сервер, и вставьте в конец вебхука вместо KODE. Нажмите на «Подтвердить».
9. Если Лид-форма успешно подключена к Vakas-tools, появится сообщение об этом.
10. Перейдите из «Настройки сервера» в «Типы событий».
11. Пролистните страницу вниз и поставьте галку напротив «Новая заявка» в разделе «Lead forms».
Настройка лид-формы
1. Перейдите в рекламный кабинет в раздел «Кампании». Нажмите на «Создать объявление».
2. Выберите цель рекламы «Заполнение лид-формы».
3. Нажмите на «Создать запись».
4. Выберите существующую форму или создайте новую.
5. Выберите, что должно отображаться на Лид-форме.
6. В разделе «Вопросы» отметьте, какие данные будут собираться на Лид-форме. Сохраните форму.
Тестирование лид-формы
1. Скопируйте ссылку на Лид-форму и откройте ее.
2. Заполните требуемые данные и нажмите на «Отправить».
3. Перейдите в Vakas-tools. Нажмите на кнопку просмотра базы подписчиков.
4. Пролистните страницу вниз и найдите добавленный контакт. Нажмите на него.
5. Проверьте корректность и полноту собранных данных.
Видео-инструкция
Источник: vakas-tools.ru