Главная > Формы > Новый атрибут для форм в HTML5
Новый атрибут для форм в HTML524 июля 2011, 17:00. Разместил: Mysterious Master |
Единственное, с чем столкнулись разработчики при создании форм, - это невозможность отделить контроллеры форм от их родительского элемента «form» без применения нежелательных методов, которые помогали заставить эти контроллеры передавать данные вместе с формой. Если вы пробовали сделать это в HTML4 или в XHTML, то вряд ли форма принимала информацию из контроллеров формы, которые структурно находились за пределами формы. В результате, если вам хотелось получить данные и вставить их в форму из «контроллера-сироты», вам приходилось внедрять хитрые уловки на javascript, что в большинстве случаев вело к соответствующим нестыковкам. Более надежный способ Сегодня HTML5 предлагает нам новый атрибут для форм, который позволяет нам связать любого контроллера-сироту с любым элементом «form» на странице. Вы можете прочитать об этом методе в спецификации WHATWG HTML5 в разделе Association of Controls and Forms («Привязка контроллеров и форм»), а сегодня мы предложим вам следующий вариант:
Учитывайте две вещи: Элемент «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, но есть вероятность того, что один из них позволит реализовать то же самое; мы просто не утруждались и не опробовали их все. В целом, этот метод крайне интересен и пригоден для использования. Посмотреть демо Вернуться назад |