Тег button и его атрибуты — создание кнопок на сайте

Доброго здоровья всем читателям моего блога! Продолжаем тему построения html форм, сегодня рассмотрим создание кнопок на сайте при помощи тега button и его атрибутов. В прошлой статье я давал вам описание форм в html, которые можно получить при использовании тегов form и input, теперь двинемся дальше.

Прежде чем продолжить, я хочу предостеречь вас, уважаемые читатели, от легкомысленного отношения к изучению языка гипертекстовой разметки html в общем и его основных тегов в частности. Даже при использовании современных средств для построения сайтов, таких как движок WordPress, знание основ языка разметки точно лишним не будет.

Тем более, применение для этих целей таких средств как великолепный плагин Firebug для Мазила Фаерфокс (кстати, последние версии других популярных браузеров обладают уже встроенными подобными функциями) или html и php редактор notepad plus plus делает этот процесс интересным и увлекательным, потому что во многом облегчают жизнь вебмастеру. Ну а теперь незамедлительно перехожу к сегодняшней теме.

Применение тега button и его атрибутов для создания кнопок

Помните, в прошлой статье я писал о создании кнопок на сайте посредством тега input и с помощью его самого распространенного атрибута type (который может иметь три значения для создания кнопок: button, reset, submit). Так вот тег button (не путать со значением атрибута type=“button” тега input) может предложить гораздо более широкие возможности. На кнопке, смонтированной с его помощью, можно расположить практически любые элементы, в том числе изображения. Например:

Кнопка с надписью	<button>Кнопка с надписью</button>	Кнопка с надписью
Кнопка с изображением	<button><img style="vertical-align: middle" src="/images/gortenziia.jpg" alt="Гортензия"</button>

Далее. Как вы понимаете, для расширения функциональных возможностей того или иного тега форм используется множество атрибутов, которые могут принимать те или иные значения. Ниже даю примеры применения некоторых атрибутов тега button с необходимыми пояснениями.

1. accesskey - атрибут для определения горячих клавиш, с помощью которых происходит переход фокуса к элементу формы. Проще говоря, для нажатия на кнопку не обязательно подводить к ней курсор мыши, а достаточно нажать на клавишу, название которой задано с помощью этого атрибута. Латинские буквы (a-z) или цифры (0-9). Например, подставив значение 1 и a, получаем горячие клавиши, с помощью которых можно нажимать на кнопку.

Однако надо помнить, что в различных браузерах эта функция реализуется по-разному и используется сочетания клавиш. Для данного примера (горячие клавиши 1 и a) в самых популярных браузерах это выглядит так: Google Chrome (как загрузить, установить, обновить) - Alt+1, Alt+A; Firefox - Shift+Alt+1, Shift+Alt+A; Opera (здесь статья о том, как бесплатно скачать, установить, обновить и настроить браузер Опера) - Shift+1, Shift+A; Internet Explorer - Alt+1, Alt+A

<button accesskey="1">1</button><button accesskey="a">a</button>

2. autofocus - этот атрибут позволяет получить установку фокуса после загрузки страницы, то есть можно нажать кнопку без подведения к ней курсора мыши, например, с помощью кнопки Enter на клавиатуре. Обратите внимание, что здесь использован тег fieldset, который мы еще будем рассматривать.

3. disabled - с помощью данного атрибута блокируется доступ к кнопке и ее изменение. Таким образом, она становится недоступной для пользователя. Значение такой кнопки не передается в файл обработчика (скрипта).

<button>Активная кнопка</button>

 <button disabled>Неактивная кнопка</button>

4. form - этот атрибут используется для того чтобы связать кнопку с формой. Это нужно в тех случаях, когда кнопка не располагается внутри тега form. В качестве значения атрибута form используется значение атрибута id тега form (например, id=“database”).

5. formenctype - этот атрибут тега button позволяет установить способ кодировки при отправке данных обработчику и определяется тремя значениями:

• application/x-www-form-urlencoded  - в этом случае при кодировке вместо пробелов ставится +, а вместо русских букв появляются их шестнадцатеричные значения, например, что-то типа такого: %2F%3D%26%3F%2%3D%26%3D
• multipart/form-data - при использовании этого значения данные не кодируются
• text/plain - вместо пробелов используется знак +, буквы и другие символы кодировке не подвергаются

Надо отметить, что если значение атрибута  formenctype не проставлено, то по умолчанию используется application/x-www-form-urlencoded, то есть полное кодирование.

6. formaction - этот атрибут определяет адрес обработчика формы (обычно файл, написанный в виде скрипта). Он аналогичен атрибуту action тега form.

<button formaction="email.php">Отправить</button>

7. formmethod - опять же по аналогии с атрибутом method тега form он определяет способ передачи данных (get либо post).

<button formaction="email.php" formmethod="post"
   formenctype="multipart/form-data">Отправить</button>

8. formnovalidate - этот атрибут отменяет проверку на корректность данных, которые были введены в форму пользователем. По умолчанию он не действует. Эта проверка осуществляется автоматически при отправке формы для полей input type=“email” и input type=“url”.

9. type - определяет тип кнопки по ее функции. Внешний вид кнопок никак не отличается, однако они обладают различным функционалом, который определяется следующими значениями:

• button - обычная кнопка
• reset - кнопка для очистки данных формы и возвращение их в первоначальное состояние
• submit - кнопка для отправки данных формы обработчику

10. name - уникальное название кнопки. Если на сайте существует несколько различных кнопок и необходимо их разделить, то используют данный атрибут. В качестве значения применяют набор символов их букв или цифр.

<button name="send" value="ОК" type="submit">Особая кнопка 1</button>

11. value - определяет значение кнопки, которое будет отправлено обработчику формы вместе со значением атрибута name. Значение атрибута value может не совпадать с содержанием текста на кнопке.

<button name="hidden" value="15а" type="submit">Отправить</button>

Целью данного поста было познакомить вас, уважаемые читатели, со всеми возможностями, которые предоставляет тег button и его атрибуты для создания кнопок на сайте. Надеюсь, для вас не осталось темных пятен по этой теме. Это не последняя публикация, продолжение обязательно последует, поэтому милости прошу подписываться на обновления через ленту RSS или по электронной почте.