Использование элемента button

Элемент button является более гибким, чем это может показаться на первый взгляд. Есть три способа, которыми вы можете использовать кнопку (button). Ключом к этим различным режимам работы является атрибут type, который имеет три значения. Они описаны в таблице 12-10.

Таблица 12-10: Значения атрибута type элемента button

Значение	Описание
`submit`	Указывает, что кнопка будет использоваться для отправки формы
`reset`	Указывает, что кнопка будет использоваться для сброса формы
`button`	Указывает, что кнопка не имеет конкретного смыслового значения

В следующих разделах я опишу каждое из этих значений и функционал, который они предлагают.

Использование элемента button для отправки формы

Если атрибут type установлен на submit, при нажатии кнопки будет отправлена форма, которая содержит кнопку. Это поведение по умолчанию, если атрибут type не применяется. Когда вы используете кнопку таким образом, у вас есть доступ к некоторым дополнительными атрибутами, которые описаны в таблице 12-11.

Таблица 12-11: Дополнительные атрибуты, которые можно использовать, если атрибут type установлен на submit

Атрибут	Описание
`form`	Определяет форму (или формы), с которой связана кнопка. Для более подробной информации смотрите раздел «Работа с элементами вне формы»
`formaction`	Переопределяет атрибут `action` элемента `form` и задает новый адрес, на который будет отправлена форма. Для более подробной информации по атрибуту `action` смотрите раздел «Настройка формы при помощи атрибута action» ранее в этой главе
`formenctype`	Переопределяет атрибут `enctype` элемента `form` и указывает кодировку для данных формы. Для более подробной информации по атрибуту `enctype` смотрите раздел «Настройка кодирования данных» ранее в этой главе
`formmethod`	Переопределяет атрибут `method` элемента `form`. Для более подробной информации по атрибуту `method` смотрите раздел «Использование атрибута method» ранее в этой главе
`formtarget`	Переопределяет атрибут `target` элемента `form`. Для более подробной информации по атрибуту target смотрите раздел «Указание цели для ответа формы» ранее в этой главе
`formnovalidate`	Переопределяет атрибут `novalidate` элемента `form`, чтобы указать, должна ли быть выполнена валидация со стороны клиента. Информацию по валидации вы можете узнать в главе 14

По большей части эти атрибуты позволяют изменить или дополнить конфигурацию элемента form и указать действие, метод, схему кодирования, цели, а также контролировать валидацию на стороне клиента. Эти атрибуты являются новым в HTML5. В листинге 12-15 показано, как можно применить эти атрибуты к элементу button.

Листинг 12-15: Использование атрибутов элемента button

<!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>
		<p>
			<label for="fave">Fruit:
				<input autofocus id="fave" name="fave" /></label>
		</p>
		<p>
			<label for="name">Name:
				<input id="name" name="name" /></label>
		</p>
		<button type="submit" formaction="http://titan:8080/form"
			formmethod="post">
			Submit Vote</button>
	</form>
</body>
</html>

В этом примере я опустил атрибуты action и method элемента form и добавил настройки при помощи атрибутов formaction и formmethod элемента button.

Использование элемента button для сброса формы

Если вы установите атрибут type на reset, то при нажатии кнопки все элементы ввода данных, которые присутствуют в форме, будут сброшены и возвращены в исходное состояние. Тут нет никаких дополнительных атрибутов, если элемент button используется таким образом. В листинге 12-16 показано добавление в документе HTML кнопки сброса.

Листинг 12-16: Использование элемента button для сброса формы

<!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="fave">Fruit:
				<input autofocus id="fave" name="fave" /></label>
		</p>
		<p>
			<label for="name">Name:
				<input id="name" name="name" /></label>
		</p>
		<button type="submit">Submit Vote</button>
		<button type="reset">Reset</button>
	</form>
</body>
</html>

На рисунке 12-11 вы можете увидеть результат сброса формы.

Рисунок 12-11: Сброс формы

Использование button как общего элемента

Если вы установите атрибут type на button, вы создадите элемент button, который является ну ... просто кнопкой. У нее нет никакого особого значения, и она не будет ничего делать, когда вы нажимаете ее. В листинге 12-17 показано добавление такой кнопки в HTML документ.

Листинг 12-17: Использование общей кнопки

<!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="fave">Fruit:
				<input autofocus id="fave" name="fave" /></label>
		</p>
		<p>
			<label for="name">Name:
				<input id="name" name="name" /></label>
		</p>
		<button type="submit">Submit Vote</button>
		<button type="reset">Reset</button>
		<button type="button">Do <strong>NOT</strong> press this button</button>
	</form>
</body>
</html>

Может показаться, что это не такой уж и разумный способ использования данного элемента, но как я объясню в главе 30, вы сможете использовать JavaScript для выполнения действий при нажатии кнопки. Это позволяет создавать собственную динамику и поведение на веб странице.

Обратите внимание, что я стилизовал текст, содержащийся в элементе button. Вы можете использовать любые фразовые элементы для разметки текста. Результат этой разметки можно увидеть на рисунке 12-12.

Рисунок 12-12: Добавление общего элемента button

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

или RSS канал: