HTML / 9. Формы

Тег <button>

Как уже говорилось выше, вы создаете активную кнопку в стандартном HTML- или XHTML-коде, включая спецификацию ее типа в стандартный тег <input>. Например, элемент формы <input type=submit> создает кнопку, которая, если была выбрана пользователем, просит броузер послать содержимое формы обрабатывающему серверу или по адресу электронной почты (вариант mailto). Что касается отображения, то у вас нет никаких средств управления внешним видом кнопки, если не считаться с тем, что можно заменить принятую по умолчанию надпись «Submit» на другое слово или короткую фразу (например, «Нажми» или «Вот здесь!»).

Введенный впервые стандартом HTML 4.0, тег (button) действует так же, как кнопка <input>, но предоставляет больше возможностей для управления тем, как броузер будет отображать этот элемент. В частно-сти, все атрибуты, которые можно использовать с элементом <input type=button>, пригодны для тега (button).

Кнопка (button)
Ни HTML-, ни XHTML-стандарты не излагают ясно, какие еще усовершенствования в отображение кнопки в форме должен привносить элемент (button), кроме предложения выводить его содержимое «трехмерным» образом и визуально изображать нажатие кнопки, выбранной пользователем, утапливая ее и отпуская назад. Все популярные броузеры поддерживают тег (button).

Элемент (button) приспособлен для размещения значительно более разнообразного и богатого содержимого, чем его <input>-аналог. Все, что находится между тегами (button) и (/button), становится содержимым кнопки, включая любое приемлемое содержимое тела документа, такое как текст или мультимедийные элементы. К примеру, вы могли
бы включить в кнопку изображение и относящийся к нему текст, создав таким образом кнопку с привлекательной пиктограммой, обладающей подписью. Единственный недопустимый элемент – это карта, поскольку ее чувствительное к мыши и клавиатуре поведение входит в конфликт с функцией кнопки в форме.

Атрибут type
Используйте атрибут type тега (button) для определения действия кнопки. Значением его могут быть submit, reset или button. Подобно его <input>-аналогу, выбранный пользователем (button type=submit) предлагает броузеру упаковать и отправить содержимое формы обрабатывающему серверу или послать ее по электронной почте mailto получателю. Использование type=reset создает традиционную кнопку сброса формы, а включение type=button приводит к обычной кнопке.

Например, посмотрите, как броузер выводит следующую вставку пиктограммы exclaim.gif в трехмерную кнопку, которая нажимается и выскакивает обратно, когда пользователь щелкает на ней мышью.

Изображая движение кнопки, броузер одновременно отправляет форму серверу:

(button type=submit)
Order <img src="icons/exclaim.gif" align=middle alt="Order Now"> Now!
(/button)

Отметьте, что можно применять богатый набор атрибутов тега <img>, включая align и alt, когда изображение содержится в кнопке (button).

Если тег (button) так похож на элемент <input type=button>, зачем он нужен? Единственный резон – допустить в кнопку гораздо более богатое содержимое. Если ваши кнопки – это обычные текстовые кнопки, вам хватит тега <input>. Если же вы хотите создать причудливую кнопку со смешанным содержимым, вам придется использовать тег (button).

Статьи по HTML на эту тему:

Атрибуты формы общего назначения
Группировка элементов формы и обеспечение их надписями
Многострочные области ввода текста
Программирование форм
Элементы множественного выбора

Вернуться в раздел: HTML / 9. Формы