Chciałbym utworzyć przycisk HTML, który działa jak link. Po kliknięciu przycisku następuje przekierowanie na stronę. Chciałbym, aby był jak najbardziej dostępny.
Chciałbym również, aby nie było żadnych dodatkowych znaków ani parametrów w adresie URL.
Jak mogę to osiągnąć?
W oparciu o dotychczasowe odpowiedzi, obecnie robię to:
<form method="get" action="/page2">
<button type="submit">Continue</button>
</form>
ale problem polega na tym, że w Safari i Internet Explorerze 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: użycie JavaScript lub stylizowanie łącza, aby wyglądało jak przycisk.
Za pomocą JavaScript:
<button onclick="window.location.href='/page2'">Continue</button>
Ale to oczywiście wymaga JavaScript i dlatego jest mniej dostępny dla czytników ekranu. Celem linku jest przejście do innej strony. Dlatego próba sprawienia, by przycisk zachowywał się jak link, jest złym rozwiązaniem. Sugeruję, że powinieneś użyć linku i nadać mu styl, aby wyglądał jak przycisk .
<a href="/link/to/page2">Continue</a>
?
adres URL. Jest to spowodowane tym, że formularz jesttype="GET"
zmieniony,type="POST"
a?
na końcu adresu URL znika. Jest tak, ponieważ GET wysyła wszystkie zmienne w adresie URL, stąd?
.GET
że się nie powiedzie. Nadal uważam, że użycie linku ma sens z zastrzeżeniem, że nie zareaguje on na „spację”, gdy działa podobnie jak przycisk. Również niektóre style i zachowania będą się różnić (np. Przeciągalne). Jeśli chcesz prawdziwego „linku do przycisku”, przekierowanie po stronie serwera na zakończenie adresu URL przez?
usunięcie może być również opcją.Odpowiedzi:
HTML
Prostym sposobem HTML jest umieszczenie go w miejscu, w
<form>
którym określasz pożądany docelowy adres URL waction
atrybucie.Jeśli to konieczne, ustaw CSS
display: inline;
w formularzu, aby zachować ciągłość tekstu otaczającego. Zamiast<input type="submit">
w powyższym przykładzie możesz także użyć<button type="submit">
. Jedyną różnicą jest to, że<button>
element pozwala dzieciom.Intuicyjnie spodziewałbyś się, że będziesz mógł używać
<button href="https://google.com">
analogicznie z<a>
elementem, ale niestety nie, ten atrybut nie istnieje zgodnie ze specyfikacją HTML .CSS
Jeśli CSS jest dozwolony, po prostu użyj
<a>
stylu, który wygląda jak przycisk, używając między innymiappearance
właściwości ( nie jest obsługiwany tylko w Internet Explorerze ).Lub wybierz jedną z wielu bibliotek CSS, takich jak Bootstrap .
JavaScript
Jeśli JavaScript jest dozwolony, ustaw
window.location.href
.Zamiast
<input type="button">
w powyższym przykładzie możesz także użyć<button>
. Jedyną różnicą jest to, że<button>
element pozwala dzieciom.źródło
display: inline
do formularza, aby utrzymać przepływ przycisku.Zauważ, że
type="button"
atrybut jest ważny, ponieważ jego brakującą wartością domyślną jest stan przycisku Prześlij .źródło
Jeśli jest to wygląd przycisku, którego szukasz w podstawowym znaczniku zakotwiczenia HTML, możesz użyć frameworka Bootstrap do sformatowania dowolnego z poniższych popularnych łączy / przycisków typu HTML, aby pojawiał się jako przycisk. Zwróć uwagę na różnice wizualne między wersją 2, 3 lub 4 frameworka:
Przykładowy wygląd Bootstrap (v4) :
Przykładowy wygląd Bootstrap (v3) :
Przykładowy wygląd Bootstrap (v2) :
źródło
Posługiwać się:
Niestety, ten znacznik nie jest już poprawny w HTML5 i nie będzie sprawdzał poprawności ani nie będzie zawsze działał zgodnie z potencjalnymi oczekiwaniami. Użyj innego podejścia.
źródło
target
atrybut jest imo na krawędzi.Począwszy od HTML5, przyciski obsługują ten
formaction
atrybut. Najlepsze jest to, że Javascript nie jest potrzebny.Ostrzeżenia
<form>
tagami.<button>
typ musi być „prześlij” (lub nieokreślony), nie mogłem go uruchomić z przyciskiem „wpisz”. Co podnosi punkt poniżej.Odwołanie: 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 / przycisk # Kompatybilność z przeglądarką
źródło
formaction
jest kompatybilny od „ świata IE ” od wersji 10 i nowszych<button formaction>
===<form action>
?<form>
w każdym z naszych przykładów. Jestformaction
na zasadziebutton
powinien dodać?
do pustej składania dostać? W tym JSBin wygląda na to, że HTML zachowuje się dokładnie tak samo dla obu.To jest naprawdę bardzo proste i bez użycia jakichkolwiek elementów formularza. Możesz po prostu użyć znacznika <a> z przyciskiem wewnątrz :).
Lubię to:
I załaduje href na tę samą stronę. Chcesz nową stronę? Po prostu użyj
target="_blank"
.EDYTOWAĆ
Kilka lat później, gdy moje rozwiązanie nadal działa, pamiętaj, że możesz użyć wielu CSS, aby wyglądało to, co chcesz. To był tylko szybki sposób.
źródło
<button type="button">...
aby domyślnie nie działał jako PrześlijJeśli używasz formularza wewnętrznego, dodaj atrybut type = "reset" wraz z elementem przycisku. Zapobiegnie to akcji formularza.
źródło
type="button"
źródło
input
nie ma tagu końcowego.input
elementem jest nieważna elementem. Musi mieć znacznik początkowy, ale nie może mieć znacznika końcowego.Wydaje się, że istnieją trzy rozwiązania tego problemu (wszystkie z zaletami i wadami).
Rozwiązanie 1: Przycisk w formularzu.
Problem polega jednak na tym, że w niektórych wersjach popularnych przeglądarek, takich jak Chrome, Safari i Internet Explorer, dodaje znak zapytania na końcu adresu URL. Innymi słowy, kod powyżej adresu URL będzie wyglądał następująco:
Jest jeden sposób, aby to naprawić, ale będzie wymagał konfiguracji po stronie serwera. Jednym z przykładów użycia Apache Mod_rewrite byłoby przekierowanie wszystkich żądań ze znakiem końcowym
?
na odpowiadający im adres URL bez?
. Oto przykład używając .htaccess, ale jest pełna wątek tutaj :Podobne konfiguracje mogą się różnić w zależności od serwera i stosu. Podsumowanie tego podejścia:
Plusy:
Cons:
?
wygląda brzydko w niektórych przeglądarkach. Można to naprawić za pomocą włamania (w niektórych przypadkach) przy użyciu POST zamiast GET, ale czystym sposobem jest przekierowanie po stronie serwera. Wadą przekierowania po stronie serwera jest to, że spowoduje dodatkowe wywołanie HTTP dla tych łączy z powodu przekierowania 304.<form>
elementRozwiązanie 2: Za pomocą JavaScript.
Możesz użyć JavaScript, aby wywołać kliknięcie i inne zdarzenia naśladujące zachowanie łącza za pomocą przycisku. Poniższy przykład może być ulepszony i usunięty z HTML, ale jest to po prostu zilustrowanie idei:
Plusy:
Cons:
Rozwiązanie 3: Zakotwicz (link) w stylu przycisku.
Stylowanie linku jak przycisku jest stosunkowo łatwe i może zapewnić podobne wrażenia w różnych przeglądarkach. Bootstrap to robi, ale można go również łatwo osiągnąć samodzielnie, używając prostych stylów.
Plusy:
<form>
pracy.Cons:
keypress
zdarzeń na przyciskach.Wniosek
Rozwiązanie nr 1 ( przycisk w formularzu ) wydaje się najbardziej przejrzyste dla użytkowników przy minimalnym nakładzie pracy. Jeśli ten wybór nie ma wpływu na twój układ, a poprawa po stronie serwera jest możliwa, jest to dobra opcja w przypadkach, w których dostępność ma najwyższy priorytet (np. Linki na stronie błędu lub komunikaty o błędach).
Jeśli JavaScript nie stanowi przeszkody w spełnieniu wymagań dotyczących dostępności, wówczas rozwiązanie nr 2 ( JavaScript ) byłoby preferowane w stosunku do nr 1 i nr 3.
Jeśli z jakiegoś powodu dostępność jest niezbędna (JavaScript nie jest opcją), ale jesteś w sytuacji, gdy twój projekt i / lub konfiguracja serwera uniemożliwia ci skorzystanie z opcji nr 1, a następnie rozwiązania nr 3 ( Kotwica w stylu przycisku ) jest dobrą alternatywą dla rozwiązania tego problemu przy minimalnym wpływie na użyteczność.
źródło
Dlaczego nie po prostu umieścić przycisku wewnątrz znacznika referencyjnego, np
Wydaje się, że działa to idealnie dla mnie i nie dodaje żadnych tagów% 20 do linku, tak jak tego chcesz. Użyłem linku do Google, aby to zademonstrować.
Można oczywiście owinąć to tagiem formularza, ale nie jest to konieczne.
Podczas łączenia innego pliku lokalnego po prostu umieść go w tym samym folderze i dodaj nazwę pliku jako odniesienie. Lub określ lokalizację pliku, jeśli in nie znajduje się w tym samym folderze.
Nie powoduje to również dodania żadnego znaku na końcu adresu URL, jednak ma ścieżkę projektu pliku jako adres URL przed zakończeniem z nazwą pliku. na przykład
Jeśli struktura mojego projektu była ...
.. oznacza folder - oznacza plik, podczas gdy cztery | oznacz podkatalog lub plik w folderze nadrzędnym
..publiczny
|||| ..html
|||| |||| -main.html
|||| |||| -secondary.html
Gdybym otworzył main.html adres URL byłby,
Jednak gdy kliknę przycisk wewnątrz main.html, aby zmienić na wtórny.html, adres URL będzie:
Brak znaków specjalnych na końcu adresu URL. Mam nadzieję, że to pomoże. Nawiasem mówiąc - (% 20 oznacza spację w adresie URL, która jest zakodowana i wstawiona w ich miejsce).
Uwaga: Localhost: 0000 oczywiście nie będzie 0000, będziesz miał tam swój własny numer portu.
Ponadto? _Ijt = xxxxxxxxxxxxxx na końcu adresu URL main.html, x jest określane przez twoje własne połączenie, więc oczywiście nie będzie równe mojemu.
Może się wydawać, że podam kilka naprawdę podstawowych punktów, ale chcę tylko wyjaśnić jak najlepiej. Dziękuję za przeczytanie i mam nadzieję, że ta pomoc przynajmniej komuś pomoże. Miłego programowania.
źródło
Możesz po prostu umieścić znacznik wokół elementu:
https://jsfiddle.net/hj6gob8b/
źródło
<button>
środku<a>
.Jedynym sposobem na to (oprócz genialnego pomysłu BalusC!) Jest dodanie
onclick
do przycisku zdarzenia JavaScript , co nie jest dobre dla dostępności.Czy zastanawiałeś się nad stylizowaniem zwykłego łącza jak przycisku? W ten sposób nie można uzyskać przycisków specyficznych dla systemu operacyjnego, ale nadal jest to najlepszy sposób IMO.
źródło
Postępując zgodnie z tym, co dodało kilku innych, możesz szaleć za pomocą prostej klasy CSS bez PHP, bez kodu jQuery , po prostu zwykłego HTML i CSS.
Utwórz klasę CSS i dodaj ją do swojej kotwicy. Kod znajduje się poniżej.
To jest to. Jest to bardzo łatwe i pozwala być tak kreatywnym, jak chcesz. Kontrolujesz kolory, rozmiar, kształty (promień) itp. Aby uzyskać więcej informacji, zobacz witrynę, w której to znalazłem .
źródło
Jeśli chcesz uniknąć korzystania z formularza lub danych wejściowych i szukasz linku przypominającego przycisk, możesz utworzyć ładnie wyglądający link z opcją div, kotwicą i
h1
tagiem. Potencjalnie chciałbyś tego, abyś mógł swobodnie umieścić przycisk linku wokół swojej strony. Jest to szczególnie przydatne w przypadku przycisków centrujących poziomo i zawierających w nich tekst wyśrodkowany pionowo. Oto jak:Twój przycisk będzie się składał z trzech zagnieżdżonych elementów: otoki div, kotwicy i h1, podobnie jak:
Oto jak jsFiddle to sprawdzić i bawić się z nim.
Korzyści z tej konfiguracji: 1. Tworzenie wyświetlacza otoki div: blok ułatwia centrowanie (przy użyciu marginesu: 0 auto) i pozycjonowanie (podczas gdy <a> jest wbudowany i trudniejszy do pozycjonowania i niemożliwy do centrowania).
Możesz po prostu wyświetlić <a>: blokować, przesuwać go i stylizować jako przycisk, ale wtedy wyrównanie tekstu w środku staje się trudne.
Umożliwia to ustawienie <a> display: inline-table i <h1> display: table-cell, co pozwala na użycie vertical-align: middle na <h1> i wyśrodkowanie go w pionie (co zawsze jest miłe dla przycisk). Tak, możesz użyć paddingu, ale jeśli chcesz, aby przycisk zmieniał się dynamicznie, nie będzie tak czysty.
Czasami, gdy osadzasz <a> w div, tylko tekst jest klikalny, ta konfiguracja sprawia, że klikalny jest cały przycisk.
Nie musisz zajmować się formularzami, jeśli tylko próbujesz przejść na inną stronę. Formularze służą do wprowadzania informacji i powinny być na to zarezerwowane.
Umożliwia czyste oddzielenie stylizacji przycisków i stylów tekstu (przewaga rozciągania? Jasne, ale CSS może wyglądać nieprzyjemnie, więc dobrze jest go rozłożyć).
Zdecydowanie ułatwiło mi to zaprojektowanie mobilnej strony internetowej na ekrany o różnych rozmiarach.
źródło
@ Nicolas,
type="button"
obserwowanie mnie zadziałało, ponieważ twój nie miał, dzięki czemu zaczął zachowywać się jak typ przesyłania. Ponieważ mam już jeden typ przesyłania. Nie działało dla mnie .... a teraz możesz albo dodać klasę do przycisku lub,<a>
aby uzyskać wymagany układ:źródło
Inną opcją jest utworzenie linku w przycisku:
Następnie użyj CSS, aby nadać styl linkowi i przyciskowi, tak aby link zajmował całą przestrzeń w przycisku (aby użytkownik nie pomylił kliknięcia):
Stworzyłem tutaj demo .
źródło
Jeśli chcesz utworzyć przycisk, który będzie używany dla adresu URL w dowolnym miejscu, utwórz klasę przycisku dla kotwicy.
źródło
Wiem, że przesłano wiele odpowiedzi, ale żadna z nich nie wydawała się naprawdę rozwiązać problemu. Oto moje zdanie na temat rozwiązania:
<form method="get">
metody, od której zaczyna się PO. Działa to naprawdę dobrze, ale czasami dołącza a?
do adresu URL. To?
jest główny problem.?
nie był dołączany do adresu URL. Bezproblemowo wróci do<form>
metody dla bardzo niewielkiej części użytkowników, którzy nie mają włączonej obsługi JavaScript.<form>
lub<button>
nawet istnieć. W tym przykładzie używam jQuery, ponieważ jest szybki i łatwy, ale można to również zrobić w JavaScript.<form>
action
atrybucie.Przykład JSBin (fragment kodu nie może podążać za linkami)
źródło
7 sposobów, aby to zrobić:
window.location.href = 'URL'
window.location.replace('URL')
window.location = 'URL'
window.open('URL')
window.location.assign('URL')
źródło
Dla HTML 5 i stylizowany przycisk wraz z tłem obrazu
źródło
Możesz także użyć przycisku:
Na przykład w składni ASP.NET Core :
źródło
jeśli używasz certyfikatu SSL
źródło
Pomocne były osoby, które odpowiedziały przy użyciu
<a></a>
atrybutów na<button></button>
.ALE ostatnio napotkałem problem, kiedy użyłem linku wewnątrz
<form></form>
.Przycisk jest teraz traktowany jak przycisk / jako przycisk przesyłania (HTML5). Próbowałem obejść tę metodę i znalazłem tę metodę.
Utwórz przycisk stylu CSS, taki jak poniżej:
Lub stwórz nowy tutaj: CSS Button Generator
A następnie utwórz link z tagiem klasy nazwanym na podstawie stylu CSS:
Oto skrzypce:
JS Fiddle
źródło
Użyłem tego na stronie, nad którą obecnie pracuję i działa świetnie! Jeśli chcesz też trochę fajnego stylu, umieszczę tutaj CSS.
JSFiddle robocza tutaj .
źródło
Możesz także ustawić przyciski
type-property
na „przycisk” (powoduje to, że nie przesyła formularza), a następnie zagnieździć je w łączu (powoduje przekierowanie użytkownika).W ten sposób możesz mieć inny przycisk w tej samej formie, który przesyła formularz, w razie potrzeby. Myślę też, że w większości przypadków jest to lepsze niż ustawienie metody formularza i akcji jako linku (chyba że jest to formularz wyszukiwania, jak sądzę ...)
Przykład:
W ten sposób pierwszy przycisk przekierowuje użytkownika, a drugi przesyła formularz.
Uważaj, aby przycisk nie wyzwalał żadnej akcji, ponieważ spowoduje to konflikt. Ponadto, jak zauważył Arius, powinieneś być świadomy, że z powyższego powodu nie jest to ściśle uważany za prawidłowy HTML, zgodnie ze standardem. Działa jednak zgodnie z oczekiwaniami w Firefox i Chrome, ale nie przetestowałem go jeszcze dla Internet Explorera.
źródło
Możesz użyć javascript:
Zamień na
http://www.google.com
swoją stronę internetową, pamiętaj o dołączeniuhttp://
przed adresem URL.źródło
W JavaScript
W HTML
źródło
Wpisz
window.location
i naciśnijenter
w konsoli przeglądarki. Następnie możesz uzyskać jasny pomysł, colocation
zawieraTutaj możesz ustawić dowolną wartość.
Aby przekierować kolejną stronę, możesz ustawić
href
wartość za pomocą linku.W Twoim przypadku-
źródło
Jeśli potrzebujesz, aby wyglądał jak przycisk, z naciskiem na obraz gradientowy , możesz to zrobić:
źródło
Jeśli chcesz przekierować na strony, które znajdują się w Twojej witrynie, oto moja metoda - dodałem atrybut href do przycisku i onclick przypisał this.getAttribute ('href') do document.location.href
** Nie zadziała, jeśli odwołujesz się do adresów URL poza domeną z powodu opcji „X-Frame-Options” na „sameorigin”.
Przykładowy kod:
źródło