Jak utworzyć typ wejścia = przycisk działa jak hiperłącze i przekierowanie za pomocą żądania pobierania?

126

Istnieje kilka różnych sposobów, aby to zrobić - po pierwsze, po prostu umieścić go wewnątrz formularza, który wskazuje na to, gdzie chcesz jechać:

<form action="/my/link/location" method="get"> 
    <input type="submit" value="Go to my link location" 
     name="Submit" id="frm1_submit" /> 
</form>

Ma to tę zaletę, że działa nawet bez JavaScript włączone .

Po drugie, należy użyć przycisku autonomicznego z javascript:

<input type="submit" value="Go to my link location" 
    onclick="window.location='/my/link/location';" />

To jednak nie powiedzie się bez JavaScriptu w przeglądarkach (uwaga: jest to naprawdę złe praktyki - należy używać obsługi zdarzeń, inline kod nie tak - to tylko najprostszym sposobem ilustrującym takie rzeczy mówię o)

trzecią opcją jest styl rzeczywisty związek jak przycisk:

<style type="text/css"> 
.my_content_container a { 
    border-bottom: 1px solid #777777; 
    border-left: 1px solid #000000; 
    border-right: 1px solid #333333; 
    border-top: 1px solid #000000; 
    color: #000000; 
    display: block; 
    height: 2.5em; 
    padding: 0 1em; 
    width: 5em;  
    text-decoration: none;  
} 
// :hover and :active styles left as an exercise for the reader. 
</style> 

<div class="my_content_container"> 
    <a href="/my/link/location/">Go to my link location</a> 
</div>

.

Ma to tę zaletę, że działa wszędzie, gdzie i oznacza to, co najprawdopodobniej chcesz.

Źródło

2010-07-21 20:48:29

1

Nie rób tego. Mogę chcieć uruchomić mój samochód na małpiej krwi. Mam swoje powody, ale czasami lepiej trzymać się rzeczy, które zostały zaprojektowane, nawet jeśli nie są "absolutnie idealnie" dopasowane do tego, do czego dążysz.

Aby zarchiwizować argument, przesyłam następujące informacje.

Zobacz, jak w tym obrazie brakuje paska stanu na dole. Ten link używa modelu onclick="location.href". (To jest prawdziwy przykład produkcji mojego poprzednika). Może to skłonić użytkowników do kliknięcia linku, ponieważ nie mają pojęcia, dokąd je bierze, na początek.

enter image description here

Jesteś również dokonywania Search engine optimization trudniejsze IMO, a także dokonywania debugowanie i odczyt kodu html/bardziej skomplikowane. Przycisk przesyłania powinien przesłać formularz. Dlaczego Ty (społeczność programistów) próbujesz stworzyć niestandardowy interfejs użytkownika?

Źródło

2011-02-14 20:26:09

+1

Um, zgaduję, że jeden zabiera nas do działu namacalnego, a drugi do pomocy klienta. Większość użytkowników nawet nie patrzy na linię statusu (lub nawet nie rozumie, co to jest). Deweloperzy robią, ale użytkownicy tego nie robią. Użytkownicy lubią przyciski, ale są nieufni w stosunku do linków (ponieważ linki przenoszą je gdzieś, przyciski są tylko imperatywami). Przejdź do popularnych serwisów takich jak Amazon i zobacz przyciski. –

+0

Brak odpowiedzi. Zalety, ale wciąż nie jest odpowiedzią na zadane pytanie. –

6

<script type="text/javascript"> 
<!-- 
function newPage(num) { 
var url=new Array(); 
url[0]="http://www.htmlforums.com"; 
url[1]="http://www.codingforums.com."; 
url[2]="http://www.w3schools.com"; 
url[3]="http://www.webmasterworld.com"; 
window.location=url[num];`` 
} 
// --> 
</script> 
</head> 
<body> 
<form action="#"> 
<div id="container"> 
<input class="butts" type="button" value="htmlforums" onclick="newPage(0)"/> 
<input class="butts" type="button" value="codingforums" onclick="newPage(1)"/> 
<input class="butts" type="button" value="w3schools" onclick="newPage(2)"/> 
<input class="butts" type="button" value="webmasterworld" onclick="newPage(3)"/> 
</div> 
</form> 
</body>

Oto drugi sposób, jest prostszy niż drugi.

<input id="inp" type="button" value="Home Page" onclick="location.href='AdminPage.jsp';" />

To jest prostsze.

Źródło

2012-09-26 17:56:48

+0

nieco zbyt skomplikowany na prosty przykład, ale w rzeczywistości poprawny. Witamy w SO. – qdot

+0

–

+0

lepiej :) teraz edytuj swój wpis, aby uwzględnić to również - myślę, że właśnie przegłosowałem ciebie wystarczająco, aby edytować własne posty - zachęcamy do odkrywania tej społeczności! – qdot

114

Można dokonać <button> tag zrobić działania takiego:

<a href="http://www.google.com/"> 
    <button>Visit Google</button> 
</a>

czyli

<a href="http://www.google.com/"> 
    <input type="button" value="Visit Google" /> 
</a>

To proste i nie wymaga JavaScript!

UWAGA:

Takie podejście nie jest ważna od struktury HTML. Ale działa na wielu nowoczesnych przeglądarkach. Zobacz następujący numer:

For <button>; i

For <input type="button />

Źródło

2013-02-26 15:30:48

+6

Jak to NIE jest odpowiedzią na to pytanie? Idealny. – DelightedD0D

+15

Ponieważ ["Przycisk elementu interaktywnego' "nie może występować jako element potomny elementu" a ".] (Http://www.w3.org/TR/html-markup/button.submit.html#button. ograniczenia przesyłania). Jednak działa dobrze w większości przeglądarek. – RandomSeed

+0

@YaK And an ? –

2

myślę, że jest zapotrzebowanie.

a href="#" onclick="document.forms[0].submit();return false;"

Źródło

2013-08-05 12:59:59 diogo

3

Dla tych, którzy natknęli się na to z wyszukiwania (Google) i próbują tłumaczyć na .NET i kod MVC. (Jak w moim przypadku)

@using (Html.BeginForm("RemoveLostRolls", "Process", FormMethod.Get)) { 
    <input type="submit" value="Process" /> 
}

To pokaże się przycisk "Process" i przejście do "/ Process/RemoveLostRolls". Bez "FormMethod.Get" działało, ale było postrzegane jako "post".

Źródło

2015-01-02 22:57:17

Jak utworzyć typ wejścia = przycisk działa jak hiperłącze i przekierowanie za pomocą żądania pobierania?

Odpowiedz

Powiązane problemy