Hvordan opretter man en HTML-knap, der fungerer som et link?

Jeg vil gerne oprette en HTML-knap, der fungerer som et link. Så når man klikker på knappen, omdirigerer den til en side. Jeg vil gerne have, at den skal være så tilgængelig som muligt.

Jeg vil også gerne have det så der ikke er nogen ekstra tegn, eller parametre i URL'en.

Hvordan kan jeg opnå dette?

På baggrund af de hidtidige svar gør jeg i øjeblikket dette:

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

men problemet med dette er, at der i Safari og Internet Explorer tilføjes et spørgsmålstegn i slutningen af URL'en. Jeg har brug for at finde en løsning, der ikke tilføjer tegn til slutningen af URL'en.

Der er to andre løsninger til at gøre dette: Der er to andre muligheder: Brug af JavaScript eller styling af et link, så det ligner en knap.

Brug af JavaScript:

<button onclick="window.location.href='/page2'">Continue</button>

Men dette kræver naturligvis JavaScript, og derfor er det mindre tilgængeligt for skærmlæsere. Formålet med et link er at gå til en anden side. Så at forsøge at få en knap til at fungere som et link er den forkerte løsning. Mit forslag er, at du skal bruge et link og style det til at ligne en knap.

<a href="/link/to/page2">Continue</a>
Community
Redigeret spørgsmål 2017ør maj 2017 в 12:03
Programmering
button html hyperlink anchor htmlbutton
2010ør maj 2010 в 4:39
57 visninger
Løsning

HTML

Den almindelige HTML-metode er at indsætte den i en `, hvor du angiver den ønskede mål-URL i attributtenaction`.


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

Hvis det er nødvendigt, skal du indstille CSS display: inline; på formularen for at holde den i flowet med den omgivende tekst. I stedet for <input type="submit"> i ovenstående eksempel kan du også bruge . Den eneste forskel er, at elementet tillader børn.

Man ville intuitivt forvente at kunne bruge `analogt med`-elementet, men desværre nej, denne attribut findes ikke i henhold til HTML-specifikation.

CSS

Hvis CSS er tilladt, skal du blot bruge en <a>, som du styler til at ligne en knap ved hjælp af bl.a. egenskaben appearance (kun Internet Explorer-understøttelsen er i øjeblikket (juli 2015) stadig dårlig).

<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;
}

Eller vælg et af de mange CSS-biblioteker som Bootstrap.

<a href="http://google.com" class="btn btn-default">Go to Google</a>

JavaScript

Hvis JavaScript er tilladt, skal du indstille window.location.href.

<input type="button" onclick="location.href='http://google.com';" value="Go to Google" />
BalusC
Redigeret svar 2016ør august 2016 в 10:53
Kommentarer (20)
 

    <input TYPE="button" VALUE="Home Page"
        onclick="window.location.href='http://www.wherever.com'">
Peter Mortensen
Redigeret svar 2014ør juli 2014 в 3:22
Kommentarer (6)

Den eneste måde at gøre dette på (bortset fra BalusC's geniale idé med formularen!) er at tilføje en JavaScript onclick-hændelse til knappen, hvilket ikke er godt for tilgængeligheden.

Har du overvejet at style et normalt link som en knap? Du kan ikke opnå OS-specifikke knapper på den måde, men det er stadig den bedste måde IMO.

Peter Mortensen
Redigeret svar 2014ør juli 2014 в 3:24
Kommentarer (5)