Новий атрибут “form” у HTML5

За підтримки:
Аккорд отели – лучшие гостиницы в Одессе, Киеве, Кривом Рогу. Сеть украинских гостиниц бизнес-класса Аккорд Отели.

Раніше розробники не могли розділити тіло форми та її управлінську частину не вдаючись до небажаних і часто непрогнозованих методів. Простіше кажучи, раніше якщо кнопка submit знаходиться поза тегом form, то натиснення на цю кнопку не призведе до відправки даних заповнених у форму. Спробуйте це HTML4 або XHTML і ви самі переконаєтесь.

Новий шлях

З новим атрибутом form у HTML5 ви можете асоціювати віддалену управлінську частину з будь-якою формою на сторінці. Будь-ласка, прогляньте специфікацію HTML5 у частині “Association of Controls and Forms”, але якщо коротко, то ось як це все може виглядати:

	Name:
	

	Email:
	

	

Зверніть увагу:

• Елемент textarea поза формою (поза тегом form)
• Елемент textarea має атрибут form, значення якого вказує на id форми, з якою його асоційовано

З новим атрибутом ви можете навіть змінити стандартну зв’язку управління форми з її тілом. Наприклад, якщо на сторінці є дві форми то ви зможете “поцупити” управління формою №2 і зробити можливим відправку даних форми №2 разом з формою №1. Щоб було зрозуміліше: при натисканні кнопки submit у формі №1 разом із даними форми №1 ви відправите також дані форми №2.

Вищеописаний варіант спрацює навіть якщо управління формою №2 буде в середині форми, тобто безпосередньо підпорядковане. Таким стандартна зв’язка управління форми з її тілом буде змінена.

Підтримка браузерами

На даний час підтримка нового атрибута різними браузерами виглядає так:

• Opera 9.5+ (повна підтримка)
• Safari 5.1+ (ніби є, невпевнений)
• Firefox 4+ (глючна або часткова підтримка)
• Chrome 10+ (глючна або часткова підтримка)
• IE (не підтримується)

Дана стаття є перекладом HTML5′s New “form” Attribute. Автор оригінальної статті також зробив сторінку-демо з формою. Ви можете самі спробувати все у дії.