Главная страница   /   12.8. Работа с элементами вне формы (Руководство по HTML5

Руководство по HTML5

Руководство по HTML5

Адам Фриман

12.8. Работа с элементами вне формы

В HTML4 элементы input, button и другие, связанные с формой элементы, должны были содержаться внутри элемента form, как я показал во всех предыдущих примерах этой главы. В HTML5 это ограничение было снято, и вы можете связать элементы с формами в любом месте документа. Это делается при помощи атрибута form, который определяется input, button и другими, связанным с формой, элементами, о чем я расскажу в главе 14. Чтобы связать элемент с формой (form), которая не является предшествующей, вы просто устанавливаете атрибуту form значение id формы. В листинге 12-18 представлен пример.

Листинг 12-18: Использование атрибута form
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<meta name="author" content="Adam Freeman" />
	<meta name="description" content="A simple example" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
	<form id="voteform" method="post" action="http://titan:8080/form">
		<p>
			<label for="fave">Fruit:
				<input autofocus id="fave" name="fave" /></label>
		</p>
	</form>
	<p>
		<label for="name">
			Name:
			<input form="voteform" id="name" name="name" />
		</label>
	</p>
	<button form="voteform" type="submit">Submit Vote</button>
	<button form="voteform" type="reset">Reset</button>
</body>
</html>

В этом примере только один из элементов input является потомком элемента form. Другой элемент input и оба элемента button находятся вне элемента form, но они используют атрибут form, чтобы связать себя с формой.