Form html несколько форм

как объединить HTML формы

зачем разделять их, если вы хотите объединить их в конце? может быть, лучше убедиться, что ваш код не генерирует 2 формы.

Я пытаюсь объединить формы, которые находятся в другом положении. так что я могу опубликовать все данные одновременно.

10 ответов

НЕ делайте 2 формы. Используйте правильные HTML-элементы и CSS для макета. Не стесняйтесь использовать javascript для анимации и добавления эффектов по мере необходимости.

Собственными элементами я имею в виду, что вы могли бы сделать что-то вроде:

 
 
Personal Information:
   
 
Address information:
  
 
 

И используйте CSS, чтобы разместить их.

Конечно, адаптируйте пример к вашим потребностям.

@Oded: Я думаю, что ОП хотел, чтобы его форма появлялась в разных частях веб-страницы. Это не будет делать это.

Я не знаю ваших фактических требований, но рекомендуется и стандартная практика (как я знаю) иметь одну форму и вставлять элементы в нее. Возможно, они помещают их в div/table/css и т.д. Затем, используя javascript вы можете получить контрольные значения. например:

document.getElementById("controlid").value 

document.forms[0].Element[0].value document.forms[1].Element[0].value 

надеюсь, что это даст некоторую идею

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

Вы можете добавить скрытые поля во вторую форму и заполнить эти поля (используя java script) с первым значением формы перед отправкой.

Просто используйте один тег form :

Все данные формы будут отправлены одним звонком (как вы укажете, что вы хотите в одном из ваших комментариев) до actions.php .

Обратите внимание, что эта форма (и те, которые вы отправили в своем вопросе) не очень полезны без каких-либо идентификаторов на любом из входных элементов, так как вам будет трудно рассказать о различиях без нее.

В отношении того, как выглядит форма — вы должны использовать CSS для стилизации и размещения разных элементов.

Я знаю, сколько лет этот вопрос, но вот ответ в любом случае, используя атрибут формы HTML5. (атрибут не тег.)
Просто введите идентификатор для вашей основной формы (т.е. )
А на других входах (без использования другого тега формы) добавьте новый атрибут формы HTML5 (атрибут не тег) со значением вашего основного идентификатора формы (т.е. form = «main-form» ).
* Однако он не поддерживается в IE

HTML позволяет вам иметь другой текст и теги внутри формы. Просто сделайте следующее:

Чтобы быть полезными, вашим входным тегам нужны атрибуты имен.

Используйте деления и CSS, например:

CSS может использоваться для размещения каждой части вашей формы.

Другой вариант — использовать javascript, например:

Обратный также можно сделать:

Источник

Несколько форм на одной странице с отправкой без перезагрузки

• 29.06.2015
• 58568

Вы можете скачать готовые файлы, в которые дополнительно включена проверка введенных данных в форму (валидация), поделившись статьей в Twitter.

Представьте, что у вас на странице сайта есть несколько форм связи с различным предназначением. Лучший способ объяснить эту потребность, это создание сайта, в котором необходимо разместить форму заказа звонка, форму запроса цены, форму запроса каталога и еще какие-либо необходимые вам формы.

За пересылку письма с введенными в форму данными отвечает PHP обработчик. Для передачи данных в обработчик используется кнопка с типом submit . В случае использования нескольких форм связи с одним php обработчиком Вы должны передать в него данные именно той формы, в которой была нажата кнопка «Отправить». Это можно сделать через if/else , с учетом разных имен атрибутов, наплодив одинаковых кусков кода, можно создать кучу обработчиков с разными именами, но одинаковым кодом, а можно использовать скрипт jQuery с помощью которого данные в обработчик будут отправляться из той формы где было произведено нажатие на кнопку «Отправить».

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

Несколько форм связи с одним обработчиком

К примеру, возьмем три формы.

Присвойте каждой форме свой уникальный id . У нас это form1, form2 и form3. Кроме того, для стилизации формы примените классы css , для отображения подсказки включите атрибуты placeholder , а для формирования темы письма добавьте скрытый input .

Таким образом, теперь формы имеют различные идентификаторы id и мы можем написать скрипт, который будет отправлять данные в обработчик ориентируясь на id формы.

Отправка формы без перезагрузки страницы

Обычно при отправке данных из формы происходит перенаправление на страницу подтверждения. В случае использования нескольких форм на странице, это будет мешать и отвлекать клиента от вашего предложения и заполнения какого-либо другого запроса.

Используя AJAX, отправку формы без перезагрузки страницы сделать очень легко.

После нажатия кнопки «Отправить» вместо полей ввода формы у вас появится сообщение об отправке.

update: При необходимости восстановления формы после отправки данных, вы можете использовать следующее решение (вставьте выделенный код в указанное место и оберните все input в форме в div с id, например inputs):

Метод .load() загружает данные и вставляет в указанный элемент.

«#parent» — id формы, в которую необходимо вставить удаленные данные.
В приведенном примере скрипта с отправкой данных форм без перезагрузки страницы, оберните в div все input . Назначьте ему id , например inputs . Этот div с вложенными полями input удаляется скриптом, на его месте появляется сообщение об отправке. Получается, что в коде остается тег form с id , этот id необходимо указать в #parent , это станет контейнером для загрузки скриптом данных формы (удаленные input ).

«http://site.ru» — адрес вашей страницы с формой, откуда скрипт загрузит удаленные input . Например, если ваша форма будет находиться по адресу http://site.ru/contacts.html, вставляете этот адрес.

