Как да създам HTML бутон, който действа като връзка?

Бих искал да създам 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>
Community
Редактиран въпрос Направете май 2017 в 12:03
Програмиране
button html hyperlink anchor htmlbutton
Направете май 2010 в 4:39
88 изгледи
Решение

HTML

Обикновеният HTML начин е да го поставите в `, като посочите желания целеви URL адрес в атрибутаaction`.


    <input type="submit" value="Go to Google" />

Ако е необходимо, задайте CSS display: inline; на формуляра, за да го поддържате в поток със заобикалящия го текст. Вместо <input type="submit"> в горния пример, можете да използвате и . Единствената разлика е, че елементът позволява деца.

Интуитивно'бихте очаквали да можете да използвате `аналогично на елемента`, но за съжаление не, този атрибут не съществува според HTML спецификацията.

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" />
BalusC
Редактиран отговор Направете август 2016 в 10:53
Коментари (20)
 

    <input TYPE="button" VALUE="Home Page"
        onclick="window.location.href='http://www.wherever.com'">
Peter Mortensen
Редактиран отговор Направете юли 2014 в 3:22
Коментари (6)

Единственият начин да се направи това (с изключение на гениалната идея на BalusC'за формуляра!) е да се добави събитие JavaScript onclick към бутона, което не е добре за достъпността.

Обмисляли ли сте да оформите нормална връзка като бутон? По този начин не можеш да постигнеш специфични за операционната система бутони, но все пак това е най-добрият начин, IMO.

Peter Mortensen
Редактиран отговор Направете юли 2014 в 3:24
Коментари (5)