Главная > Формы > Новый атрибут для форм в HTML5

Новый атрибут для форм в HTML5


24 июля 2011, 17:00. Разместил: Mysterious Master
Единственное, с чем столкнулись разработчики при создании форм, - это невозможность отделить контроллеры форм от их родительского элемента «form» без применения нежелательных методов, которые помогали заставить эти контроллеры передавать данные вместе с формой.

Если вы пробовали сделать это в 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, но есть вероятность того, что один из них позволит реализовать то же самое; мы просто не утруждались и не опробовали их все. В целом, этот метод крайне интересен и пригоден для использования.

Новый атрибут для форм в HTML5

Посмотреть демо
Вернуться назад