Когда использовать элемент Button

Вы используете его когда, эм, когда вам нужна кнопка на странице, по которой пользователи могут кликнуть. Верно? Что ж, увы, все немного сложнее. Хотя не все так плохо, давайте разберемся.

Он выглядит вот так:

<button>
  Сделай что-нибудь
</button>

К чему чаще всего приводит клик по чему-либо на сайте? К переходу на новый URL-адрес, будто вы кликнули по ссылке (элемент <a href="/example/"></a>).

Сам по себе элемент <button> не может сделать этого. За прошедшие годы было много разговоров о том, что стоит “сделать href доступным везде”, но ничего из этого не вышло.

Тем не менее при клике кнопка действительно что-то делает, когда ее используют в естественной для нее среде…

Кнопка — это элемент формы

У форм есть кнопки отправки. Возможно вам сразу приходит в голову что-то такое:

<form action="/" method="post">
  <input type="submit" value="Отправить">
</form>

По умолчанию, элемент <button> внутри <form>, ведет себя идентично приведенному выше элементу <input>.

<form action="/" method="post">
  <button>Отправить</button>
</form>

Однако ради UX, у форм также могут быть кнопки сброса. Вы можете дублировать такое поведение изменив стандартное значение атрибута type с submit на reset.

<form action="/" method="post">
  <button type="reset">Сбросить</button>
</form>

Клик по такой кнопке отчистит все остальные поля ввода (и текстовые области) объемлющего элемента <form>.

Кнопки могут содержать контент

Главная причина использовать элемент <button> в том, что у него есть и открывающий и закрывающий (</button>) теги. Это означает, что внутри что-то может быть. Наиболее частый вариант использования таков:

<button>
  <img src="tiny_birthday_cake.png" alt="">
  Отправить
</button>

И хотя элемент input может быть таким — <input type=»image»>, добиться смешения типов контента довольно сложно.

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

Давайте оставим стилизацию <button> на будущее, но различные браузеры обычно применяют собственные особенные стили к кнопкам. Вам захочется либо оставить стандартный для каждого браузера стиль, либо заменить его во всех браузерах на свой собственный, новый стиль.

Предположим: «Если кнопка не имеет полезного значения в атрибуте href, то она является элементом button»

Я недавно сказал, что мне нравиться такое мнение. Это послужило для меня пинком к написанию данной статьи. Тогда я размышлял над тем, насколько мне нравится его семантика. Как например в:

<a href="#0">
 Я уже устал делать кнопки вот так.
</a>

В атрибуте href нет полезного значения. Здесь указан 0, так что перехода к разным частям страницы не происходит, поскольку идентификаторы не могут начинаться с числа.

Скорее всего, приведенный выше HTML код означает: Я собираюсь сделать клик, который будет обработан JavaScript. Так или иначе, это лучше чем использовать <div>, потому что вы получаете и изменение курсора, и все остальные стандартные стили.

Если вам не нравятся эти бесполезные href’ы, то элемент <button> может быть достойной альтернативой. Но к сожалению, вне контекста элемента <form>, элемент <button> в равной степени бесполезен.

<button>
  За пределами <form>, я просто бесполезен.
</button>

Но в любом случае, <button> лучше

Даже если <button> за пределами формы ни к чему не способен без помощи JavaScript, он все равно лучше подходит для любых действий за исключением смены страниц. Фиктивные href-ссылки уж точно не кажутся правильным решением.

Хорошо. Тогда давайте вставим его при помощи JavaScript.

Вероятно, это лучшее решение. Если для обработки клика по элементу необходим JavaScript, то в случае если JavaScript отключен, и самого элемента может не быть. Мы можем сделать так:

// 1. Создаем кнопку
var button = document.createElement("button");
button.innerHTML = "Сделай что-нибудь";

// 2. Вставляем
var body = document.getElementsByTagName("body")[0];
body.appendChild(button);

// 3. Вещаем обработчик собыий
button.addEventListener("click", function() {
  alert("Что-нибудь сделал");
});

«Добавление кнопки» вполне может быть частью вашего процесса JavaScript разработки..

Когда от ссылок больше толку

Если существует какое-либо осмысленное значение href которое вы можете задать для ссылки, то любой ценой используйте якорь. Даже если вы переопределяете это поведение средствами JavaScript. Это прогрессивное улучшение в его лучшем проявлении. Например:

  • Кнопка поиска обычно инициализирует такую штуковину, как ajax-поиск с опережающим вводом, а href может вести на страницу /search/.
  • Кнопка «Опубликовать» запускает следующий этап публикации чего-либо, созданного пользователем, а href может лишь указывать на страницу /publish/.
  • Кнопка с миниатюрой изображения открывает блок с его полноразмерной версией, а href может просто указывать на URL-адрес файла полноразмерной версии.

Если осмысленных значений нет, вставляйте кнопку с помощью JavaScript.

Проблемы доступности

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

<a href="#meaningful" class="button" role="button">
  Я хорош
</a>

Но пока вам рано радоваться. MDN доступно разъясняет:

Внимание: Будьте предельно осторожны задавая для атрибута role ссылки значение buttton. Ожидается, что кнопки активируются при нажатии клавиши «Пробел», в то время как ссылки активируются при нажатии клавиши «Enter». Другими словами, добавления role="button" для использования ссылки в качестве кнопки не достаточно. Также необходимо будет добавить обработчик нажатия клавиши «Пробел» в целях обеспечения соответствия с поведением кнопок.

Уяснили? Вы активируете ссылки и кнопки разными клавишами, так что учитывайте это.

Идите и, эмм, и делайте кликабельные элементы правильно.

Оригинал статьи на английском на сайте CSS-Tricks

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *