—»     —»   Новый атрибут для форм в HTML5
  Раздел: Формы   Нет комментариев  

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



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

Посмотреть демо
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: HTML 5, отправные формы
Опубликовал Mysterious Master   Прочитано (раз): 4785   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930