Бих искал да създам 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 начин е да го поставите в <form>
, като посочите желания целеви URL адрес в атрибута action
.
<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" />
<form>
<input TYPE="button" VALUE="Home Page"
onclick="window.location.href='http://www.wherever.com'">
</form>
Единственият начин да се направи това (с изключение на гениалната идея на BalusC'за формуляра!) е да се добави събитие JavaScript onclick
към бутона, което не е добре за достъпността.
Обмисляли ли сте да оформите нормална връзка като бутон? По този начин не можеш да постигнеш специфични за операционната система бутони, но все пак това е най-добрият начин, IMO.