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

Question

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

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

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

как я могу добиться этого?

на основе ответов, опубликованных до сих пор, я в настоящее время делаю это:

<form method="get" action="/page2">

    <button type="submit">Continue</button>

</form>

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

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

С Помощью JavaScript:

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

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

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

851 8

html button anchor hyperlink htmlbutton

8 ответов:

Comments

Ничего не найдено.

BalusC · Accepted Answer · 2016-08-04 13:53:36

HTML

простой HTML-способ заключается в том, чтобы поместить его в <form> где вы указываете желаемый целевой URL в .
<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" />

Adam · Accepted Answer · 2016-11-08 06:58:17

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

Bern · Accepted Answer · 2017-10-31 18:56:13

Если это визуальный вид кнопки, которую вы ищете в базовом теге привязки HTML, то вы можете использовать Twitter Bootstrap framework для форматирования любой из следующих общих ссылок/кнопок типа 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) образец внешний вид:

RedFilter · Accepted Answer · 2015-10-28 22:14:57

использование:
<a href="http://www.stackoverflow.com/">
    <button>Click me</button>
</a>
к сожалению, эта разметка больше не действительна в HTML5 и не будет ни проверять, ни всегда работать так, как потенциально ожидалось. Используйте другой подход.

EternalHour · Accepted Answer · 2018-04-02 16:30:26

начиная с HTML5, кнопки поддерживают

Lucian Minea · Accepted Answer · 2016-10-12 09:12:35

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

такой:
<a href="http://www.google.com" target="_parent"><button>Click me !</button></a>
и он загрузит href на ту же страницу. Хотите новую страницу? Просто используйте target="_blank".

saravanabawa · Accepted Answer · 2015-10-28 22:25:01

Если вы используете внутреннюю форму, добавьте атрибут type= "reset" вместе с элементом кнопки. Это предотвратит действие формы.
<button type="reset" onclick="location.href='http://www.example.com'">
    www.example.com
</button>

ghoppe · Accepted Answer · 2014-07-21 18:22:44

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