Как создать кнопку HTML, которая действует как ссылка?

Question

Я хотел бы создать кнопку HTML, которая действует как ссылка. Таким образом, когда вы нажимаете кнопку, он перенаправляет на страницу. Я бы хотел, чтобы он был максимально доступным.

Мне бы тоже хотелось, чтобы в URL не было никаких дополнительных символов или параметров.

Как мне этого добиться?

---

Основываясь на ответах, опубликованных до сих пор, я сейчас делаю это:

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

, но проблема в том, что в Safari и Internet Explorer он добавляет знак вопроса в конце URL-адреса. Мне нужно найти решение, которое не добавляет символы в конец URL.

Для этого есть два других решения: использование JavaScript или стилизация ссылки, чтобы она выглядела как кнопка.

Использование JavaScript:

<button onclick="window.location.href='/page2'">Continue</button>

Но для этого, очевидно, требуется JavaScript, и по этой причине он менее доступен для программ чтения с экрана. Смысл ссылки - перейти на другую страницу. Поэтому попытка заставить кнопку действовать как ссылка - неправильное решение. Я предлагаю вам использовать ссылку и оформить ее так, чтобы она выглядела как кнопка .

<a href="/link/to/page2">Continue</a>

Answer 1

HTML

Простой HTML-способ - поместить его в <form>, где вы указываете желаемый целевой URL-адрес в атрибуте action.

<form action="http://google.com">
    <input type="submit" value="Go to Google" />
</form>

Если необходимо, установите CSS display: inline; в форме, чтобы сохранить его в потоке с окружающим текстом. Вместо <input type="submit"> в приведенном выше примере вы также можете использовать <button type="submit">. Единственное отличие состоит в том, что элемент <button> допускает дочерние элементы.

Вы интуитивно ожидаете, что сможете использовать <button href="http://google.com"> аналогично элементу <a>, но, к сожалению, нет, этот атрибут не существует согласно спецификации HTML .

CSS

Если CSS разрешен, просто используйте <a>, который вы стилизуете, чтобы выглядеть как кнопка, используя, среди прочего, свойство appearance ( только поддержка Internet Explorer в настоящее время (июль 2015 г.) все еще беден ).

<a href="http://google.com" class="button">Go to Google</a>

a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

Или выберите одну из множества библиотек CSS, таких как Bootstrap .

<a href="http://google.com" class="btn btn-default">Go to Google</a>

JavaScript

Если разрешен JavaScript, установите window.location.href.

<input type="button" onclick="location.href='http://google.com';" value="Go to Google" />

Answer 2

<button onclick="location.href='http://www.example.com'" type="button">
         www.example.com</button>

Answer 3

Если это внешний вид кнопки, которую вы ищете в базовом теге привязки HTML, то вы можете использовать Twitter Bootstrap , чтобы отформатировать любую из следующих общих ссылок / кнопок типа HTML для отображениякак кнопкаОбратите внимание на визуальные различия между версией 2, 3 или 4 фреймворка:

<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

Bootstrap (v4) Пример оформления:

Bootstrap (v3) внешний вид образца:

Bootstrap (v2) внешний вид образца:

Answer 4

Использование:

<a href="http://www.stackoverflow.com/">
    <button>Click me</button>
</a>

К сожалению, эта разметка больше не действительна в HTML5 и не будет ни проверять, ни всегда работать, как ожидается. Используйте другой подход.

Answer 5

Начиная с HTML5, кнопки поддерживают атрибут formaction. Лучше всего, никакой Javascript или обман не требуется.

<form>
  <button formaction="http://stackoverflow.com">Go to Stack Overflow!</button>
</form>

Предостережения

• Должен быть окружен <form> метками.
• <button> тип должен быть «отправить» (или не указан), я не могу заставить его работать с типом «кнопка». Что поднимает точку ниже.
• Переопределяет действие по умолчанию в форме. Другими словами, если вы сделаете это внутри другой формы, это вызовет конфликт.

Ссылка: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction Поддержка браузера: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Browser_compatibility

Answer 6

Это действительно очень просто и без использования каких-либо элементов формы. Вы можете просто использовать тег с кнопкой внутри :).

Как это:

<a href="http://www.google.com" target="_parent"><button>Click me !</button></a>

И он загрузит href на ту же страницу. Хотите новую страницу? Просто используйте target="_blank".

Answer 7

Если вы используете внутреннюю форму, добавьте атрибут type = "reset" вместе с элементом button.Это предотвратит действие формы.

<button type="reset" onclick="location.href='http://www.example.com'">
    www.example.com
</button>

Answer 8

