Szeretnék létrehozni egy HTML gombot, amely úgy működik, mint egy link. Tehát, amikor a gombra kattintasz, az átirányít egy oldalra. Szeretném, ha a lehető legkönnyebben elérhető lenne.
Azt is szeretném, ha nem lennének extra karakterek vagy paraméterek az URL-ben.
Hogyan tudom ezt elérni?
Az eddigi válaszok alapján jelenleg ezt csinálom:
<form method="get" action="/page2">
<button type="submit">Continue</button>
</form>
de a probléma ezzel az, hogy a Safari és az Internet Explorer programban egy kérdőjel karaktert ad az URL végéhez. Olyan megoldást kell találnom, amely nem ad hozzá karaktereket az URL végéhez.
Két másik megoldás is létezik erre: JavaScript használata vagy a link formázása úgy, hogy úgy nézzen ki, mint egy gomb.
JavaScript használatával:
<button onclick="window.location.href='/page2'">Continue</button>
Ehhez azonban nyilvánvalóan JavaScriptre van szükség, és emiatt a képernyőolvasók számára kevésbé hozzáférhető. A linkek lényege, hogy egy másik oldalra lépjünk. Ezért rossz megoldás, ha egy gombot linkként próbálunk viselkedtetni. Az én javaslatom az, hogy használjon linket, és stilizálja úgy, hogy úgy nézzen ki, mint egy gomb.
<a href="/link/to/page2">Continue</a>
A sima HTML mód az, hogy egy <form>
-ban helyezzük el, ahol az action
attribútumban megadjuk a kívánt cél URL-t.
<form action="http://google.com">
<input type="submit" value="Go to Google" />
</form>
Ha szükséges, állítson be CSS display: inline;
CSS-t az űrlapon, hogy az a környező szöveggel együtt áramlásban maradjon. A fenti példában szereplő <input type="submit">
helyett használhatja a <button type="submit">
is. Az egyetlen különbség az, hogy a <button>
elem engedélyezi a gyermekeket.
Intuitívan azt várnánk, hogy a <button href="http://google.com">
elemmel analóg módon használhatjuk a <a>
elemet, de sajnos nem, ez az attribútum a HTML specifikáció szerint nem létezik.
Ha a CSS megengedett, egyszerűen használj egy <a>
elemet, amelyet úgy alakítasz, hogy úgy nézzen ki, mint egy gomb, többek között a appearance
tulajdonság segítségével (csak az Internet Explorer támogatása jelenleg (2015. július) még gyenge).
<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;
}
Vagy válasszon egyet a sok CSS könyvtár közül, mint például a Bootstrap.
<a href="http://google.com" class="btn btn-default">Go to Google</a>
Ha a JavaScript engedélyezett, állítsa be a window.location.href
értéket.
<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>
Az egyetlen módja ennek (kivéve BalusC's zseniális űrlap ötletét!) az, hogy egy JavaScript onclick
eseményt adunk a gombhoz, ami nem jó a hozzáférhetőség szempontjából.
Gondoltál már arra, hogy egy normál linket gombként stilizálj? Így nem érhetsz el OS-specifikus gombokat, de IMO még mindig ez a legjobb megoldás.