«#child» — id блока, который содержит input . В данном случае div #inputs .

3000 — время в мс через которое восстановится код формы.

PHP обработчик

Большинство форм для передачи данных используют метод POST , это позволяет «спрятать» данные формы и не загромождать URL в адресной строке.

Данный обработчик содержит проверку метода передачи данных.

Создавая формы на страницах своего сайта, не забывайте о внедрении проверки введенных данных и методах защиты от спама.

Возникли вопросы? Давайте обсудим их в комментариях.

Блог

Создание сайта компании
Madcatzz

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

Создание сайта компании
Madcatzz

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

Источник

Как реализовать несколько форм обратной связи на одной странице index.html?

Как вариант — добавить каждой форме скрытые поле по которому в PHP-скрипте в итоге определять какая форма отправлена и выполнять соответствующие действия.

Для каждой формы создать отдельный action на бэкенде и слать формы на него обычным POST с последующим редиректом на заданную thank you или error page.

Александр, а если будет хотя бы десять форм, Вы для каждой отдельное действие в контролере будет создавать?
Ну что ж, успехов в начинании)))

Александр, чем таким могут отличаться формы обратной связи, что бы для этого создавать несколько действий в контролере?

Дмитрий, разве в контроллере не может быть одно универсальное действие для обработки форм по уникальному идентификатору (например, /some/alias/kjhiu1) ?
Вообще, формы обратной связи могут отличаться последующим сценарием: запуск определенной воронки продаж, рассылки, сегментацией и прочими маркетинговыми ужасами.

Вообще, формы обратной связи могут отличаться последующим сценарием: запуск определенной воронки продаж, рассылки, сегментацией и прочими маркетинговыми ужасами.

Александр, всё это можно сделать в одном действии. Если всё грамотно сделать — не надо будет лепить несколько однотипных действий.

разве в контроллере не может быть одно универсальное действие для обработки форм по уникальному идентификатору (например, /some/alias/kjhiu1) ?

Александр, ранее Вы писали о нескольких действиях, теперь об одном. Вы определитесь. Я ответил, что создавать несколько действий — не нормально.

Источник

Как отправить несколько форм одной кнопкой submit?

submit работает на AJAX и отправляет каждую форму без проблем совершенно. Вот только 3 кнопки submit не красиво и не удобно для пользователя. Скажите, можно ли скрыть кнопки submit (допустим, через display:none) от пользователя и оставить лишь одну, которая при ее нажатии нажимала на все кнопки по очереди?

P.S.: Писать другой обработчик не вариант, т.к. система смежная с другой и ее работу нарушать нельзя. Нужно как-то обойти вышеописанную проблему.

ну, начнем с того что форм у вас не 3, а 1.
Кнопки в форме 3, хотя достаточно одной, в конце формы(или в любом другом месте внутри тега формы).
Как у вас работает аякс — загадка, ибо кода вы не привели, а то что здесь нарисовано работать нормально не должно, так как:
1) id — уникальный идентификатор элемента, что как бэ намекает на то что повторяться для нескольких элементов он не должен.
2) форма отправленная в текущем виде на сервере будет просто передавать на сервер 3 последних значения из всего набора инпутов, тк сервер примет строку в которой будут повторяющиеся имена переменных — соответственно последние полученные данные затрут предыдущие. Это можно побороть яваскриптом, который будет реализовать анальный костыль, например считывая 3 инпута перед вызывающей кнопкой. Если вы знаете толк в извращениях — флаг в руки.
3) так как все 3 имени инпутов в группах совпадают — какой смысл их различать? как угадать из какого я отправляю данные?
4) если нужно 3 раза вызвать обработчик на сервере — 3 раза вызывайте аякс запрос, каждый раз передавая последующие 3 значения из инпутов, не забывайте, что аякс — асинхронная функция, запуск следующего запроса лучше всего вешать на onsuccess предыдущего запроса. Измените ид для каждого элемента на уникальный, или уберите вообще. Проще всего сделать все инпуты одной группы с одинаковым классом, по нему и выбирать группу, например $(‘.firstinputs’)

В чем прикол трех одинаковых форм? Назовите их по разному и отправте одним запросом, типо fio_3, fio_2, и впринципе лучше переменные с транслита называть английскими словами

Нельзя. Обработчик должен считать именно эти названия и присвоить каждой отправленной форме свой ID.
Да это я для примера так назвал, естественно у меня все на английском названо и более понятно)))

danyfir, причем тут? как понять что вообще должно происходить? если что id должны быть один у всех ,а тут 3 одинаковых, непонятно что и как работает но мы должны разбираться

Илья, не можете ответить грамотно, либо не понимаете вопроса — проходите мимо! к чему разводить дискуссии как агрошкольники? Написал так, как смог. Кто сможет, тот поймет и ответит.

Лишь указал на полный абсурд Вашего поста и Вашу глупость.
И что Вам надо тоже непонятно. Ну создайте 4 кнопку. По клику она будет по очереди делать запрос 1, 2 и 3. Тут у Вас проблема? Или Вам не сформировать запрос? Создайте свой уникальный data-атрибут каждому полю. К нему обращайтесь для создания запроса.

danyfir, а вот хамить не надо.
Научитесь формулировать вопросы, чтобы все могли понять.
И если у Вас код рабочий другой, то как Вам помочь? Гадать на кофейной гуще?
Выкладывайте реальный код.

Источник