Руководство по HTML5
Адам Фриман
Использование элемента 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
: они традиционно были продуманны и лучше реализованы.