<form>
    <input TYPE="button" VALUE="Home Page"
        onclick="window.location.href='http://www.wherever.com'"> 
</form>

Answer 9

Кажется, есть три решения этой проблемы (все с плюсами и минусами).

Решение 1: Кнопка в форме.

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

Но проблема заключается в том, что в некоторых версиях популярных браузеров, таких как Chrome, Safari и Internet Explorer, он добавляет знак вопроса в конце URL. Другими словами, код выше вашего URL будет выглядеть так:

http://someserver/pages2?

Есть один способ исправить это, но это потребует настройки на стороне сервера. Одним из примеров использования Apache Mod_rewrite будет перенаправление всех запросов с конечным ? на их соответствующие URL-адреса без ?. Вот пример использования .htaccess, но здесь есть полный поток :

RewriteCond %{THE_REQUEST} \?\ HTTP [NC]
RewriteRule ^/?(index\.cfm)? /? [R=301,L]

Подобные конфигурации могут различаться в зависимости от веб-сервера и используемого стека. Итак, краткое изложение этого подхода:

Плюсы:

1. Это настоящая кнопка, и семантически это имеет смысл.
2. Так как это настоящая кнопка, она также будет действовать как настоящая кнопка (например, перетаскиваемое поведение и / или имитировать щелчок при нажатии пробела, когда он активен).
3. Нет JavaScript, не требуется сложный стиль.

Минусы:

1. Трейлинг ? выглядит некрасиво в некоторых браузерах. Это может быть исправлено хаком (в некоторых случаях), использующим POST вместо GET, но чистый способ - перенаправление на стороне сервера. Недостатком перенаправления на стороне сервера является то, что он вызовет дополнительный HTTP-вызов для этих ссылок из-за перенаправления 304.
2. Добавляет дополнительный <form> элемент
3. Позиционирование элементов при использовании нескольких форм может быть сложным и становится еще хуже при работе с адаптивными дизайнами. Некоторое расположение может стать невозможным для этого решения в зависимости от порядка элементов. Это может в конечном итоге повлиять на удобство использования, если на эту задачу повлияет дизайн.

Решение 2. Использование JavaScript.

Вы можете использовать JavaScript для запуска onclick и других событий, чтобы имитировать поведение ссылки с помощью кнопки. Приведенный ниже пример можно улучшить и удалить из HTML, но он просто иллюстрирует идею:

<button onclick="window.location.href='/page2'">Continue</button>

Плюсы:

1. Простой (для базовых требований) и сохраняющий семантику, не требующий дополнительной формы.
2. Поскольку это настоящая кнопка, она также будет действовать как настоящая кнопка (например, перетаскиваемое поведение и / или имитация щелчка при нажатии клавиши пробела, когда она активна).

Минусы:

1. Требуется JavaScript, что означает менее доступный. Это не идеально для базового (основного) элемента, такого как ссылка.

Решение 3. Якорь (ссылка) в стиле кнопки.

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

Плюсы:

1. Простой (для базовых требований) и хорошая кросс-браузерная поддержка.
2. Не нужно <form> для работы.
3. Для работы не требуется JavaScript.

Минусы:

1. Семантика не работает, потому что вам нужна кнопка, которая действует как ссылка, а не ссылка, которая действует как кнопка.
2. Он не будет воспроизводить все варианты поведения решения № 1. Он не будет поддерживать то же поведение, что и кнопка. Например, ссылки перетаскиваются по-разному при перетаскивании. Также триггер ссылки «пробел» не будет работать без дополнительного кода JavaScript. Это добавит много сложности, так как браузеры не согласуются с тем, как они поддерживают keypress события на кнопках.

Заключение

Решение № 1 ( Кнопка в форме ) кажется наиболее прозрачным для пользователей с минимальными затратами труда. Если этот выбор не влияет на ваш макет и возможна настройка на стороне сервера, это хороший вариант для случаев, когда доступность является главным приоритетом (например, ссылки на странице ошибок или сообщения об ошибках).

Если JavaScript не является препятствием для ваших требований к доступности, то решение № 2 ( JavaScript ) предпочтительнее, чем № 1 и № 3.

Если по какой-то причине доступность является жизненно важной (JavaScript не является опцией), но вы находитесь в ситуации, когда ваш дизайн и / или конфигурация вашего сервера не позволяют использовать опцию № 1, тогда решение № 3 ( Якорь в стиле кнопки ) - хорошая альтернатива, решающая эту проблему с минимальным влиянием на удобство использования.

Answer 10

Вы можете просто поставить тег вокруг элемента:

<a href="http://google.com" target="_blank">
<button>My Button</button>
</a>

https://jsfiddle.net/hj6gob8b/