две формы на одной странице html
Действующие акции
Партнеры
Несколько форм на одной странице с отправкой без перезагрузки
Вы можете скачать готовые файлы, в которые дополнительно включена проверка введенных данных в форму (валидация), поделившись статьей в Twitter.
Представьте, что у вас на странице сайта есть несколько форм связи с различным предназначением. Лучший способ объяснить эту потребность, это создание сайта, в котором необходимо разместить форму заказа звонка, форму запроса цены, форму запроса каталога и еще какие-либо необходимые вам формы.
Далее мы покажем, как реализовать на одной странице несколько форм связи, отправляющих данные без перезагрузки страницы в один обработчик.
Несколько форм связи с одним обработчиком
К примеру, возьмем три формы.
Таким образом, теперь формы имеют различные идентификаторы id и мы можем написать скрипт, который будет отправлять данные в обработчик ориентируясь на id формы.
Отправка формы без перезагрузки страницы
Обычно при отправке данных из формы происходит перенаправление на страницу подтверждения. В случае использования нескольких форм на странице, это будет мешать и отвлекать клиента от вашего предложения и заполнения какого-либо другого запроса.
Используя AJAX, отправку формы без перезагрузки страницы сделать очень легко.
Форма связи в процессе заполнения
После нажатия кнопки «Отправить» вместо полей ввода формы у вас появится сообщение об отправке.
Форма связи после нажатия кнопки «Отправить»
update: При необходимости восстановления формы после отправки данных, вы можете использовать следующее решение (вставьте выделенный код в указанное место и оберните все input в форме в div с id, например inputs):
PHP обработчик
Данный обработчик содержит проверку метода передачи данных.
Создавая формы на страницах своего сайта, не забывайте о внедрении проверки введенных данных и методах защиты от спама.
Возникли вопросы? Давайте обсудим их в комментариях.
Создание сайта компании
Madcatzz
Чтобы быть успешным сегодня, вы должны продавать свои услуги или продукцию как можно более широкому кругу лиц. В прошлом это было более сложно, но с появлением сети интернет вы можете охватить любое количество клиентов, необходимо лишь подойти к этому профессионально.
Создание сайта компании
Madcatzz
Чтобы быть успешным сегодня, вы должны продавать свои услуги или продукцию как можно более широкому кругу лиц. В прошлом это было более сложно, но с появлением сети интернет вы можете охватить любое количество клиентов, необходимо лишь подойти к этому профессионально.
2 формы на одной странице
Проверьте, пожалуйста, правильность заполения всех полей.
Email успешно отправлен!
Спасибо за использование контактной формы! Ваш email был отправлен и я свяжусь с Вами в кратчайшие сроки.
Заявка на послугу
бізнес-консультація
1. поставь для отладки в самом начале обработчика
узнаешь какие данные приходят.
2. сохрани сгенерированную страницу с формами просто как файл html и изучи всё ли там в порядке с вложенностью тегов. нормальные редакторы подсвечивают парные теги или даже позволяют их свернуть.
узнаешь какие данные приходят.
2. сохрани сгенерированную страницу с формами просто как файл html и изучи всё ли там в порядке с вложенностью тегов. нормальные редакторы подсвечивают парные теги или даже позволяют их свернуть.
ok, видимо в отладку стоит добавить условие:
виноват! ‘POST’ пишется заглавными буквами — исправляюсь. дока здесь.
и создаются две копии письма (если die() убрать)? вродебы нет причин для этого.
1. насколько я вижу, нет причин для отправки двух экземпляров письма. проверь себя!
2. ну у тебя в тексте два раза стоит вывод сообщения, вот оно и выводится. сделай в одном месте. становись уже программистом, а не копи-пастером )))
1. насколько я вижу, нет причин для отправки двух экземпляров письма. проверь себя!
2. ну у тебя в тексте два раза стоит вывод сообщения, вот оно и выводится. сделай в одном месте. становись уже программистом, а не копи-пастером )))
Две формы в одну строку?
Помощь в написании контрольных, курсовых и дипломных работ здесь.
Как объединить две формы в одну?
На странице есть 2 формы, одна для загрузки изображений на сервер а вторая для других атрибутов.
Заданы две строки. Построить новую строку, состоящую из символов, которые входят как в одну, так и в другую строку
Прошу помощи!
Склеить две формы в одну
Здравствуйте, просьба подсказать, возможно ли такое? и если да то каким образом реализуется? Две.
Две формы в приложении, одну компилятор не видит
Всем доброго времени суток. Есть вопрос. Суть такая. Есть приложение с двумя формами. При попытке.
F-e-s-s, применить к ним:
Велосипед из костылей или две формы на одну таблицу
Всем категорическое здравствуйте! Знаю, что злоупотребляю вниманием уважаемой аудитории, но есть.
Как свернуть две формы в одну иконку в трей и развернуть
И так думаю всё понятно по названию темы но еще раз скажу у меня две формы при сворачивании одной.
Как при нажатии на одну кнопку засабмить две формы?
Подскажите как при нажатии на одну кнопку засабмить две формы причем у одной формы свой action, а у.
Форма входа и регистрации с помощью HTML5 и CSS3
Здесь мы использовали несколько приемов HTML5. Например, элемент type=password автоматически скрывает то, что пользователь печатает и заменяет символы точками или звездочками (зависит от браузера). Элемент type=email позволяет браузеру проверить правильность формата email адреса. Кроме того, мы использовали параметр require=required; браузеры, поддерживающие данный параметр не позволят пользователю отправить форму до тех пор, пока поле не заполнено, JavaScript здесь не требуется. Параметр autocomplete=on будет автоматически заполнять некоторые поля. Мы также использовали замещающийся текст, который поможет пользователю при заполнении формы.
Теперь о двух хитрых моментах. Вы наверное заметили две ссылки в начале формы. Этот ловкий прием позволит нашей формы вести себя правильно при работе с якорями (anchors).
Второй момент связан с применением шрифта с иконками. Мы будем использовать data-attribute, чтобы отобразить иконки. Устанавливая параметр data-icon=”icon_character” с соответствующим символов в HTML, мы должны назначить лишь одно правило в CSS для установления стиля всех иконок. Подробнее об этом приеме можно почитать на сайте: 24 Ways: Displaying Icons with Fonts and Data- Attributes.
Для чистоты кода я пропущу базовые параметры (html, body и т.п.), но вы сможете найти их в исходных файлах. Повторяю, что я использую приемы CSS3, которые не будут работать во всех браузерах. Итак, давайте же приступим!
Стилизуем формы, используя CSS3
Во-первых, давайте назначим нашим формам базовый стиль.
Мы добавили две тени к элементу: одна — с целью создать внутреннее голубое свечение, а вторая — внешняя тень. Чуть позже я объясню вам z-index.
Здесь мы назначим свойства для шапки:
Замечу, что сегодня только браузеры с webkit поддерживают background-clip: text, поэтому мы сделаем полосатый фон только для webkit и привяжем его к заголовку H1. Так как параметр background-clip: text работает только в Webkit браузерах, я решил работать только со свойствами webkit. Именно поэтому я разделил CSS на две части и использовал только градиент webkit. Однако вы не должны использовать лишь webkit на своих вебсайтах! Так, например, параметр -webkit-text-fill-color: transparent позволяет нам иметь прозрачный фон, но только для браузеров webkit, все другие браузеры проигнорируют это свойство.
Мы также создали тонкую линию под заголовком с помощью элемента :after pseudo-class. Мы использовали градиент с 2px в высоту и уменьшили прозрачность по краям до нуля.
Теперь давайте позаботимся о полях ввода и придадим им приятный вид.
Во-первых, мы стилизуем поля и уберем обводку. Но будьте осторожны: обводка помогает пользователю понять, на каком поле он находится. Если же вы уберете ее, то нужно применить свойства :active и :focus.
Здесь мы использовали псевдо класс :not, чтобы стилизовать все поля, кроме чекбоксов. Кроме того, я решил убрать обводку и добавил свойства :focus и :active.
Теперь время веселиться: шрифт с иконками. Так как мы не можем использовать псевдо-классы :before и :after, мы добавим иконку в параметр label, а затем разместим в поле. Я буду использовать библиотеку fontomas. Вы можете сами сопоставить иконки с соответствующей буквой. Помните атрибут data-icon? Именно в него нужно вставить букву. Я использовал data-icon=’u’ для логина, ‘e’ для email, ‘p’ для пароля. Как только я выбрал буквы, я скачал шрифт и использовал генератор шрифтов fontsquirrel для конвертации в формат, пригодный для @font-face.
Вот собственно и все. Вам не требуется иметь отдельный класс для каждой иконки. Мы использовали параметр content: attr(data-icon), чтобы получить букву из атрибута data-icon. Таким образом, нам нужно лишь назначить шрифт, выбрать цвет и разместить иконку.
Теперь назначим правила для кнопки отправки формы.
Трюк заключается в том, чтобы использовать box-shadow, чтобы создать несколько рамок. Естественно, вы можете использовать лишь одну рамку, но также можно и несколько. Мы будем использовать параметр length для создания “фейковой” второй белой рамки, 3px в ширину, без размытия.
Теперь стилизуем чекбокс, здесь мы ничего необычного не сотворим:
Стилизуем подвал формы, используя множественные линейные градиенты, чтобы создать полосатый градиент.
Сейчас вы видите, что у нас две приятные формы, но ведь мы хотим, чтобы отображалась только лишь одна из них. Пришло время анимации!
Создаем анимацию
Первое, что мы сделаем, мы спрячем вторую форму, назначив opacity на 0:
Помните, что форма входа имеет параметр z-index: 22? Второй форме мы назначим этот параметр на 21, чтобы поставить его “под” форму входа.
Теперь самое интересное: меняем формы местами, используя псевдо класс :target. Вам нужно понять одну вещь по поводу :target: для перемещения мы будем использовать якоря. Нормальное поведение якоря — прыжок на определенный элемент страницы. Но мы не хотим этого, мы лишь хотим поменять формы местами. И тут приходит на помощь наш трюк с использованием двух ссылок в начале страницы. Вместо того, чтобы направить нас прямо на вторую форму, рискуя испытать эффект “прыжка”, мы придадим ссылкам параметр display: none. Это поможет избежать прыжков. Я обнаружил этот трюк на сайте: CSS3 create (французский язык).
Вот, что происходит: когда мы кликаем на кнопку Присоединиться, мы направляемся на #toregister. Затем происходит анимация и лишь потом переходим на элемент #register. Мы используем анимацию под названием fadeInLeft. Так как мы “прячем” форму, используя нулевую прозрачность, мы применим анимацию, которая будем постепенно появляться. Мы также изменили z-index, чтобы она появилась поверх другой формы. То же самое происходит для другой формы same happens for the other form.
Вот код для анимации. Мы использовали CSS3 animation framework от Dan Eden и адаптировали этот фреймворк под наш туториал.
Форма, которая “исчезает”, будет иметь анимацию затемнения влево:
Вот и все, друзья. Надеюсь вам понравился этот туториал!
Заметим, что в некоторых браузерах параметр background-clip: text не поддерживается. В Internet Explorer 9 анимации не работают. В Internet Explorer 8 и ниже псевдо-класс :target pseudo-class не поддерживается, поэтому там этот эффект вообще работать не будет.
обработка нескольких форм в php
Написать простейшую форму с её последующей обработкой сможет, пожалуй, каждый. Но начинающие php-программисты (а иногда и более опытные) встают в тупик: а что делать, если форм на странице 2 и обрабатываются они одним и тем же скриптом? На самом деле, здесь нет ничего сложного. Достаточно знать один момент: как именно браузер отрабатывает эти ситуации.
Допустим, на странице есть 2 формы. Одна отвечает за регистрацию, другая — за авторизацию. В этом случае не будет ничего удивительного, если обрабатывать их будет один файл. Для однозначного и быстрого (в самом деле, если форм будет ещё больше и их данные пересекаются глупо просматривать ворох параметров и создавать чуть ли не искусственный интеллект, пытаясь определить, что же вообще требуется) Определения того, какая из форм была инициирована пользователем, достаточно соблюсти 2 момента.
Как известно, за отправку формы отвечает элемент input с типом submit. Если данному элементу присвоить имя (name), сможем по этому имени определить, какая же из форм вызвана. Код будет примерно таким:
Формы практически полностью идентичны. Отличаются они только именами тегов input. В скрипте form.php остаётся только обработать эти ситуации. Исполняем:
Несмотря на то, что код получения логина одинаков, следует понимать, что в первом случае он поступил из формы № 1, а вот втором — из № 2. При активации формы браузер передаёт элементы только этой самой формы. Другие формы обработаны не будут.
Ну и конечно же, ничего не мешает давать элементам разных форм одинаковые имена. В данном примере вполне можно заменить имена login1 и login2 на login (и в html коде, и в скрипте-обработчике form.php).
Дополнение
Для некоторых тема оказалась не раскрыта. Что же, накидал небольшой php-файлик с примером определения отправляемой формы. Надеюсь, живой пример окажется более нагляден.