Отправка данных формы
Сама форма обычно предназначена для получения от пользователя информации для дальнейшей пересылки её на сервер, где данные формы принимает программа-обработчик. Такая программа может быть написана на любом серверном языке программирования вроде PHP, Perl и др. Адрес программы указывается в атрибуте action тега , как показано в примере 1.
Пример 1. Отправка данных формы
HTML5 IE Cr Op Sa Fx
Данные формы В этом примере данные формы, обозначенные атрибутом name ( login и password ), будут переданы в файл по адресу /example/handler.php. Если атрибут action не указывать, то передача происходит на адрес текущей страницы.
Передача на сервер происходит двумя разными методами: GET и POST, для задания метода в теге используется атрибут method , а его значениями выступают ключевые слова get и post . Если атрибут method не задан, то по умолчанию данные отправляются на сервер методом GET. В табл. 1 показаны различия между этими методами.
| GET | POST | |
|---|---|---|
| Ограничение на объём | 4 Кб | Ограничения задаются сервером. |
| Передаваемые данные | Видны сразу всем. | Видны только при просмотре через расширения браузера или другими методами. |
| Кэширование | Страницы с разными запросами считаются различными, их можно кэшировать как отдельные документы. | Страница всегда одна. |
| Закладки | Страницу с запросом можно добавить в закладки браузера и обратиться к ней позже. | Страницы с разными запросами имеют один адрес, запрос повторить нельзя. |
Какой метод используется легко определить по адресной строке браузера. Если в ней появился вопросительный знак и адрес стал похож на этот, то это точно GET.
Уникальное сочетание параметров в адресной строке однозначно идентифицирует страницу, так что страницы с адресами ?q=node/add и ?q=node считаются разными. Эту особенность используют системы управления контентом (CMS, Content management system) для создания множества страниц сайта. В реальности же используется один файл, который получает запрос GET и согласно ему формирует содержимое документа.
Ниже перечислены типовые области применения этих методов на сайтах.
GET
Передача небольших текстовых данных на сервер; поиск по сайту.
Поисковые системы, формы поиска по сайту всегда отправляются методом GET, это позволяет делиться результатами поиска с друзьями, слать ссылку по почте или выкладывать её на форуме.
POST
Пересылка файлов (фотографий, архивов, программ и др.); отправка комментариев; добавление и редактирование сообщений на форуме, блоге.
Работа с формой по умолчанию происходит в текущей вкладке браузера, при этом допустимо при отправке формы изменить этот параметр и открывать обработчик формы в новой вкладке или во фрейме. Такое поведение задаётся через «имя контекста», которое выступает значением атрибута target тега . Популярные значения это _blank для открытия формы в новом окне или вкладке, и имя фрейма, которое задаётся атрибутом name тега (пример 2).
Пример 2. Открытие формы во фрейме
HTML5 IE Cr Op Sa Fx
В данном примере при нажатии на кнопку «Отправить» результат отправки формы открывается во фрейме с именем area .
Элементы формы традиционно располагаются внутри тега , тем самым определяя те данные, которые будут передаваться на сервер. В то же время в HTML5 есть возможность отделить форму от её элементов. Это сделано для удобства и универсальности, так, сложный макет может содержать несколько форм, которые не должны пересекаться меж собой или к примеру, некоторые элементы выводятся с помощью скриптов в одном месте страницы, а сама форма находится в другом. Связь между формой и её элементами происходит в таком случае через идентификатор формы, а к элементам следует добавить атрибут form со значением, равным этому идентификатору (пример 3).
Пример 3. Связывание формы с полями
HTML5 IE Cr Op Sa Fx
Форма .
В этом примере тег однозначно отождествляется через идентификатор auth , а к полям, которые следует отправить с помощью формы, добавляется form=»auth» . При этом поведение элементов не меняется, при нажатии на кнопку логин и пароль пересылаются на обработчик handler.php.
Хотя параметры передачи формы традиционно указываются в теге , их можно перенести и в кнопки отправки формы ( и ). Для этого применяется набор атрибутов formaction , formmethod , formenctype и formtarget , которые являются аналогами соответствующих атрибутов без приставки form. В примере 4 показано использование этих атрибутов.
Пример 4. Отправка формы
HTML5 IE Cr Op Sa Fx
Отправка формы
Все новые атрибуты форм не поддерживаются некоторыми браузерами, в частности, Internet Explorer и Safari.
Есть 2 формы, как объединить их input text?
Если я правильно понял, можно просто присвоить значение одного input другому:
var inp = document.querySelectorAll('input[type="text"]'); document.addEventListener('input',function()< inp[1].value = inp[0].value >);Отслеживать
ответ дан 21 янв 2020 в 14:28
Поляков Роман Поляков Роман
785 4 4 серебряных знака 16 16 бронзовых знаков
- html
- input
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.3.2953
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Просим обратить внимание: техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода
1) В Zero block создаем форму и добавляем нужные нам поля.
2) Добавляем код в блок T123. Код 1 для двух колонок, код 2 для трех колонок.
3) В коде заменяем .tn-elem__986 168 601 554 888 163 328 на class формы из Zero block.
Если нужно чтобы кнопка была по центру формы, добавляем код 3, заменив в нем class формы из Zero block.
Если нужно что бы на экранах 960px и меньше была стандартная форма, в одну колонку, применяем код 4.
Формы в 2 или 3 колонки в Zero Block
Код 1: на 2 колонки
.tn-elem__986168601554888101247 .t-form__inputsbox < display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-start; >.tn-elem__986168601554888101247 .t-input-group < flex: 50% 0 0; padding: 0 15px; box-sizing: border-box; >.tn-elem__986168601554888101247 .tn-form__submit
Код 2: на 3 колонки
.tn-elem__986168601554888101247 .t-form__inputsbox < display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; >.tn-elem__986168601554888101247 .t-input-group < flex: 33.33% 0 0; padding: 0 15px; box-sizing: border-box; >.tn-elem__986168601554888101247 .tn-form__submit
Код 3: ставит кнопку формы по центру
.tn-elem__986092821554888101247 .tn-form__submit
Код 4: для экранов меньше 960px будет стандартная форма
Как использовать две формы с одной кнопкой?
Доброй ночи всем, такой вопрос у меня, на скриншоте видно что используется ТАБЫ. В первом табе есть форма, после заполнения мы жмакаем на кнопку продолжить и нас перекидывает, на второй таб и тут тоже есть форма и после выбранных полей есть кнопка заказать.
Я не могу понять как мне правильно разместить формы для отправки данных в табах, я использую yii2 bootstrap/tab
Или тут не надо использовать две формы, если написал БРЕД, то поправте. И помогите как правильно реализовать!
[ [ 'label' => 'Контактные данные', 'options' => ['id' => 'activeAccount'], 'visible' => Yii::$app->user->id, 'content' => $this->render('_tabs/activeAccount', [ 'order' => $order, 'user' => $user, 'userCabinet' => $userCabinet, ]), ], [ 'label' => 'Доставка оплата', 'options' => ['id' => 'deliveryPayment'], 'content' => $this->render('_tabs/deliveryPayment', [ 'model' => $model, ]), ], ] ]); ?>
- Вопрос задан более трёх лет назад
- 276 просмотров
Комментировать
Решения вопроса 1
Максим Тимофеев @webinar Куратор тега Yii
Учим yii: https://youtu.be/-WRMlGHLgRg
Обворачиваете все табы в одну форму, в рендер таба можно передавать $form . Кнопку сабмита в последней и фсе.
Ответ написан более трёх лет назад