Если вы пробовали сделать это в HTML4 или в XHTML, то вряд ли форма принимала информацию из контроллеров формы, которые структурно находились за пределами формы.
В результате, если вам хотелось получить данные и вставить их в форму из «контроллера-сироты», вам приходилось внедрять хитрые уловки на javascript, что в большинстве случаев вело к соответствующим нестыковкам.
Более надежный способ
Сегодня HTML5 предлагает нам новый атрибут для форм, который позволяет нам связать любого контроллера-сироту с любым элементом «form» на странице. Вы можете прочитать об этом методе в спецификации WHATWG HTML5 в разделе Association of Controls and Forms («Привязка контроллеров и форм»), а сегодня мы предложим вам следующий вариант:
<form id="contact_form" method="get">
<label>Name:</label>
<input type="text" id="name" name="name">
<label>Email:</label>
<input type="email" id="email" name="email">
<input type="submit" id="submit" value="SEND">
</form>
<textarea id="comments" form="contact_form"></textarea>Учитывайте две вещи:
Элемент «textarea» за пределами элемента «form» (т.е. он родственный ему элемент, а не дочерний);
Элемент «textarea» снабжен атрибутом формы со значением равным id формы, с которой он должен быть связан.
Аннулирование стандартной среды браузера
С помощью этого атрибута вы можете аннулировать стандартную среду привязки контроллеров форм, предусмотренную в браузере. Например, если у нас на странице две формы, вы можете «украсть» контроллер у формы №2 и связать его с формой №1.
Это можно сделать даже если контроллер формы находится на одной ветви с формой №2. И, как результат, форма №2 не будет получать данные из «украденного» контроллера формы. Т.е. атрибут формы, в данном случае, переписывает натуральную среду браузера.
Этот метод работает по тому же принципу и с кнопкой подтверждения ввода данных, привязанной к форме. У вас может быть кнопка за пределами формы, и вы можете привязать её, используя атрибут формы.
Что насчет поддержки браузеров?
Мы сделали тестовую страницу с формой, реализованной по данной технике, где атрибут формы установлен на «get». Это приведёт к тому, что введенные значения буду отправлены на ту же страницу в строку запроса. Если вы используете браузер с поддержкой этой функции, то вы увидите три значения в строке URL. Если же вы используете браузер без поддержки, то увидите лишь два значения.
Нам не удалось найти больше информации по браузерной поддержке, но, судя по данной тестовой странице и боковой колонке в спецификации WHATWG, ситуация выглядит примерно так:
- Opera 9.5+ (полная поддержка)
- Safari 5.1+ (это судя по сообщениям от одного из пользователей источника статьи; уровень поддержки не ясен)
- Firefox 4+ (глючная/частичная поддержка)
- Chrome 10+ (глючная/частичная поддержка)
- IE (не поддерживает)
По нашим личным тестам результаты вышли примерно так, как описано выше, за исключением браузеров с указанной частичной поддержкой, так как нам показалось, что метод работает примерно одинаково в FF, Opera и Chrome. Вы можете продвинуться дальше, и опробовать метод в своём браузере, чтобы подтвердить описанные здесь результаты.
Итак, если вы хотите воспользоваться данным методом, у вас должна быть сформировавшаяся аудитория с очень низким числом тех, кто использует Internet Explorer, либо можете добавить функцию определения браузера с откатом на javascript, что даст тот же результат. Мы не нашли специальных элементов «polyfill» для реализации данного метода в таблице HTML5 Polyfills, но есть вероятность того, что один из них позволит реализовать то же самое; мы просто не утруждались и не опробовали их все. В целом, этот метод крайне интересен и пригоден для использования.
Посмотреть демо
