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

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

Есть ли какие-либо недостатки в выполнении чего-то подобного следующему?

<a class='nostyle' href='http://www.google.com/'>
    <span class='button'>Schedule</span>
</a>

Где a.nostyle - это класс, в котором есть стили ссылок (где вы можете избавиться от стандартного стиля ссылок) и span.button - это класс, в котором есть стили для вашей «кнопки» (фон, граница, градиент и т. д.).

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

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

Если вы хотите избежать использования формы или ввода и ищете ссылку в виде кнопки, вы можете создать симпатичные ссылки для кнопки с оболочкой div, якорем и тегом h1. Возможно, вы захотите этого, поэтому можете свободно размещать кнопку ссылки вокруг своей страницы. Это особенно полезно для горизонтальных центрирующих кнопок и имеющих вертикально центрированный текст внутри них. Вот как это делается:

Ваша кнопка будет состоять из трех вложенных частей: оболочки div, якоря и h1, например:

<div class="link-button-wrapper">
    <a href="your/link/here">
        <h1>Button!</h1>
    </a>
</div>

Тогда в CSS ваш стиль должен выглядеть вот так:

.link-button-wrapper {
    width: 200px;
    height: 40px;
    box-shadow: inset 0px 1px 0px 0px #ffffff;
    border-radius: 4px;
    background-color: #097BC0;
    box-shadow: 0px 2px 4px gray;
    display: block;
    border:1px solid #094BC0;
}
.link-button-wrapper > a {
    display: inline-table;
    cursor: pointer;
    text-decoration: none;
    height: 100%;
    width:100%;
}
.link-button-wrapper > a > h1 {
    margin: 0 auto;
    display: table-cell;
    vertical-align: middle;
    color: #f7f8f8;
    font-size: 18px;
    font-family: cabinregular;
    text-align: center;
}

Вот a jsFiddle , чтобы проверить его и поиграть с ним.

Преимущества этой настройки: 1. Создание отображения div-оболочки: блок облегчает центрирование (с помощью поля: 0 авто) и позиционирование (в то время как тег < a> встроен и его труднее позиционировать и невозможно центрировать).

2. Вы можете просто сделать < a> display: block, переместить его и стилизовать как кнопку, но тогда вертикальное выравнивание текста внутри него станет трудным.

3. Это позволяет вам использовать ; a> display: inline-table и < h1> display: table-cell, что позволяет вам использовать вертикальное выравнивание: среднее по < h1> и центрируйте его вертикально (что всегда приятно при нажатии кнопки). Да, вы можете использовать отступы, но если вы хотите, чтобы размер кнопки изменялся динамически, это будет не так чисто.

4. Иногда, когда вы встраиваете < a> в элемент div, кликабелен только текст, эта настройка делает всю кнопку нажатой.

5. Вам не нужно иметь дело с формами, если вы просто пытаетесь перейти на другую страницу. Формы предназначены для ввода информации, и они должны быть зарезервированы для этого.

6. Позволяет вам аккуратно разделить стили кнопок и текста друг от друга (преимущество растягивания? Конечно, но CSS может выглядеть неприятно, поэтому его приятно разложить).

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

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

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

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

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

Создайте класс CSS и добавьте его в свой якорь. Код ниже.

.button-link {
    height:60px;
    padding: 10px 15px;
    background: #4479BA;
    color: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-link:hover {
    background: #356094;
    border: solid 1px #2A4E77;
    text-decoration: none;
}

<HTML>
    <a class="button-link" href="http://www.go-some-where.com"
       target="_blank">Press Here to Go</a>

Вот и все. Это очень легко сделать, и вы можете быть настолько креативными, насколько захотите. Вы контролируете цвета, размер, формы (радиус) и т. Д. Более подробно см. На сайте, где я нашел это на .

Почему бы просто не разместить свою кнопку внутри ссылочного тега, например,

<a href="https://www.google.com/"><button>Next</button></a>

Мне кажется, это отлично работает и не добавляет к ссылке теги% 20, как вам нужно. Я использовал ссылку на Google, чтобы продемонстрировать.

Конечно, вы можете обернуть это в тег формы, но это не обязательно.

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

<a href="myOtherFile"><button>Next</button></a>

Это также не добавляет никаких символов в конец URL-адреса, однако в нем есть путь к файлу проекта в качестве URL-адреса перед окончанием именем файла. например,

Если бы моя структура проекта была ...

.. обозначает папку - обозначает файл, а четыре | обозначить подкаталог или файл в родительской папке

.. public
|||| ..html
|||| |||| -main.html
|||| |||| -secondary.html

Если я открою main.html, URL-адрес будет следующим:

http://localhost:0000/public/html/main.html?_ijt=i7ms4v9oa7blahblahblah

Однако, когда я нажал кнопку внутри main.html, чтобы перейти на файл second.html, URL-адрес будет,

http://localhost:0000/public/html/secondary.html 

Никаких специальных символов в конце URL нет. Надеюсь, это поможет. Кстати - (% 20 обозначает пробел в URL-адресе, который он закодировал и вставил вместо них.)

Примечание: localhost: 0000, очевидно, не будет 0000, у вас там будет свой собственный номер порта ,

Кроме того,? _Ijt = xxxxxxxxxxxxxx в конце URL-адреса main.html, x определяется вашим собственным соединением, поэтому, очевидно, оно не будет равно моему.

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

Единственный способ сделать это (кроме гениальной идеи формы BalusC!) - добавить в кнопку событие JavaScript onclick, что не очень удобно для доступности.

Рассматривали ли вы стиль обычной ссылки, как кнопки? Вы не можете получить кнопки для конкретной ОС, но это лучший способ для ИМО.

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

Решение 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 ( Якорь, стилизованный под кнопку ), является хорошей альтернативой для решения этой проблемы с минимальным влиянием на удобство использования.

1. Используйте метод <form method="get">, с которого начинается OP. Это работает очень хорошо, но иногда добавляет ? к URL. ? является главной проблемой.
2. Используйте jQuery / JavaScript, чтобы сделать ссылку, следующую, когда JavaScript включен, чтобы ? не добавлялся к URL. Он будет легко возвращаться к методу <form> для очень небольшой части пользователей, у которых не включен JavaScript.
3. В коде JavaScript используется делегирование событий, поэтому вы можете присоединить прослушиватель событий до того, как <form> или <button> вообще появятся. В этом примере я использую jQuery, потому что это быстро и просто, но это можно сделать и в «ванильном» JavaScript.
4. Код JavaScript предотвращает выполнение действия по умолчанию и затем следует по ссылке, указанной в атрибуте <form> action.

Пример JSBin (фрагмент кода не может переходить по ссылкам)

// Listen for any clicks on an element in the document with the `link` class
$(document).on('click', '.link', function(e) {
    // Prevent the default action (e.g. submit the form)
    e.preventDefault();

    // Get the URL specified in the form
    var url = e.target.parentElement.action;
    window.location = url;
});

<!DOCTYPE html>
<html>

    <head>
        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <meta charset="utf-8">
        <title>Form buttons as links</title>
    </head>

    <body>
        <!-- Set `action` to the URL you want the button to go to -->
        <form method="get" action="http://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link">
            <!-- Add the class `link` to the button for the event listener -->
            <button type="submit" class="link">Link</button>
        </form>
    </body>

</html>

если Вы используете сертификат SSL

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

  www.example.com  

Обратите внимание, что type = Атрибут "button" важен, поскольку его отсутствующее значение по умолчанию - это состояние кнопки отправки .