воскресенье, 27 ноября 2016 г.
Правильный способ сделать кнопку ссылкой
Иногда возникает задача оформить ссылку как стандартную кнопку. В общем случае так делать нежелательно: ссылка по определению просто указывает на определённый ресурс, в то время как нажатие кнопки обычно инициирует некоторое действие. Но если задача возникла, то имеет смысл хотя бы делать это правильно.
Правильно
Синтаксически правильное («валидное») и кроссбраузерное решение состоит в том, чтобы заключить кнопку в простейшую форму. Кнопке при этом следует добавить атрибут
type="submit", чтобы её нажатие инициировало отправку формы (в современных браузерах и IE8+ атрибут необязателен), а в атрибут action формы — поместить URL-адрес, на который должна вести «кнопка-ссылка»:<form action="/example/">
<button type="submit">Кнопка-ссылка</button>
</form>
«Кнопка-ссылка» из данного примера ведёт на страницу с адресом
/example/.Строка запроса
Строка запроса представляет собой GET-параметры в виде пар
имя=значение, фигурирующие в URL-адресе после первого вопросительного знака.
Если URL-адрес, на который должна указывать ссылка, содержит строку запроса, то следует для каждого из GET-параметров добавить в форму скрытое поле с соответствующими атрибутами
name и value:<form action="/example/">
<input type="hidden" name="foo" value="bar" />
<input type="hidden" name="lorem" value="ipsum" />
<button type="submit">Кнопка-ссылка</button>
</form>
Данная форма ведёт на страницу
/example/?foo=bar&lorem=ipsum.Chromium/Blink и WebKit
В браузерах на основе движков Chromium / Blink (Chrome, Opera 15+, Яндекс.Браузер, Vivaldi) и WebKit (Safari) есть баг (1, 2), из-за которого вопросительный знак, отделяющий строку запроса от основной части адреса, добавляется к адресу даже в случае отсутствия полей в форме. Поэтому, например, форма:
<form action="/example/">
<button type="submit">Кнопка-ссылка</button>
</form>
приведёт на адрес
/example/? вместо правильного /example/.
Обойти это можно, настроив автоматическое серверное перенаправление (редирект) с URL-адреса, оканчивающегося вопросительным знаком, на такой же URL-адрес без воспросительного знака.
Неправильно
Кнопка внутри ссылки
Нередко встречается решение «в лоб», состоящее в том, чтобы просто поместить элемент
BUTTON внутрь ссылки:<a href="/example/"><button>Кнопка-ссылка</button></a>
Но, во-первых, согласно HTML5 такое решение синтаксически некорректно («невалидно»): ссылка не должнасодержать интерактивные элементы; во-вторых, такая ссылка не будет работать в Internet Explorer (IE) ниже 9-й версии.
Кнопка с JS-обработчиком щелчка
Порой используется кнопка с JavaScript-обработчиком события щелчка:
<button onclick="location.href = '/example/'">Кнопка-ссылка</button>
Но и это решение имеет серьёзные недостатки:
- не работает при выключенном JavaScript;
- возможны проблемы с индексацией поисковиками, не исполняющими JavaScript-код.
0 коммент.:
Отправить комментарий