Я хотел бы создать 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>
Обычный способ HTML - поместить его в <форму>
, где в атрибуте action
указывается желаемый целевой 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 разрешен, просто используйте элемент <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 разрешен, установите window.location.href
.
<input type="button" onclick="location.href='http://google.com';" value="Go to Google" />
в
<button onclick="location.href='http://www.example.com'" type="button">
www.example.com</button>
в
Обратите внимание, что тип="и кнопка" и атрибут имеет важное значение, поскольку его отсутствует значение по умолчанию является представить состояние кнопки.
Если это'ы внешний вид кнопки вы'ищем в базовой HTML-тега привязки, то вы можете использовать Twitter начальной загрузки рамки для формате любой из следующих общих 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">
Ушко (В4) образец внешний вид:
Ушко (В3) образец внешний вид:
Ушко (В2) образец внешний вид:
Использование:
<a href="http://www.stackoverflow.com/">
<button>Click me</button>
</a>
К сожалению, эта разметка уже не действует в HTML5 и не будет ни проверять, ни как потенциально ожидаются. Использовать другой подход.
Как на HTML5, поддержка кнопок formaction
атрибут. Лучший из всех, нет необходимости в JavaScript или жульничество.
в
<form>
<button formaction="http://stackoverflow.com">Go to Stack Overflow!</button>
</form>
в
Предупреждения
<кнопка>
тип должен быть "Отправить" и (или неуточненной), я не мог'т заставить его работать с типа „кнопку." и после чего появляется пункт ниже.Ссылка: 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
Это на самом деле очень простой и без использования каких-либо элементов формы. Вы можете просто использовать &ЛТ;а> бирка с кнопкой внутри :).
Как это:
<a href="http://www.google.com" target="_parent"><button>Click me !</button></a>
И она будет загружать, либо на той же странице. Хочу новую страницу? Просто используйте цель=то"настроек"
в.
Редактировать
Пару лет спустя, в то время как мое решение по-прежнему работает, имейте в виду, вы можете использовать много CSS, чтобы сделать его все, что вы хотите. Это был просто быстрый способ.
Если вы используете внутреннюю форму, добавьте атрибут тип=на"сброс и" наряду с элементом button. Это предотвратит форме действий.
<button type="reset" onclick="location.href='http://www.example.com'">
www.example.com
</button>
Представляется три пути решения этой проблемы (все плюсы и минусы).
Кнопки ##Решение 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]
Подобные конфигурации могут варьироваться в зависимости от веб-сервера и используется стек. Поэтому резюме этого подхода:
Плюсы:
Минусы:
?
выглядит некрасиво в некоторых браузерах. Это может быть исправлено путем взлома (в некоторых случаях) использовать POST вместо get, но чистый путь-это серверный редирект. Оборотная сторона с переадресацию на стороне сервера, что это вызовет дополнительный HTTP-запрос для этих ссылок из-за 304 редирект.<форма>
элементВы можете использовать JavaScript, чтобы вызвать onclick и другие события, чтобы имитировать поведение ссылку с помощью кнопки. В примере ниже можно улучшить и удалить из HTML, но это просто чтобы проиллюстрировать идею:
<button onclick="window.location.href='/page2'">Continue</button>
Плюсы:
Минусы:
Стайлинг ссылка как кнопка сравнительно прост и может обеспечить подобный опыт в различных браузерах. Загрузки делает это, но это также легко достичь самостоятельно, используя простые стили.
Плюсы:
<форма>
для работы.Минусы:
клавиатурных
события на кнопки.Решение #1 (кнопку в виде) кажется наиболее прозрачным для пользователей с минимальной необходимой работы. Если ваш макет не влияет на этот выбор и на стороне сервера подкрутить возможно, это хороший вариант для случаев, где доступность является приоритетом (например ссылки на страницу ошибки или сообщения об ошибках).
Если JavaScript-это не помеха вашим требованиям доступности, то решение #2 (для JavaScript) будет предпочтительнее, чем #1 и #3.
Если по каким-то причинам, доступность жизненно важных (JavaScript-это не вариант), но вы находитесь в ситуации, когда ваш дизайн и/или конфигурации сервера не позволяет использовать Вариант № 1, тогда решение #3 (якорь, стилизованный под кнопку) является хорошей альтернативой решения этой проблемы с минимальными влияют на удобство использования.
Вы можете просто поставить тег вокруг элемента:
<a href="http://google.com" target="_blank">
<button>My Button</button>
</a>
Есть ли минусы, чтобы делать что-то вроде следующего?
<a class='nostyle' href='http://www.google.com/'>
<span class='button'>Schedule</span>
</a>
Где A.nostyle
- это класс, который имеет свой стиль ссылке (где вы сможете избавиться от стандартной укладки ссылке) и продолжительность.кнопка` - это класс, который имеет стиль за вашу "кнопка" и (фон, граница, градиент и т. д.).
Почему бы просто не разместить кнопку внутри ссылки тегов.г
<a href="https://www.google.com/"><button>Next</button></a>
Это, кажется, работает прекрасно для меня и не добавляет каких - %20 теги к ссылке, так как вы этого хотите. Я использовал ссылку на Google, чтобы продемонстрировать.
Можно, конечно, обернуть это в теге формы, но это не обязательно.
При связывании другой локальный файл просто положить его в той же папке и добавить имя файла в качестве ссылки. Или укажите местоположение файла, если в не в той же папке.
<a href="myOtherFile"><button>Next</button></a>
Это не добавить любой символ на конце URL-адреса, однако у него есть проект файлов путь как URL-адрес, прежде чем завершить с именем файла. е.г
Если моя структура проекта...
.. обозначает папку
общественные ..<БР> |||| ..в HTML<БР> |||| |||| -главный.в HTML<БР> |||| |||| -secondary.html
Если я открываю main.html URL-адрес будет
http://localhost:0000/public/html/main.html?_ijt=i7ms4v9oa7blahblahblah
Однако, когда я нажал на кнопку внутри main.html чтобы изменить secondary.html URL-адрес будет
http://localhost:0000/public/html/secondary.html
Нет специальных символов в конце URL-адреса. Я надеюсь, что это помогает. Кстати - (%20 означает пробел в URL-адрес своего закодированы и вставлены в места их.)
Примечание: на localhost:0000, очевидно, не будет 0000 вы'будете иметь свой собственный номер порта.
Кроме того ?_ijt=хххххххххххххх в конец URL-адреса main.html х определяется свои связи, поэтому очевидно, не будут равны.
<БР> может показаться, что я'м о том, некоторые действительно основные пункты, но я просто хочу объяснить, как могу. Спасибо за чтение и я надеюсь, что это поможет кому-то, по крайней мере. Счастливого программирования.
Происходит вместе с тем, что еще несколько человек добавили, вы можете идти дикой природы с помощью простого класса 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>
Что это. Это очень легко сделать, и позволяет вам быть как творческие, как вы'd, как. Вы управляете цвета, размера, формы(радиус) и др. Для более detailsm, см. сайт я нашел это на.
Единственный способ сделать это (за исключением гениальной идеи BalusC' с формой!) - добавить к кнопке событие JavaScript onclick
, что не очень хорошо для доступности.
Вы не рассматривали вариант стилизации обычной ссылки под кнопку? Вы не сможете добиться специфических для ОС кнопок таким способом, но это все равно лучший способ, IMO.
@Николя,следующие работал для меня, как ты'т иметь вид="и кнопка"в связи с которой он начал вести себя как подавать вида..так как у меня уже есть один тип отправки.это не'т работает для меня ....и теперь вы можете либо добавить класс для кнопки или в
<а>` чтобы получить требуемый формат:
<a href="http://www.google.com/">
<button type="button">Click here</button>
</a>
Если вы хотите избежать необходимости использовать форму или входной и вы'вновь ищет кнопку-Просмотр ссылке, вы можете создавать красивые кнопки связи с обрамляющий блок, якоря и тег Н1
. Вы'd с потенциально хотят этого, поэтому вы можете свободно размещать ссылку-кнопку вокруг вашей страницы. Это особенно полезно для горизонтального центрирования клавишам, а по вертикали-по центру текста внутри них. Здесь's, как:
Ваша кнопка будет состоять из трех вложенных частей: обрамляющий блок, якорь, и Н1, вот так:
<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;
}
[Здесь'С][1] в [jsFiddle][2], чтобы проверить его и поиграйте с ним.
Преимущества такой установки:
Делая дисплей обрамляющий блок: блок можно легко на сердце (с использованием маржи: 0 авто) и позиция (а &ЛТ;а> есть встроенный и труднее positionand не возможно центр).
Вы могли бы просто сделать &ЛТ;а> дисплей:блок, переместить его вокруг, и стиль его, как кнопку, а затем вертикально выравнивать текст внутри него будет трудно.
Это позволяет сделать &ЛТ;а> дисплей: инлайн-таблицы и &АМП;ЛТ;Н1> дисплей: стол-клеток, что позволяет использовать вертикальный-выровняйте: середина на &ЛТ;Н1> и центр его вертикально (что всегда приятно на кнопку). Да, вы могли бы использовать отступы, но если вы хотите, чтобы ваши кнопки, чтобы динамически изменять размер, что выиграл'т быть чистой.
Иногда при внедрении &ЛТ;а> в див, только кликабелен, Эта настройка делает все кнопки кликабельны.
Вы Don'т приходится иметь дело с бланками, если вы're просто пытается перейти на другую страницу. Формы предназначены для ввода информации, и они должны быть зарезервированы для этого.
Позволяет аккуратно отделить пуговицу и стилизации текста друг от друга (стрейч преимущество? Конечно, но в CSS можно нахамить-так это's хороший, чтобы разложить его).
Это определенно сделало мою жизнь легче для укладки мобильный сайт для разного размера экранов.
Другим вариантом является, чтобы создать ссылку на кнопку:
<button type="button"><a href="yourlink.com">Link link</a></button>
Затем использовать CSS, чтобы стилизовать кнопку связать и, таким образом, что ссылка занимает все пространство внутри кнопки (так там'Не пропустите-нажатие пользователем):
button, button a{position:relative;}
button a{top:0;left:0;bottom:0;right:0;}
Я создал демо здесь.
Если вы хотите создать кнопку, которая используется для URL-адреса в любом месте, создать класс кнопки на якорь.
a.button {
background-color: #999999;
color: #FFFFFF !important;
cursor: pointer;
display: inline-block;
font-weight: bold;
padding: 5px 8px;
text-align: center;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.button:hover {
text-decoration: none;
}
7 способов сделать это:
в
<!-- Using window.location.href = 'URL' -->
<button onclick='window.location.href = "https://stackoverflow.com"'>
Click Me
</button>
<!-- Using window.location.replace('URL') -->
<button onclick='window.location.replace("https://stackoverflow.com")'>
Click Me
</button>
<!-- Using window.location = 'URL' -->
<button onclick='window.location = "https://stackoverflow.com"'>
Click Me
</button>
<!-- Using window.open('URL') -->
<button onclick='window.open("https://stackoverflow.com","_self","","")'>
Click Me
</button>
<!-- Using window.location.assign('URL') -->
<button onclick='window.location.assign("http://www.stackoverflow.com")'>
Click Me
</button>
<!-- Using HTML form -->
<form action='https://stackoverflow.com' method='get'>
<input type='submit' value='Click Me'/>
</form>
<!-- Using HTML anchor tag -->
<a href='https://stackoverflow.com'>
<button>Click Me</button>
</a>
в
Я знаю, что там было много представленных ответов, но ни один из них, казалось, не проблема. Вот каково мое решение:
<форма метод=то"сделать" и>
способ, что ОП начинает с. Это действительно хорошо работает, но иногда добавляет ?
в URL-адрес. Символ"? " является основной проблемой.?
не'т в конечном итоге присоединяются к URL. Он плавно отката на в <форма>
способ для очень малой доли пользователей, которые Дон'т быть включен JavaScript.<форма> В
или в <кнопка>
вообще существует. Я'м, используя в этом примере jQuery, потому что это быстро и легко, но это может быть сделано в 'ванилин' JavaScript как хорошо.<форма> В атрибут
действие
.в
// 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>
в