3

Я хочу создать 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="/page2>Continue</a>

Перевод вопроса «How to create an HTML button that acts like a link?» @Andrew.

1

1 ответ 1

1

HTML

Простой способ сделать с помощью HTML – оформить все в виде <form>, где указать целевой URL в качестве атрибута action.

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

При необходимости, установите CSS-свойство display: inline; на форме, чтобы она двигалась вместе с окружающим текстом.

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" />

Перевод ответа «How to create an HTML button that acts like a link?» @Balusc.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.