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.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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