Главная страница   /   13.3. Использование элемента input для создания кнопок (Руководство по HTML5

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

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

Адам Фриман

13.3. Использование элемента input для создания кнопок

Типы submit, reset и button элемента input создают кнопки, которые очень похожи на те, что создаются при помощи элемента button, описанного в главе 12. В таблице 13-6 представлены эти типы элемента input.

Таблица 13-6: Типы элемента input для создания кнопок
Тип Описание Дополнительные атрибуты
submit Создает кнопку, которая отправляет форму. formaction, formenctype, formmethod, formtarget, formnovalidate
reset Создает кнопку, которая сбрасывает форму. Нет
button Создает кнопку, которая не производит никаких действий. Нет

Дополнительные атрибуты, которые доступны при использовании типа submit, такие же, как при использовании элемента button. Вы можете найти описания этих атрибутов и примеры с ним в главе 12. Типы reset и button не определяют дополнительных атрибутов.

Для всех этих трех типов элемента input метка, которая отображается на кнопке, берется из атрибута value, как показано в листинге 13-6.

Листинг 13-6: Использование элемента input для создания кнопок
<!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 method="post" action="http://titan:8080/form">
		<p>
			<label for="name">
				Name:
				<input value="Adam" id="name" name="name" />
			</label>
		</p>
		<p>
			<label for="password">
				Password:
				<input type="password" placeholder="Min 6 characters"
					id="password" name="password" />
			</label>
		</p>
		<p>
			<label for="fave">
				Fruit:
				<input value="Apples" id="fave" name="fave" />
			</label>
		</p>
		<input type="submit" value="Submit Vote" />
		<input type="reset" value="Reset Form" />
		<input type="button" value="My Button" />
	</form>
</body>
</html>

На рисунке 13-9 вы можете увидеть, как браузер отображает эти кнопки. Очевидно, что они выглядят так же, как при использовании элемента button.

Рисунок 13-9: Использование элемента input для создания кнопок

Разница между использованием элемента input для создания кнопок и элемента button заключается в том, что вы можете использовать элемент button для отображения текста с разметкой (пример этого представлен в главе 12). Некоторые старые браузеры, в частности, IE6, совершают странные вещи с элементом button, поэтому большинство веб сайтов, как правило, стараются использовать элементы input: они традиционно были продуманны и лучше реализованы.