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