Допустимо ли иметь html-форму внутри другой html-формы?
действительно ли html имеет следующее:
поэтому, когда вы отправляете «b», вы получаете только поля во внутренней форме. Когда вы отправляете «a», вы получаете все поля минус те, которые находятся в»b».
Если это невозможно, какие обходные пути для этой ситуации доступны?
11 ответов
А. это недопустимый HTML или XHTML
в официальной спецификации W3C XHTML в разделе B. «запреты элементов» говорится, что:
Что касается старшего HTML 3.2 spec, в разделе элемента FORMS указано, что:
«любая форма должна быть заключена в элемент формы. Их может быть несколько формы в одном документе, но Элемент формы не может быть вложенным.»
Б. Решение
существуют обходные пути с использованием JavaScript без необходимости вложения тегов формы.
«Как создать вложенную форму.» (несмотря на название это не вложенные теги формы, но обходной путь JavaScript).
Примечание: хотя можно обмануть валидаторы W3C, чтобы передать страницу, манипулируя DOM с помощью сценариев, это все еще не законный HTML. Проблема с использованием таких подходов заключается в том, что поведение вашего кода теперь не гарантируется в браузерах. (поскольку это не стандарт)
в случае, если кто-то найдет этот пост здесь-это отличное решение без необходимости из JS. Используйте две кнопки отправки с разными атрибутами имен проверьте язык сервера, на котором была нажата кнопка отправки, потому что только одна из них будет отправлена на сервер.
серверная сторона может выглядеть примерно так, если вы используете php:
HTML 4.x & HTML5 запрещает вложенные формы, но HTML5 позволит обходной путь с атрибутом «форма» («владелец формы»).
Что касается HTML 4.X вы можете:
Как говорили другие, это недопустимый HTML.
похоже, что вы делаете это, чтобы расположить формы визуально друг в друге. Если это так, просто сделайте две отдельные формы и используйте CSS для их размещения.
нет, в спецификации HTML указано, что нет FORM элемент должен содержать другой FORM элемент.
скорее используйте пользовательский javascript-метод внутри атрибута действия формы!
вы можете ответить на свой собственный вопрос очень легко, введя HTML-код в Что W3 Валидатор. (К услугам гостей текстовое поле ввода, вам даже не придется размещать свой код на сервере. )
(и нет, он не будет проверять.)
возможность иметь iframe внутри внешней форме. В iframe содержит внутреннюю форму. Обязательно используйте тег внутри тега head iframe, чтобы форма вела себя как часть главной страницы.
нет, это недопустимо. Но » решением «может быть создание модального окна вне формы» а», содержащего форму»в».
Это можно легко сделать, если вы используете bootstrap или материализуете css. Я делаю это, чтобы избежать использования iframe.
Если вам нужна ваша форма для отправки / фиксации данных в реляционную базу данных 1:M, я бы рекомендовал создать триггер «после вставки» DB в таблице A, который вставит необходимые данные для таблицы B.
Ваша первая HTML форма
Первая статья в данной главе предоставит вам первый опыт создания веб-форм, в том числе проектирование простой формы, её реализацию с использованием HTML-элементов управления формой и других HTML-элементов, добавление стилей через CSS и описание того, как данные из формы отсылаются на сервер. Мы более подробно остановимся на каждой из этих подтем далее в статье.
| Необходимые знания: | Базовое представление о компьютерах и базовое понимание HTML. |
|---|---|
| Цель: | Ознакомиться с веб-формами, узнать, для чего они используются, как их проектировать, и какие базовые HTML-элементы могут понадобиться в простых ситуациях. |
Что такое Веб-форма?
Веб-формы являются одним из основных элементов взаимодействия между пользователем и сайтом или приложением. Формы позволяют пользователю ввести данные, которые затем отправляются на сервер для их дальнейшей обработки и хранения или используются на стороне клиента для обновления интерфейса (например, добавление нового элемента в список или открытие и закрытие элемента интерфейса).
В элементах управления форм можно задать правила, указывающие на определённый формат данных или значений, которые могут быть введены (валидация форм), а также к ним могут быть добавлены текстовые строки, описывающие эти элементы для зрячих и незрячих пользователей.
Проектирование формы
Перед тем, как начать программировать, всегда лучше остановиться и подумать о вашей форме. Создание быстрого наброска поможет определить верный набор данных, которые вы хотите получить от пользователя. С точки зрения UX, удобства использования интерфейса, важно помнить о том, что чем длиннее ваша форма, тем больше риск потерять пользователей. Сделайте форму краткой и лаконичной: спрашивайте только о той информации, которая вам действительно необходима.
Проектирование форм является важным этапом при создании сайта или приложения. Удобство использования форм (UX) выходит за рамки данной статьи, однако если вы хотите углубиться в эту тему, то вам следует прочитать следующие статьи:
В этой статье мы создадим простую контактную форму. Давайте сделаем набросок.
Наша форма будет состоять из трёх текстовых полей и одной кнопки. Мы узнаём у пользователя его имя, e-mail и сообщение, которое он хочет отправить. После нажатия на кнопку данные будут отправлены на веб-сервер.
Активное обучение: Реализация HTML-формы
Итак, теперь мы готовы обратиться к HTML и создать нашу форму. Для этого мы будем использовать следующие HTML-элементы: :
Тег form в html
Тег form в html — описание
Тег form добавляет контейнер для размещения элементов управления, с которыми пользователи могут взаимодействовать, чтобы отправить информацию на сервер. Форма используется для сбора информации о посетителях сайта, комментариев, мнений и многого другого. А также для авторизации на некоторых сайтах.
Кроме этого HTML тег form представляет собой контейнер для других элементов управления. Ниже приведен их перечень:
Формы являются мощным инструментом, который не только помогает собирать ценную информацию о пользователях, но и позволяет разработчикам создавать сложные приложения.
Примеры
В следующих примерах мы рассмотрим некоторые из атрибутов тега form с несколькими элементами управления.
В нашем первом примере создается простая форма авторизации с тремя элементами: текстовое поле, поле для ввода пароля и кнопка отправки данных. Тег form action и method указывают местоположение скрипта, отвечающего за обработку данных формы, и метод, используемый для их отправки.
Атрибут target определяет вывод результатов в новом окне/вкладке. Страница, на которой будут выведены результаты обработки, специально предназначена для того, чтобы вы поняли механизм работы форм. Скрипт формы выполняется на сервере до вывода результатов.
Обратите внимание, что мы используем для атрибута method значение « GET » просто для разнообразия. Это позволит при открытии нового окна с результатами обработки данных формы увидеть в адресной строке браузера пару имя / значение.
Кроме этого, наша форма должна содержать поле для выбора загружаемого файла через проводник.
Атрибуты
Специальные атрибуты тега form :
ACCEPT-CHARSET
Разделенный пробелами список кодировок символов, которые должны использоваться в форме. Список должен быть отсортирован по приоритетности.
AUTOCOMPLETE
Одно из двух значений этого атрибута тега form указывают браузеру, должен ли он отображать варианты для поля ввода элемента управления. Браузеры обычно выполняют это действие, извлекая данные из базы, содержащей введенные ранее. Возможно два значения, оба не зависят от регистра:
ENCTYPE
Значение, указывающее метод, который будет использоваться для кодирования данных при отправке формы. Возможны три значения, которые не зависят от регистра:
METHOD
Метод, который должны использовать браузеры для отправки данных формы. Возможны три значения, без учета регистра:
Имя формы. Это значение не может быть пустой строкой и должно отличаться от имен других форм.
ACCEPT
Указывается разделенный запятыми список разрешенных типов контента. Это может быть полезно при загрузке файлов для фильтрации на стороне клиента типов файлов.
1.15. HTML5-формы
HTML-формы являются элементами управления, которые применяются для сбора информации от посетителей веб-сайта.
Веб-формы состоят из набора текстовых полей, кнопок, списков и других элементов управления, которые активизируются щелчком мыши. Технически формы передают данные от пользователя удаленному серверу.
Для получения и обработки данных форм используются языки веб-программирования, такие как PHP, Perl.
HTML5-формы решили большинство этих распространенных проблем благодаря наличию новых атрибутов, предоставив возможность изменять внешний вид элементов форм за счет CSS3.
Рис. 1. Улучшенные веб-формы с помощью HTML5
Создание HTML5-формы
2. Группировка элементов формы
3. Создание полей формы
Элемент создает большинство полей формы. Атрибуты элемента отличаются в зависимости от типа поля, для создания которого используется этот элемент.
— в этой форме есть два поля для ввода и одна кнопка. Все эти элементы строятся самим браузером.
На пятой строке используется с атрибутом type=»submit». В результате чего браузер рисует кликабельную кнопку, которая запускает процесс отправки содержимого формы.
Обратите внимание, что все поля имеют атрибут name=»cheese» с одинаковым значением. Это необходимо, потому что на одной странице могут находится несколько форм с радиокнопками. Но переключатель будет работать только внутри группы радиокнопок с одинаковым значением атрибута name. А значение value=». « должно быть разным. именно value у выбранного пункта будет передано во время отправки формы.