Когда следует использовать элемент 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>
использованы материалы
Комментарии к статье
> Но, к сожалению, за пределами формы элемент button также
> становится бессмысленным.
Ничего подобного!
Во-первых, у кнопки можно указать атрибут form="id формы" и связать кнопку в произвольном месте страницы с произвольной формой.
А во-вторых, onclick можно обрабатывать JS.