С приходом HTML5 формы сталее более универсальными. Элемент input теперь может содержать электронные адреса, даты и много другое, их можно отмечать как обязательные не прибегая к javascript – и это всего лишь некоторые из наиболее ценных возможностей. Также теперь для одной формы можно задействовать несколько submit кнопок, а также теперь есть возможность вынести кнопку submit за пределы формы.

 

formaction

 

Несколько submit внутри одной формы

До недавнего времени в форму можно было вставить только одну кнопку submit,  в противном случае форма обрабатывала только последнюю кнопку. Добавляя method="post" и url к элементу формы "form" мы получали рабочую форму.

<form action="http://example.com/" method="post">
	<input type="submit" />
</form>

 

Теперь ситуация изменилась – в HTML добавили новые свойства "formmethod" и "formaction". Они позволяют добавить метод post и url непосредственно в кнопку "submit", таким образом к form ничего дописывать не нужно. Имея эти параметры, прикрепленные к кнопке "submit", а не к form – все это добавляет больше гибкости форме. Теперь можно сделать столько кнопок, сколько будет необходимо для формы.

 

<form>
	<input formaction="http://www.example.com/" formmethod="get" type="submit" value="example.com" />
	<input formaction="http://www.example.org/" formmethod="get" type="submit" value="example.org" />
</form>

 

Теперь каждая кнопка "submit" относится к разным url и все это избавляет от того, что при верстке необходимо писать javascript код. Все это отлично работает и теперь по нажатии на какую-нибудь кнопку форма получит formmethod и formaction, которые перезапишут стандартные параметры method и action. Если в форме будет присутствовать обычная кнопка "submit" без новых параметров, то он вернет форме значения, установленные для элемента form.

 

Свойства formmethod и formaction поддерживаются всеми популярными браузерами

 

 

Элементы формы (input, select, textarea) за пределами формы

Общепринятый факт, что все элементы формы, принадлежащие ей должны находится внутри элемента <form>. Это уменьшает гибкость при разработке дизайна самих форм. Благодаря новому атрибуту "form" теперь любой элемент можно вынести за пределы формы и разместь любой элемент формы в любой части страницы. Для этого всего лишь необходимо форме <form> добавить идентификатор ID и затем значение этого идентификатора добавить ко всем элементам в качестве аттрибута.

 

<form id="MyForm"><input name="email" type="text" /></form>
<input form="MyForm" type="submit" />

 

На сегодняшний день аттрибут form поддерживается всеми популярными браузерами, за исключением Internet Explorer (вплоть до 10й версии).

comments powered by HyperComments
Понравился материал - нажмите, пожалуйста, на кнопку
=)