Открыть меню    

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

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

Элемент button:

HTML

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

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

Элемент button, сам по себе, не сможет выполнить “переход на новый URL”. Шло много разговоров об использовании атрибута href: “href везде”, но ничего не вышло.

Клик по кнопке делает что-то лишь тогда, когда кнопка находится в естественной среде обитания кнопки.

Button есть элемент формы

Формы имеют кнопки отправки. Например:

HTML

    <form action="/" method="post">
  <input type="submit" value="Submit">
</form>

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

HTML

    <form action="/" method="post">
  <button>Отправить</button>
</form>
При помощи кнопки (button) также можно сбрасывать данные формы в первоначальное состояние. Для этого у атрибута type установите значение reset.

HTML

    <form action="/" method="post">
  <button type="reset">Reset</button>
</form>

Button может иметь контент

Основная причина для использования button это наличие открывающего и закрывающего тега button. Наличие открывающего и закрывающего тега дает нам возможность размещать внутри кнопки любые html-элементы. Часто можно увидеть следующую картину:

HTML

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

Для input этот смешанный контент было бы трудно осуществить (у input может быть <input type="image">).

Вы свободны расположить на кнопке сколь угодно контента (html-разметки), так же вы можете использовать псевдо-элементы.

Стоит отметить, что браузеры по-разному стилизуют (по умолчанию) элемент button. Вы можете назначить для кнопки свой стиль, но перед тем как подключать свой стиль потребуется сбросить стиль кнопки по умолчанию, например:

HTML

    <!DOCTYPE html>
<html>
<head>
<title>Сброс для тега button</title>
<style type="text/css">
button { 
background: none; border: none; margin: 0; 
padding: 0; font-size: 0; line-height: 0; 
width: auto; overflow: visible; 
}
button div { border: 1px solid; font-size: 12px; 
line-height: 12px; }
</style>
</head>
<body>
    <form>
        <button type="submit">
            <div>Hello</div>
        </button>
    </form>
</body>
</html>

Давайте считать: “Если кнопка не имеет атрибута href, то это button”

HTML

    <a href="#0">
  я любопытен и устал создавать такие кнопки
</a>

Выше нет необходимости в href. 0 здесь лишь для того, чтобы не прыгать по странице, так как id не может начинаться с числа.

Скорее всего html-код, приведенный выше, делает следующее: по клику на элементе выполняется какое-либо действие javascript. Так или иначе, это лучше, чем использовать div, так как вы получаете изменение курсора и стили по умолчанию.

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

HTML

    <button>
    за пределами формы я бесполезен
</button>

Что лучше использовать: элемент button или ссылку с фиктивным href?

Если вам нужно кнопка, которая не ведет на другую страница, а просто выполняет какое-либо действие на javascript лучше всего использовать button.

Теоретически, тег <button> должен располагаться внутри формы, устанавливаемой элементом <form>. Однако, браузеры не выводят сообщение об ошибке и корректно работают с тегом <button>, если он встречается вне пределов тега <form>. Однако, если необходимо результат нажатия на кнопку отправить на сервер, помещать <button> в блок <form> обязательно.

Давайте вставим кнопку при помощи javascript

Кнопка будет создана и вставлена в документ при работающим javascript:

js

    // 1. Создаем button
var button = document.createElement("button");
button.innerHTML = "Do Something";

// 2. Вставляем куда-нибудь
var body = document.getElementsByTagName("body")[0];
body.appendChild(button);

// 3. Добавляем обработчик событию клик
button.addEventListener ("click", function() {
  alert("did something");
});

Когда ссылка предпочтительнее

Если есть хоть любой намек на наличие (использование) href следует использовать якорь (а уж тем более, когда href переопределяется javascript). Например, прогрессивное улучшение в лучших традициях:

  • Кнопка “search” вызывает действие ajax – но href можно указать на страницу /search/
  • Кнопка “опубликовать” запускает (строит) новую публикацию - но href можно указать на страницу /publish/
  • Миниатюра ведет на большое изображение – href может ссылаться на url большого изображения.

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

Скажем использовать ссылку целесообразно. После того как вы воспользовались идеей с прогрессивным улучшением может появиться проблема с доступностью.

Как вариант:

HTML

    <a href="#meaningful" class="button" role="button">
  I'm good
</a>

использованы материалы

Комментарии к статье

аватарка пользователя
2014-04-11
Arris

> Но, к сожалению, за пределами формы элемент button также
> становится бессмысленным.

Ничего подобного!

Во-первых, у кнопки можно указать атрибут form="id формы" и связать кнопку в произвольном месте страницы с произвольной формой.
А во-вторых, onclick можно обрабатывать JS.