Ako vytvoriť tlačidlo HTML, ktoré sa správa ako odkaz?
Chcel by som vytvoriť tlačidlo HTML, ktoré sa správa ako odkaz. Takže po kliknutí na tlačidlo sa presmeruje na stránku. Chcel by som, aby bolo čo najprístupnejšie.
Chcel by som tiež, aby v adrese URL neboli žiadne ďalšie znaky alebo parametre.
Ako to môžem dosiahnuť?
Na základe doteraz zverejnených odpovedí to v súčasnosti robím:
<form method="get" action="/page2">
<button type="submit">Continue</button>
</form>ale problém je v tom, že v prehliadačoch Safari a Internet Explorer sa na koniec adresy URL pridáva znak otáznika. Potrebujem nájsť riešenie, ktoré nepridáva na koniec adresy URL žiadne znaky.
Existujú dve ďalšie riešenia, ako to urobiť: Použitie JavaScriptu alebo štylizácia odkazu tak, aby vyzeral ako tlačidlo.
Použitie JavaScriptu:
<button onclick="window.location.href='/page2'">Continue</button>To však samozrejme vyžaduje JavaScript, a preto je menej prístupné pre čítačky obrazovky. Zmyslom odkazu je prejsť na inú stránku. Takže snaha o to, aby sa tlačidlo správalo ako odkaz, je nesprávnym riešením. Môj návrh je, aby ste použili odkaz a naštýlovali ho tak, aby vyzeral ako tlačidlo.
<a href="/link/to/page2">Continue</a>
![[HTML-Tutorial-19] Basic Form | form, input, label, button elements | Web Development for Beginners](https://img.youtube.com/vi/2JrGepWlUvg/mqdefault.jpg)
![HTML Tutorial in Hindi [Part 14] - link one page to another html](https://img.youtube.com/vi/qyntugWi8H4/mqdefault.jpg)
HTML
Jednoduchý spôsob HTML je umiestniť ho do <formulára>, kde v atribúte action uvediete požadovanú cieľovú adresu URL.
<form action="http://google.com">
<input type="submit" value="Go to Google" />
</form>Ak je to potrebné, nastavte na formulári CSS display: inline;, aby bol v toku s okolitým textom. Namiesto <input type="submit"> vo vyššie uvedenom príklade môžete použiť aj <button type="submit">. Jediný rozdiel je v tom, že prvok <button> umožňuje použitie detí.
Intuitívne by'ste očakávali, že budete môcť použiť <button href="http://google.com"> analogicky s elementom <a>, ale bohužiaľ nie, tento atribút podľa špecifikácie HTML neexistuje.
CSS
Ak je CSS povolené, jednoducho použite <a>, ktorý naštartujete tak, aby vyzeral ako tlačidlo, okrem iného pomocou vlastnosti appearance (len podpora Internet Explorer je v súčasnosti (júl 2015) stále slabá).
<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;
}Alebo si vyberte jednu z mnohých knižníc CSS, napríklad Bootstrap.
<a href="http://google.com" class="btn btn-default">Go to Google</a>JavaScript
Ak je povolený JavaScript, nastavte 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>
Jediný spôsob, ako to urobiť (okrem geniálneho nápadu s formulárom BalusC'a), je pridať k tlačidlu udalosť JavaScript onclick, čo nie je dobré pre prístupnosť.
Uvažovali ste o tom, že by ste normálny odkaz štylizovali ako tlačidlo? Takýmto spôsobom síce nedosiahnete tlačidlá špecifické pre OS, ale aj tak je to IMO najlepší spôsob.
