Когда следует использовать элемент Button
Вы используете его, хм ... ну, когда хотите разместить на странице кнопку, по которой пользователь может кликнуть, не так ли? К сожалению, все немного сложнее. В принципе это близко к истине, но давайте изучим вопрос глубже.
Сам элемент выглядит таким образом:
<button>
Сделать что-нибудь
</button>Что является самым распространенным результатом клика на что-нибудь на веб-сайте? Переход на новый URL-адрес, как если бы вы нажали ссылку.
Элемент <button> сам по себе, не может этого сделать. Было много разговоров о том, чтобы разрешить «href везде», но ничего из этого так и не вышло.
При нажатии на кнопку действительно производятся определенные действия, если используется соответствующий контекст...
Кнопка – это элемент формы
Веб-формы могут содержать кнопки для выполнения (подтверждения) действий. Вы можете подумать, что это выглядит приблизительно так:
<form action="/" method="post">
<input type="submit" value="Submit">
</form>Элемент в оболочке <button>, по умолчанию, ведет себя именно так, как и показано выше.
<form action="/" method="post">
<button>Submit</button>
</form>Однако формы также могут иметь кнопки отмены. Вы можете дублировать вид действия кнопки, изменив поведение по умолчанию с выполнения (подтверждения) действия на отмену:
<form action="/" method="post">
<button type="reset">Reset</button>
</form>Нажатие на эту кнопку приведет к удалению всех других полей ввода (и текстовых областей) из родительского блока <button>.
Кнопки могут содержать контент
Основной причиной использования элемента <button> является то, что он содержит и открывающийся, и закрывающийся теги (<button>). А это значит, что его можно разграничить с любым другим кодом. На практике часто возникает такая ситуация:
<button>
<img src="tiny_birthday_cake.png" alt="">
Подтвердить
</button>Пока будет сохраняться , этот смешанный контент будет отображаться на экране.
Насколько я могу судить, не существует особых ограничений относительно того, что вы можете разместить внутри кнопки, так что вы можете поместить туда что угодно, создав действительно причудливые кнопки. Возможно использование также и псевдо элементов.
Давайте оставим пока тему стилей для <button>, хотя разные браузеры обычно имеют специальные стили, которые применяются к кнопкам. Если захотите, вы можете оставить стили, применяемые браузерами, или же полностью удалить их, и тогда ваш стиль по умолчанию будет заменять стили браузеров.
Учтите: «если кнопка не имеет валидного href, это просто элемент »
Помните, раньше я писал, что эта тема доставляет мне истинное наслаждение. Это то, что вдохновило меня на написание данной статьи. Я представлял себе, какое удовольствие получу, рассматривая различные казусы. Как, например:
<a href="#0">
Меня уже достали такие кнопки.
</a>Ссылка в этой кнопке не имеет смысла. 0 использован только для того, чтобы не осуществлялся переход на другую страницу, потому что идентификаторы не могут начинаться с этой цифры.
Скорее всего, выше приведенный код означает что-то типа: Я собираюсь кликнуть кнопку, чтобы сделать что-то с JavaScript. Так или иначе, это, кажется, лучше, чем использовать обычный <div>, потому что вы получаете возможность изменения вида курсора и все остальные стили по умолчанию.
Если вам не нравятся эти бессмысленные ссылки, для <button> существует неплохая альтернатива. Но, к сожалению, вне контекста блока <form> <button> по-прежнему остается бессмысленным элементом.
<button>
Вне <form> я бесполезна.
</button>Однако <button> все равно, кажется, лучше
Даже если <button> ничего не делает, находясь за пределами <form>, этот элемент все равно, по-моему, лучше использовать для прочих действий, которые не требуют перехода на другую страницу. Во всяком случае, они лучше, чем фиктивные ссылки.
Хорошо. Давайте вставим JavaScript
Это, наверное, лучшее решение. Если JavaScript требуется для любых действий связанных с кликами, то для элемента <button> в принципе можно обходиться и без запуска JS.
Но мы можем сделать следующее:
// 1. Создаем кнопку
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");
});Вы можете легко сделать «кнопку добавления» частью рабочего процесса JavaScript.
Когда целесообразнее использовать ссылки
Если у вас есть какие-нибудь гипертекстовые переходы на другие страницы, то целесообразнее оформлять их ссылкой, чтобы можно было использовать анкор. Даже если вы переназначаете ее поведение через JavaScript.
Это прогрессивное улучшение в лучшем его применении. Например:
- Кнопка поиска обычно порождает запуск поисковых сценариев Ajax - в то время как ссылка просто может указывать на страницу поиска;
- Кнопка «опубликовать» запускает следующий шаг публикации чего-то, что нужно пользователю - но ссылка может просто вести на страницу / опубликовать /;
- Кнопка с миниатюрой изображения открывает отдельную панель, на которой выводится изображение в большем размере - а ссылка может просто указывать URL-адрес этого увеличенного изображения.
Если ничего больше не подходит, вставляйте кнопку с JavaScript.
Связанные проблемы
Допустим, вы использовали анкорную ссылку. Но только вы решили похвалить себя за то, что идете в ногу со временем и используете прогрессивное улучшение, как возникают некоторые проблемы.
У вас может получиться что-то похожее на то, что получилось у меня!
<a href="#meaningful" class="button" role="button">
Я в порядке
</a>Но вы сами еще не совсем в порядке. MDN подробно рассматривает данную проблему:
Обратите внимание: Будьте осторожны при разметке ссылок с функциями кнопки. Действия кнопки, как правило, вызываются с помощью клавиши «Пробел», в то время как действия ссылок вызываются через клавишу Enter.
Другими словами, когда вы используете ссылки, которые должны вести себя, как кнопки, добавления только role="button" недостаточно.
Также необходимо будет добавить ключ обработчика действий, который будет реагировать на нажатие клавиши «Пробел», чтобы обеспечить соответствие с оригинальной кнопкой.
Что получается? Вы активируете ссылки и кнопки с разными ключами. Поэтому примите это во внимание.
Ну что ж, на этом все. И хм... делайте интерактивные вещи правильно.