Формы html несколько форм

Как создавать макеты веб-форм на CSS сетке

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

Если у вас ни малейшего представления о CSS сетках, посмотрите нашу серию для начинающих Understanding the CSS Grid Layout Module (Понимание модуля компоновки CSS сетки). Приступим!

1. Базовая форма регистрации

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

С «обычным» CSS

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

 for="firstName" class="first-name">First Name 

 for="lastName" class="last-name">Last Name 

Вы видите, что мы используем здесь calc( ), что позволяет нам сделать левый столбец фиксированной ширины в 200 пкс, а правый оставить плавающим.

А вот результат, с кое-какими стилями для наглядности:

Макет с CSS сеткой

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

На первом шаге, зададим нашу сетку на родительский элемент form :

Затем, нам нужно разделить эту сетку, используя grid-template-columns :

grid-template-columns: 200px 1fr; 

В CSS коде выше, первый столбец будет иметь ширину 200px , а второй примет 1fr (одна «fraction» — часть/доля) от оставшегося свободного места.

Теперь, нам нужно определить расположение наших меток и полей ввода. Для этого, мы будем использовать grid-column с особыми значениями для строк сетки:

Чтобы узнать больше о том как работают строки сетки, посмотрите эти короткие советы:

Советик: задайте название строкам CSS сетки, просто на всякий случай

В любой CSS сетке, у каждой строки есть порядковый номер, по которому мы можем ссылаться на место элемента в сетке. Однако, ещё мы можем дать название каждой из этих строк…

На основе этих линий сетки мы применим следующие правила для наших меток, полей ввода и кнопок:

Метки окажутся в столбце, который начинается в строке 1 и заканчивается в строке 2. Поля и кнопка будут помещены в столбец, который начинается в строке 2 и заканчивается в строке 3.

Наконец, мы используем grid-gap для добавления интервала в 16px между строками и столбцами:

grid-template-columns: 200px 1fr; 

2. Форма контактов

В этом макете мы хотим добиться следующего:

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

Такой макет вполне можно построить используя плавающие элементы. Тем не менее, нам нужно задать min-height для левого столбца, иначе он будет на всю высоту. Существуют и другие «традиционные» подходы к этой проблеме, но ни одна из них не настолько хороша.

«Обычный» CSS

Подведём итог, при использовании плавающих элементов нам понадобится:

1. Добавить min-height к левому столбцу.
2. Разместить «обёртки» контактов и формы.
3. Добавить clearfix или overflow: hidden; , для сохранения высоты «обёртки».
4. Разместить элементы формы и добавить отступы между ними.
5. Сбросить размещение textarea и кнопки отправки, а затем сделать так, чтобы она размещалась на всю ширину.

Это довольно много работы, верно?

Лучшим подходом для решения этого будет Flexbox либо Grid. В этом конкретном случае, я бы предпочёл использовать сетку Grid, так как мы упорядочили элементы вертикально и горизонтально.

С макетом CSS сетки

Давайте начнём с обозначения сетки на нашу «обёртку» и разделим её на два столбца.

Источник

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

• 29.06.2015
• 58658

Вы можете скачать готовые файлы, в которые дополнительно включена проверка введенных данных в форму (валидация), поделившись статьей в 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, а вот хамить не надо.
Научитесь формулировать вопросы, чтобы все могли понять.
И если у Вас код рабочий другой, то как Вам помочь? Гадать на кофейной гуще?
Выкладывайте реальный код.

Источник