Jak utworzyć przycisk HTML, który działa jak link?
Chciałbym utworzyć przycisk HTML, który działa jak link. Po kliknięciu przycisku następuje przekierowanie na stronę. Chciałbym, aby była ona jak najbardziej dostępna.
Chciałbym również, aby nie było żadnych dodatkowych znaków ani parametrów w adresie URL.
Jak mogę to osiągnąć?Na podstawie odpowiedzi zamieszczonych do tej pory, obecnie robię to:
<form method="get" action="/page2">
<button type="submit">Continue</button>
</form>
Ale problem z tym polega na tym, że w Safari i Internet Explorer , to dodaje znak zapytania na końcu adresu URL. Muszę znaleźć rozwiązanie, które nie dodaje żadnych znaków na końcu adresu URL.
Istnieją dwa inne rozwiązania, aby to zrobić: używając JavaScript lub stylizując link, aby wyglądał jak przycisk.
Using JavaScript:
<button onclick="window.location.href='/page2'">Continue</button>
Ale to oczywiście wymaga JavaScript i z tego powodu jest mniej dostępne dla czytników ekranu. Celem linku jest przejście do innej strony. Więc próba, aby przycisk działał jak link, jest zła rozwiązanie. Moja sugestia jest taka, że powinieneś użyć linku i wystylizować go tak, aby wyglądał jak przycisk .
<a href="/link/to/page2">Continue</a>
8 answers
HTML
Prostym sposobem HTML jest umieszczenie go w <form>, w którym określisz żądany docelowy adres URL w atrybucie action.
<form action="http://google.com">
<input type="submit" value="Go to Google" />
</form>
Jeśli to konieczne, ustaw CSS display: inline; na formularzu, aby utrzymać go w przepływie z otaczającym tekstem. Zamiast <input type="submit"> w powyższym przykładzie można również użyć <button type="submit">. Jedyną różnicą jest to, że element <button> pozwala dzieciom.
Intuicyjnie można oczekiwać, że będzie można używać <button href="http://google.com"> analogicznie do elementu <a>, ale niestety nie, to atrybut nie istnieje zgodnie ze specyfikacją HTML .
CSS
Jeśli CSS jest dozwolony, po prostu użyj <a>, który stylizujesz, aby wyglądał jak przycisk, używając m.in. appearance property ( tylko Obsługa Internet Explorera jest obecnie (lipiec 2015) nadal słaba ).
<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;
}
Lub wybierz jedną z wielu bibliotek CSS, takich jak Bootstrap.
<a href="http://google.com" class="btn btn-default">Go to Google</a>
JavaScript
Jeśli JavaScript jest dozwolony, Ustaw window.location.href.
<input type="button" onclick="location.href='http://google.com';" value="Go to Google" />
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-04 10:53:36
<button onclick="location.href='http://www.example.com'" type="button">
www.example.com</button>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-08 04:58:17
Jeśli jest to wygląd przycisku, którego szukasz w podstawowym znaczniku zakotwiczenia HTML, możesz użyć frameworka Twitter Bootstrap do sformatowania dowolnego z następujących typowych linków/przycisków HTML, aby pojawiły się jako przycisk. Zwróć uwagę na różnice wizualne pomiędzy wersją 2, 3 lub 4 frameworka:
<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">
Bootstrap (v4) przykładowy wygląd:
Bootstrap (v3) przykładowy wygląd:
Bootstrap (v2) przykładowy wygląd:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-31 16:56:13
Użycie:
<a href="http://www.stackoverflow.com/">
<button>Click me</button>
</a>
Niestety ten znacznik nie jest już ważny w HTML5 i nie będzie sprawdzał poprawności ani zawsze działał zgodnie z oczekiwaniami. Użyj innego podejścia.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-28 20:14:57
Od HTML5 przyciski obsługują atrybut formaction. Najlepszy ze wszystkich, Javascript lub trickery nie jest potrzebne.
<form>
<button formaction="http://stackoverflow.com">Go to Stack Overflow!</button>
</form>Caveats
- musi być otoczony tagami
<form>. -
<button>type musi być " submit "(lub nieokreślony), nie mogłem go uruchomić z przyciskiem type".", Co przywołuje punkt poniżej. - nadpisuje domyślną akcję w formularzu. Innymi słowy, jeśli zrobisz to w innej formie, spowoduje to konflikt.
Numer referencyjny: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction Obsługa przeglądarki:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Browser_compatibility
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-02 13:30:26
Jest to w rzeczywistości bardzo proste i bez użycia żadnych elementów formularza. Możesz po prostu użyć znacznika z Przyciskiem w środku :).
TAK:
<a href="http://www.google.com" target="_parent"><button>Click me !</button></a>
I załaduje href na tę samą stronę. Chcesz nową stronę? Wystarczy użyć target="_blank".
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-12 06:12:35
Jeśli używasz formularza wewnętrznego, Dodaj atrybut type = "reset" wraz z elementem przycisku. Uniemożliwi to działanie formularza.
<button type="reset" onclick="location.href='http://www.example.com'">
www.example.com
</button>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-28 20:25:01
<form>
<input TYPE="button" VALUE="Home Page"
onclick="window.location.href='http://www.wherever.com'">
</form>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-21 15:22:44