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

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com. Продолжаем тему построения HTML-форм и рассмотрим сегодня процесс создания кнопок на сайте при помощи тега button и его атрибутов. В прошлой статье мы уже отчасти разобрали возможности для формирования различных кнопок с использованием тега input, теперь пришло время расширить наши познания.

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

Тем более, что современные технологии в лице специальных инструментов для разработчиков, которые имеются в любом современном веб-обозревателе (в этом смысле первой ласточкой был небезызвестный плагин Firebug для браузера Firefox), позволяют во многом автоматизировать процесс редактирования и добавления элементов на страницу.

Применение тега 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 используется множество атрибутов, которые могут принимать те или иные значения. Ниже даны варианты их применения с нужными пояснениями, соответствующими HTML-кодами и отображаемыми кнопками.

1. Autofocus [HTML5]. Этот атрибут позволяет получить установку фокуса после загрузки страницы, то есть можно нажать кнопку без подведения к ней курсора мыши, например, с помощью кнопки Enter на клавиатуре. Обратите внимание, что здесь использован тег fieldset.

<form>
<fieldset>Нажимая кнопку &#171;Далее&#187; вы соглашаетесь со всеми правилами и условиями
<button autofocus value="next">Далее</button>
</fieldset>
</form>

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

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

3. Form [HTML5] — этот атрибут используется для того чтобы связать кнопку с формой. Это нужно в тех случаях, когда кнопка не располагается внутри тега form.

<form id="database"><input placeholder="ваш e-mail" name="user"></form>
<button type="submit" form="database">Ответить</button>

4. Formaction [HTML5] — этот атрибут определяет адрес обработчика формы (обычно файл, написанный в виде скрипта). Он аналогичен атрибуту action тега form.

<form> 
   <p><input placeholder="Ваше имя" name="user"></p>
   <p><button formaction="email.php">Отправить</button></p>
</form>

5. Formmethod [HTML5] — опять же по аналогии с атрибутом method тега form определяет способ передачи данных («get» либо «post»).

<form>
  <p>Загрузите файл:</p> 
  <p><input name="file" type="file"></p>
  <p><button formaction="formdata.php" formmethod="post" 
      formenctype="multipart/form-data">Отправить</button></p>
</form>

6. Formenctype [HTML5] — определяет способ кодирования данных формы в случае их отправки на веб-сервер. Указывается явно, когда используется поле для отправки файла (input type="file"). По своим свойствам тождественен атрибуту enctype тега <form>.

<form>
  <p>Загрузите файл:</p> 
  <p><input name="file" type="file"></p>
  <p><button formaction="formdata.php" formmethod="post" 
      formenctype="multipart/form-data">Отправить</button></p>
</form>

7. Formnovalidate [HTML5] — данный атрибут отменяет проверку на корректность данных, которые были введены в форму пользователем. По умолчанию он не действует. Эта проверка осуществляется автоматически при отправке формы для полей input type="email" и input type="url", а также, если присутствует атрибут pattern или required тега input.

<form action="place.php">
  <p><input required placeholder="Имя"></p>
  <p><input type="email" required placeholder="Ваш email"></p>
  <p><input type="url" required placeholder="Сайт"></p>
  <p><button formnovalidate>Отправить без проверки</button></p>
</form>

8. Formtarget [HTML5] — устанавливает место (наименование фрейма или окно), куда будет загружаться результат, возвращаемый обработчиком формы, в виде HTML-документа.

<form>
   <p><iframe name="out" height="40" width="180"></iframe></p>
   <p>Ваше имя:</p> 
   <p><input name="user"></p>
   <p><button formaction="place.php" formtarget="out">Отправить</button>
  </form>

9. Name — уникальное название кнопки. Если на сайте существует несколько различных кнопок и необходимо их идентифицировать при отправке значения каждой из кнопок на сервер либо для доступа к ним через скрипты, то используют данный атрибут.

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

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

<form action="place.php">
   <p><input type="text" name="user"></p>
   <p><button type="reset">Очистить форму</button></p> 
   <p><button type="submit">Отправить форму</button></p>
  </form>

11. Value — определяет параметр кнопки, который будет отправлен обработчику формы (отправляется пара "имя=значение", где имя устанавливает атрибут name тега button, а значение — атрибут value). Значение value может не совпадать с содержанием текста на кнопке.

<form action="place.php">
   <p><input type="text" name="user"></p>
   <p><button value="12345abcde" name="hidden" type="submit">Отправить форму</button></p>
  </form>

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