come creare un pulsante HTML che agisce come un link?

vorrei creare un pulsante HTML che agisce come un link. così, quando si fa clic sul pulsante, si reindirizza ad una pagina. vorrei che fosse il più accessibile possibile.

mi piacerebbe anche così non ci sono caratteri aggiuntivi, o parametri nella URL.

come posso raggiungere questo obiettivo?


sulla base delle risposte finora pubblicate, Sto attualmente facendo questo:

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

ma il problema con questo è che in Safari e Internet & nbsp; Explorer, aggiunge un carattere punto interrogativo alla fine dell'URL. ho bisogno di trovare una soluzione che non aggiunge caratteri alla fine dell'URL.

ci sono altre due soluzioni per fare questo: utilizzando JavaScript o styling un link per apparire come un pulsante.

utilizzando JavaScript:

<button onclick="window.location.href='/page2'">Continue</button>

ma questo ovviamente richiede JavaScript, e per questo motivo è meno accessibile ai lettori di schermo. il punto di un link è quello di andare in un'altra pagina. quindi cercare di fare un pulsante agire come un collegamento è la soluzione sbagliata. il mio suggerimento è che si dovrebbe usare un link e lo stile per apparire come un pulsante.

<a href="/link/to/page2">Continue</a>

En title : How to create an HTML button that acts like a link?

109 Comments:

  1. HTML HTML HTML HTML HTML

    il modo semplice HTML è quello di metterlo in un <form> in cui si specifica l'URL di destinazione desiderata nel action attributo.

    <form action="http://google.com">
        <input type="submit" value="Go to Google" />
    </form>
    

    se necessario, impostare CSS display: inline; sul modulo per tenerlo nel flusso con il testo circostante. invece di <input type="submit"> nell'esempio precedente, è anche possibile utilizzare <button type="submit">. l'unica differenza è che l'elemento <button> permette ai bambini.

    ci si aspetta intuitivamente di poter usare <button href="http://google.com"> analogo con l'elemento <a>, ma sfortunatamente no, questo attributo non esiste secondo le specifiche HTML.

    CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS CSS

    se CSS è consentito, è sufficiente utilizzare un <a> che si stile a guardare come un pulsante utilizzando tra gli altri la proprietà appearance (solo Internet & nbsp; Supporto Explorer è attualmente (luglio 2015) ancora povero).

    <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;
    }
    

    o scegliere una di quelle molte librerie CSS come Bootstrap.

    <a href="http://google.com" class="btn btn-default">Go to Google</a>
    

    JavaScript JavaScript JavaScript JavaScript

    se JavaScript è consentito, impostare il window.location.href.

    <input type="button" onclick="location.href='http://google.com';" value="Go to Google" />
    
    1. semplice e curato. una soluzione raffinata. aggiungere display: inline al modulo per mantenere il pulsante nel flusso.
    1. in safari, questo aggiunge un punto interrogativo alla fine dell'url... c'è un modo per farlo che non aggiunge nulla all'url?
    1. @Andrew che è probabilmente a causa del GET metodo utilizzato per impostazione predefinita dal modulo ovunque, ma in IE. è possibile passare il modulo method a POST, ma che avrebbe altre conseguenze, vale a dire quando si utilizza la storia per navigare indietro dopo aver fatto clic sul pulsante. può essere inevitabile (non avrà comunque alcun effetto).
    1. @BalusC Bella soluzione, ma se si trova all'interno di qualche altra forma (forma genitore), quindi premendo questo pulsante reindirizza all'indirizzo nell'attributo azione forma del genitore.
    1. @Wlad: forme di nidificazione è comunque illegale in HTML. comportamento del browser non è specificato e non dovrebbe essere invocato.
    1. @Wlad se si desidera questa funzionalità, utilizzando un modulo, "dentro" il modulo, mantenendolo "legale", si potrebbe posizionare al di fuori della forma genitore e posizionarlo utilizzando css
    1. questo non funziona quando la pagina a cui il tuo collegamento ha già ottenuto variabili codificate in esso (cioè http://domain.com/search?query=test). composto che con il fatto che sarà aggiungere un punto interrogativo e sento davvero che questo non dovrebbe essere scelto come risposta corretta - incoraggia le persone a utilizzare un hack che alla fine fallirà nei casi di bordo.
    1. sembra semplice e bello, ma può avere effetti collaterali, se non considerato correttamente. cioè vale a dire creare la seconda forma nella pagina, forma annidata ecc.
    1. @Tejasvi: "Effetti collaterali"? queste cose sono solo errori HTML di base. lo sviluppatore HTML sarebbe meglio fare un passo indietro e riavviare l'apprendimento HTML di base.
    1. questa non è davvero una grande soluzione semanticamente. <a href=""> è il modo corretto per creare un collegamento. inoltre si potrebbe incorrere in qualche difficoltà se il sito è https e si sta utilizzando questo metodo per collegare a una pagina non https.
    1. @gerdi: Perché l'attributo href avrebbe senso sull'elemento pulsante, figuriamoci ovviamente così? un pulsante non è un collegamento ipertestuale. detto questo, forse XHTML 2 sarà di vostro interesse...
    1. cosa succede se voglio CTRL + Clicca per aprire il link in una nuova scheda? questo non funziona con un pulsante
    1. grazie per essere accurata. ancorare i tag non si disattivano facilmente, quindi avere una soluzione non-CSS è utile.
    1. ho usato questo, ma alla fine ho dovuto copiare tutti gli attributi di pulsante a questa classe in modo che il pulsante sembra esattamente lo stesso. senza di esso il testo del pulsante a malapena si adattano all'interno dei bordi del pulsante.
    1. questo sarebbe solo imitare l'apertura del link nella finestra di destinazione, piuttosto che obiettivo vuoto
  2. <form>
        <input TYPE="button" VALUE="Home Page"
            onclick="window.location.href='http://www.wherever.com'"> 
    </form>
    
    1. @Robusto che era un commento inquietante circa lo spazio vuoto che era lì:) Questa non è una buona soluzione IMO, in quanto non funziona senza JavaScript.
    1. se si utilizza il modulo basta usare un invio, se si utilizza onclick perché preoccuparsi del modulo. -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1 -1
  3. l'unico modo per farlo (tranne per l'idea geniale forma di BalusC!) è aggiungendo un JavaScript onclick evento al pulsante, che non è buono per l'accessibilità.

    hai considerato lo stile di un collegamento normale come un pulsante? non è possibile ottenere i pulsanti specifici del sistema operativo in questo modo, ma è ancora il modo migliore IMO.

    1. @Web Logica yup, è per questo che sto parlando di styling il link per apparire come un pulsante.
    1. @ChrisMarisic ci sono molti svantaggi di utilizzare onClick: non funziona con JS spento; l'utente non può aprire un link in una nuova scheda / finestra, né copiare il link nei loro appunti per la condivisione; parsers e bot non saranno in grado di riconoscere e seguire il link; browser con una funzione "prefetch" non riconoscerà il link; e molti altri.
    1. anche se questi sono punti validi, Non credo che davvero affrontare l'accessibilità. intendi l'usabilità, non l'accessibilità? in accessibilità di sviluppo web è di solito riservato per essere specificamente circa se gli utenti che hanno problemi visivi possono operare la vostra applicazione bene.
  4. uso: uso:

    <a href="http://www.stackoverflow.com/">
        <button>Click me</button>
    </a>
    

    sfortunatamente, questa marcatura non è più valida in HTML5 e non convaliderà né funzionerà sempre come potenzialmente previsto. utilizzare un altro approccio.

    1. @Rob: che non è il mio problema:) Ripiegare a Meta e vedere. tuttavia l'attributo target è imo sul bordo.
  5. <button onclick="location.href='http://www.example.com'" type="button">
             www.example.com</button>

    1. insn non è window.location.href='http://www.example.com'? location.href non sembra funzionare per me in IE9...
    1. @pinouchon Dovrebbe funzionare. finestra è implicita. potrebbe essere un bug IE9, http://stackoverflow.com/questions/7690645/ie9-window-location-href-error
    1. sembra che se non specifichi tipo = "pulsante" questo non funzionerà sempre. sembra che il pulsante di default per "presentare"
    1. se vuoi aprire il link in una nuova finestra / tab usa: onClick = "window.open ('http://www.example.com', '_ blank');"
    1. ma l'utente non può fare clic destro aperto nella nuova scheda, per che per funzionare, u bisogno del tag ancora
    1. @kenitech come specificare tipo = "pulsante"? voglio dire quale oggetto usi? (ingresso)?
    1. @RehanMehdi Questo era molto tempo fa. credo che stavo dicendo & lt; tipo di ingresso = "pulsante" o qualcosa.
    1. per favore non farlo. si rompe così tante cose come il pulsante destro del mouse menu contestuale per i link.
    1. nota che la parte "location.href" è semplicemente JS. ripristina l'oggetto "finestra" per avere una nuova posizione con un href di qualsiasi cosa. così potresti usare anche altri comandi JS, per esempio, se volessi aprire il link in una nuova scheda, potresti usare: <button type="button" onclick="window.open('https://....', '_blank');">.
  6. se è l'aspetto visivo di un pulsante che stai cercando in un tag base HTML ancora, allora è possibile utilizzare il framework Twitter Bootstrap per formattare uno dei seguenti tipi comuni HTML link / pulsanti per apparire come un pulsante. si prega di notare le differenze visive tra la versione 2, 3 o 4 del quadro:

    <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">
    

    aspetto del campione bootstrap (v4):

    Sample output of Boostrap v4 buttons

    aspetto del campione bootstrap (v3):

    Sample output of Boostrap v3 buttons

    aspetto del campione bootstrap (v2):

    Sample output of Boostrap v2 buttons

    1. sembra un po 'esagerato per lo styling di un singolo pulsante, no? con bordo, imbottitura, sfondo, e altri effetti CSS è possibile lo stile pulsanti e link per un aspetto simile senza portare su un intero framework. la metodologia Bootstrap utilizza è buona, tuttavia utilizzando Bootstrap sembra eccessivo.
  7. ci sono svantaggi a fare qualcosa come il seguente?

    <a class='nostyle' href='http://www.google.com/'>
        <span class='button'>Schedule</span>
    </a>
    

    dove a.nostyle è una classe che ha il tuo link styling (dove si può sbarazzarsi dello stile link standard) e span.button è una classe che ha lo stile per il vostro "pulsante" (sfondo, bordo, gradiente, ecc).

    1. nessun lati negativi che posso vedere, e funziona senza javascript, all'interno di una forma e probabilmente in tutte le altre situazioni. un intervallo può essere progettato per avere un button-like (e per l'utente finale, identico) aspetto come per il proprio CSS o come per un quadro con le opzioni pre-stile per i pulsanti - come Bootstrap. questa è la migliore risposta che ho visto e va bene in html5.
    1. che porta alla domanda "come faccio a stilare un link come un pulsante" che vedo è stato risposto qui: http://stackoverflow.com/questions/710089/how-do-i-make-an-html-link-look-like-a-button
  8. se si desidera creare un pulsante che viene utilizzato per un URL ovunque, creare una classe di pulsanti per un ancoraggio.

    a.button {
        background-color: #999999;
        color: #FFFFFF !important;
        cursor: pointer;
        display: inline-block;
        font-weight: bold;
        padding: 5px 8px;
        text-align: center;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }
    .button:hover {
        text-decoration: none;
    }
    
  9. andando insieme a quello che alcuni altri hanno aggiunto, si può andare selvatici con solo utilizzando una semplice classe CSS senza PHP, nessun codice jQuery, solo semplice HTML e CSS.

    creare una classe CSS e aggiungerlo al tuo ancoraggio. il codice è sotto.

    .button-link {
        height:60px;
        padding: 10px 15px;
        background: #4479BA;
        color: #FFF;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        border: solid 1px #20538D;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
        -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    }
    .button-link:hover {
        background: #356094;
        border: solid 1px #2A4E77;
        text-decoration: none;
    }
    
    <HTML>
        <a class="button-link" href="http://www.go-some-where.com"
           target="_blank">Press Here to Go</a>
    

    questo è tutto. è molto facile da fare e ti permette di essere creativo come vuoi. è possibile controllare i colori, le dimensioni, le forme (raggio), ecc. per ulteriori dettagli, vedere il sito che ho trovato su.

  10. un'altra opzione è quella di creare un link nel pulsante:

    <button type="button"><a href="yourlink.com">Link link</a></button>
    

    quindi utilizzare i CSS per lo stile del link e pulsante, in modo che il link occupa l'intero spazio all'interno del pulsante (quindi non c'è miss-click da parte dell'utente):

    button, button a{position:relative;}
    button a{top:0;left:0;bottom:0;right:0;}
    

    ho creato una demo qui.

    1. tenete a mente che le specifiche dicono che questo non è valido perché i pulsanti non dovrebbero contenere discendenti interattivi. http://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html
    1. entrambi siete corretti. VS2015 bandiere questo con un avvertimento: "elemento 'a' non può essere nidificato all'interno dell'elemento 'pulsante'" ma funziona con: IE11, Bordo, Cromo, Firefox, Safari e almeno alcuni (forse tutti) browser mobili attualmente. quindi non usare questa tecnica, ma se hai fatto in passato, funziona per ora;)
  11. è in realtà molto semplice e senza utilizzare elementi di forma. è sufficiente utilizzare il & lt; un > tag con un pulsante all'interno:).

    in questo modo:

    <a href="http://www.google.com" target="_parent"><button>Click me !</button></a>
    

    e caricherà l'href nella stessa pagina. vuoi una nuova pagina? basta usare target="_blank".

    1. mentre questo funziona, non dovrebbe essere considerato come una soluzione, ma un workaround perché se si passa questo codice attraverso validatore W3C, si ottengono errori.
  12. le persone che hanno risposto utilizzando <a></a> attributi su un <button></button> è stato utile.

    ma poi recentemente, ho incontrato un problema quando ho usato un link all'interno di un <form></form>.

    il pulsante è ora considerato come / come un pulsante di presentazione (HTML5). ho provato a lavorare in giro, e hanno trovato questo metodo.

    creare un pulsante stile CSS come quello qui sotto:

    .btn-style{
        border : solid 1px #0088cc;
        border-radius : 6px;
        moz-border-radius : 6px;
        -webkit-box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
        -moz-box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
        box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
        font-size : 18px;
        color : #696869;
        padding : 1px 17px;
        background : #eeeeee;
        background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(49%,#eeeeee), color-stop(72%,#cccccc), color-stop(100%,#eeeeee));
        background : -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
        background : -webkit-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
        background : -o-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
        background : -ms-linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
        background : linear-gradient(top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%);
        filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 );
    
    }
    

    o crearne uno nuovo qui: CSS Button Generator

    e poi crea il tuo link con un tag di classe che prende il nome dallo stile CSS che hai creato:

    <a href='link.php' class='btn-style'>Link</a>
    

    ecco un violino:

    Fiddle di JS

    1. impostare il tipo di pulsante = "pulsante", che vi permetterà di fare clic su di esso senza inviare il modulo.
  13. se si desidera evitare di dover utilizzare un modulo o un ingresso e siete alla ricerca di un pulsante in cerca di link, è possibile creare link bello pulsante con un involucro div, un ancoraggio e un tag h1. si potrebbe desiderare questo in modo da poter liberamente posizionare il link-pulsante intorno alla pagina. questo è particolarmente utile per i pulsanti di centraggio orizzontale e per avere al loro interno un testo centrato verticalmente. ecco come:

    il vostro pulsante sarà composto da tre pezzi nidificati: un involucro div, un ancoraggio, e un h1, così:

    <div class="link-button-wrapper">
        <a href="your/link/here">
            <h1>Button!</h1>
        </a>
    </div>
    

    poi nel CSS, il tuo stile dovrebbe apparire così:

    .link-button-wrapper {
        width: 200px;
        height: 40px;
        box-shadow: inset 0px 1px 0px 0px #ffffff;
        border-radius: 4px;
        background-color: #097BC0;
        box-shadow: 0px 2px 4px gray;
        display: block;
        border:1px solid #094BC0;
    }
    .link-button-wrapper > a {
        display: inline-table;
        cursor: pointer;
        text-decoration: none;
        height: 100%;
        width:100%;
    }
    .link-button-wrapper > a > h1 {
        margin: 0 auto;
        display: table-cell;
        vertical-align: middle;
        color: #f7f8f8;
        font-size: 18px;
        font-family: cabinregular;
        text-align: center;
    }
    

    ecco un jsfiddle per controllare e giocare con esso.

    vantaggi di questa installazione: 1. fare il display dell'involucro div: il blocco rende facile centrare (usando margine: 0 auto) e posizionare (mentre un & lt; a > è inline e più difficile da posizionare e non è possibile centrare).

    1. si potrebbe solo fare il & lt; a > display: blocco, spostarlo in giro, e lo stile come un pulsante, ma poi verticalmente allineare il testo all'interno di esso diventa difficile.

    2. questo permette di realizzare il & lt; un > display: inline-table e il & lt; h1 > display: table-cell, che consente di utilizzare l'allineamento verticale: centrale sul & lt; h1 > e centrale verticalmente (che è sempre bello su un pulsante). sì, si potrebbe usare padding, ma se si desidera che il pulsante per ridimensionare dinamicamente, che non sarà così pulito.

    3. a volte, quando si incorpora un & lt; a > all'interno di un div, solo il testo è cliccabile, questa impostazione rende l'intero pulsante cliccabile.

    4. non hai a che fare con i moduli se stai solo cercando di passare ad un'altra pagina. i moduli sono destinati all'immissione di informazioni, e dovrebbero essere riservati.

    5. consente di separare in modo pulito lo stile pulsante e lo styling del testo l'uno dall'altro (tratto vantaggio? certo, ma CSS può ottenere nasty-looking quindi è bello decomporlo).

    e 'sicuramente reso la mia vita più facile lo stile di un sito web mobile per schermi di dimensioni variabili.

  14. per HTML 5 e pulsante in stile con sfondo immagine

    <a id="Navigate" href="http://www.google.com">
      <input 
        type="button"
        id="NavigateButton"
        style="
          background-image: url(http://cdn3.blogsdna.com/wp-content/uploads/2010/03/Windows-Phone-7-Series-Icons-Pack.png);
          background-repeat: no-repeat;
          background-position: -272px -112px;
          cursor:pointer;
          height: 40px;
          width: 40px;
          border-radius: 26px;
          border-style: solid;
          border-color:#000;
          border-width: 3px;" title="Navigate"
        />
    </a>

    1. non convalida. incollare in https://validator.w3.org/nu/#textarea dà Errore: l'input elemento non deve apparire come un discendente di un elemento.
  15. se ciò di cui hai bisogno è che apparirà come un pulsante, con enfasi sull'immagine sfumata, puoi farlo:

    <a href="www.yourlink.com" class="btn btn-gradient"><i class="fa fa-home"> Button Text</i></a>
    
  16. ho usato questo per un sito web che attualmente sto lavorando e funziona alla grande!. se volete un po 'di stile troppo freddo metterò il CSS qui.

    input[type="submit"] {
      background-color: white;
      width: 200px;
      border: 3px solid #c9c9c9;
      font-size: 24pt;
      margin: 5px;
      color: #969696;
    }
    
    input[type="submit"]:hover {
      color: white;
      background-color: #969696;
      transition: color 0.2s 0.05s ease;
      transition: background-color 0.2s 0.05s ease;
      cursor: pointer;
    }
    <input type="submit" name="submit" onClick="window.location= 'http://example.com'">

    lavorare JSfiddle qui.

  17. si potrebbe anche impostare i pulsanti type-property a "pulsante" (rende non inviare il modulo), e poi nido all'interno di un link (rende reindirizzare l'utente).

    in questo modo si potrebbe avere un altro pulsante nella stessa forma che invia il modulo, nel caso in cui è necessario. penso anche che questo è preferibile nella maggior parte dei casi sopra l'impostazione del metodo di forma e l'azione di essere un collegamento (a meno che non sia una ricerca-forma credo...)

    esempio: esempio:

    <form method="POST" action="/SomePath">
      <input type="text" name="somefield" />
      <a href="www.target.com"><button type="button">Go to Target!</button></a>
      <button type="submit">submit form</button>
    </form>

    in questo modo il primo pulsante reindirizza l'utente, mentre il secondo invia il modulo.

    fare attenzione a assicurarsi che il pulsante non attiva alcuna azione, in quanto ciò si tradurrà in un conflitto. anche come ha sottolineato Arius, si dovrebbe essere consapevoli che, per la ragione di cui sopra, questo non è strettamente parlando considerato HTML valido, secondo lo standard. funziona tuttavia come previsto in Firefox e Chrome, ma non ho ancora testato per Internet & nbsp; Explorer.

    1. secondo la norma no, ma nella mia esperienza questo funziona bene però. non hanno cross-browser testato ampiamente ancora, ma almeno FF e Chrome sembrano gestire bene, con il comportamento previsto.
    1. non si tratta di possibilità. questo è solo contro la specifica HTML5 e questo è tutto.
  18. se si utilizza un modulo interno, aggiungere il tipo di attributo = "reset" insieme all'elemento pulsante. impedirà l'azione di forma.

    <button type="reset" onclick="location.href='http://www.example.com'">
        www.example.com
    </button>
    
  19. so che ci sono state un sacco di risposte presentate, ma nessuno di loro sembrava davvero inchiodare il problema. ecco la mia opinione a una soluzione:

    1. utilizzare il metodo <form method="get"> con cui il sistema operativo sta iniziando. questo funziona davvero bene, ma a volte aggiunge un ? all'URL. il ? è il problema principale.
    2. utilizzare jQuery / JavaScript per fare il link seguente quando JavaScript è abilitato in modo che ? non finisce aggiunto alla URL. sarà senza soluzione di continuità ricaduta al metodo <form> per la frazione molto piccola di utenti che non hanno JavaScript abilitato.
    3. il codice JavaScript utilizza delegazione di eventi in modo da poter collegare un ascoltatore di evento prima del <form> o <button> anche esistere. sto usando jQuery in questo esempio, perché è veloce e facile, ma può essere fatto in 'vaniglia' JavaScript pure.
    4. il codice JavaScript impedisce che si verifichi l'azione predefinita e segue il link indicato nell'attributo <form> action.

    esempio di JSBin (il frammento di codice non può seguire i link)

    // Listen for any clicks on an element in the document with the `link` class
    $(document).on('click', '.link', function(e) {
        // Prevent the default action (e.g. submit the form)
        e.preventDefault();
    
        // Get the URL specified in the form
        var url = e.target.parentElement.action;
        window.location = url;
    });
    <!DOCTYPE html>
    <html>
    
        <head>
            <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
            <meta charset="utf-8">
            <title>Form buttons as links</title>
        </head>
    
        <body>
            <!-- Set `action` to the URL you want the button to go to -->
            <form method="get" action="http://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link">
                <!-- Add the class `link` to the button for the event listener -->
                <button type="submit" class="link">Link</button>
            </form>
        </body>
    
    </html>

  20. come HTML5, pulsanti supportano l'attributo formaction. meglio di tutto, non è necessario Javascript o trucchi.

    <form>
      <button formaction="http://stackoverflow.com">Go to Stack Overflow!</button>
    </form>

    caverne

    • deve essere circondato da <form> tag.
    • <button> tipo deve essere "submit" (o non specificato), non potevo farlo lavorare con il tipo "pulsante." che porta il punto sotto.
    • sovrascrive l'azione di default in un modulo. in altre parole, se lo fai all'interno di un'altra forma che sta per causare un conflitto.

    riferimento: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction Supporto del browser: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Browser_compatibility

    1. solo per completare le informazioni: formaction è compatibile dal momento che "IE mondo" dalla versione 10 e sopra
    1. @LucaDetomi - È corretto, tuttavia è HTML5 specifico. ho aggiunto un altro link con i dati di supporto.
    1. @EternalHour stranamente curioso. negli esempi che tu ed io abbiamo fornito si suppone ci sia un'apprezzabile differenza tra il comportamento di queste due forme? in questo caso specifico <button formaction> = = = <form action>?
    1. @pseudosavant - La differenza è che la risposta si basa su Javascript per lavorare. in questa soluzione, non è necessario Javascript, è direttamente HTML.
    1. mi dispiace, avrei dovuto essere più chiaro. ovviamente la JS rende la mia diversa, ma è solo un miglioramento progressivo. il modulo va ancora a quel link senza la JS. ero curioso circa il comportamento previsto di appena il HTML <form> s in ciascuno dei nostri esempi. è formaction su un button dovrebbe aggiungere il ? ad una presentazione GET vuota? in questo JSBin sembra che l'HTML si comporti esattamente allo stesso modo per entrambi.
    1. se si desidera aprire l'uri in una nuova scheda, si dovrebbe aggiungere formtarget = "_ blank" al pulsante.
    1. @Adsy2010 - Sì, purtroppo, è per questo che li ho messi lì. ho aggiunto alcune informazioni aggiuntive alla risposta che specifica.
    1. solo per far sapere ai lettori: questo DUE funziona in IE11, quando si utilizza html5 e un tag di forma che racchiude.
    1. fatto interessante: è possibile avere più pulsanti (e più url) all'interno del tag form:)
  21. cambiare GET in POST. nessuno sembra aver affrontato il primo problema del OP, che è stato il ? sulla URL. questo è causato dal modulo che è type="GET", cambiare questo a type="POST" e il ? alla fine della URL scompare. questo perché GET invia tutte le variabili nell'URL, da qui il ?.
  22. @redfox05 Questo funziona in un contesto in cui non sono rigorosi su quale metodo si accettano per le pagine. in un contesto in cui si rifiutano i messaggi sulle pagine che si aspettano GET fallirà. penso ancora che utilizzando un link senso con la avvertenza che non reagirà alla "barra spaziatrice" quando attivo come il pulsante fa. anche qualche stile e comportamento saranno diversi (come il dragaggable). se si desidera che il vero "button-link" esperienza, avendo lato server reindirizza per la finitura URL da ? per rimuoverlo potrebbe essere anche un'opzione.
  23. sembra che ci siano tre soluzioni a questo problema (tutte con pro e contro).

    soluzione 1: pulsante in forma.

    <form method="get" action="/page2">
        <button type="submit">Continue</button>
    </form>
    

    ma il problema con questo è che in qualche versione dei browser più diffusi come Chrome, Safari e Internet Explorer, aggiunge un carattere punto interrogativo alla fine dell'URL. quindi in altre parole per il codice sopra il tuo URL finirà per assomigliare a questo:

    http://someserver/pages2?
    

    c'è un modo per risolvere questo problema, ma richiede una configurazione lato server. un esempio che utilizza Apache Mod _ rewrite sarebbe quello di reindirizzare tutte le richieste con un finale ? alla loro URL corrispondente senza il ?. ecco un esempio usando .htaccess, ma c'è un thread completo qui:

    RewriteCond %{THE_REQUEST} \?\ HTTP [NC]
    RewriteRule ^/?(index\.cfm)? /? [R=301,L]
    

    configurazioni simili possono variare a seconda del server web e dello stack utilizzato. quindi un riassunto di questo approccio:

    Pro: Pro:

    1. questo è un vero e proprio pulsante, e semanticamente ha senso.
    2. dal momento che è un pulsante reale, si comporterà anche come un pulsante reale (ad esempio comportamento trascinabile e / o imitare un clic quando si preme la barra spaziatrice quando è attivo).
    3. no JavaScript, non richiede uno stile complesso.

    contro: contro:

    1. trailing ? sembra brutto in alcuni browser. questo può essere risolto da un hack (in alcuni casi) utilizzando POST invece di GET, ma il modo pulito è quello di avere un server-side redirect. il rovescio della medaglia con il lato server redirect è che causerà una chiamata HTTP supplementare per questi collegamenti a causa del 304 redirect.
    2. aggiunge elemento aggiuntivo <form>
    3. posizionamento degli elementi quando si utilizzano più forme può essere difficile e diventa ancora peggio quando si tratta di disegni reattivi. alcuni layout possono diventare impossibili da raggiungere con questa soluzione a seconda dell'ordine degli elementi. questo può finire per impatto usabilità se il design è influenzato da questa sfida.

    soluzione 2: usare JavaScript.

    è possibile utilizzare JavaScript per attivare onclick e altri eventi per imitare il comportamento di un link utilizzando un pulsante. l'esempio qui sotto potrebbe essere migliorato e rimosso dall'HTML, ma è lì semplicemente per illustrare l'idea:

    <button onclick="window.location.href='/page2'">Continue</button>
    

    Pro: Pro:

    1. semplice (per requisiti di base) e mantenere semantico, pur non richiedendo una forma extra.
    2. dal momento che è un pulsante reale, si comporterà anche come un pulsante reale (ad esempio comportamento trascinabile e / o imitare un clic quando si preme la barra spaziatrice quando è attivo).

    contro: contro:

    1. richiede JavaScript che significa meno accessibile. questo non è ideale per un elemento base (core) come un collegamento.

    soluzione 3: ancoraggio (link) in stile come un pulsante.

    styling di un link come un pulsante è relativamente facile e in grado di fornire un'esperienza simile in diversi browser. bootstrap fa questo, ma è anche facile da raggiungere da soli utilizzando stili semplici.

    Pro: Pro:

    1. semplice (per requisiti di base) e un buon supporto cross-browser.
    2. non ha bisogno di un <form> per funzionare.
    3. non ha bisogno di JavaScript per funzionare.

    contro: contro:

    1. semantica è una sorta di rotto, perché si desidera un pulsante che agisce come un link e non un link che agisce come un pulsante.
    2. non riprodurrà tutti i comportamenti della soluzione # 1. questo non sosterrà lo stesso comportamento come pulsante. ad esempio, i collegamenti reagiscono in modo diverso quando vengono trascinati. anche la "barra spaziatrice" link trigger non funziona senza qualche codice JavaScript extra. si aggiungerà un sacco di complessità in quanto i browser non sono coerenti su come supportano keypress eventi sui pulsanti.

    conclusione conclusione conclusione conclusione

    soluzione # 1 (Pulsante in una forma) sembra il più trasparente per gli utenti con il minimo lavoro richiesto. se il layout non è influenzato da questa scelta e il tweak lato server è fattibile, questa è una buona opzione per i casi in cui l'accessibilità è la priorità (ad esempio link su una pagina di errore o messaggi di errore).

    se JavaScript non è un ostacolo ai vostri requisiti di accessibilità, allora la soluzione # 2 (JavaScript) sarebbe preferito su # 1 e # 3.

    se per qualche ragione, l'accessibilità è vitale (JavaScript non è un'opzione), ma siete in una situazione in cui il vostro design e / o la configurazione del server vi impedisce di utilizzare l'opzione # 1, allora la soluzione # 3 (Anchor in stile come un pulsante) è una buona alternativa per risolvere questo problema con un impatto minimo di usabilità.

  24. http://www.cssbuttongenerator.com/ potrebbe rivelarsi utile se si desidera creare un pulsante con css.
  25. anche Lei può usare un pulsante:

    per esempio, nella sintassi ASP.NET Core:

    // Some other tags
     <form method="post">
          <input asp-for="YourModelPropertyOrYourMethodInputName"
          value="@TheValue" type="hidden" />
          <button type="submit" class="link-button" formaction="/TheDestinationController/TheDestinationActionMethod">
          @(TextValue)
          </button>
      </form>
    // Other tags...
    
    
    <style>
           .link-button {
            background: none !important;
            border: none;
            padding: 0 !important;
            color: #20a8d8;
            cursor: pointer;
        }
    </style>
    
  26. puoi semplicemente mettere un tag intorno all'elemento:

    <a href="http://google.com" target="_blank">
    <button>My Button</button>
    </a>
    

    https://jsfiddle.net/hj6gob8b/

    1. non sono sicuro perché questo non ha ottenuto più upvams, per essere onesti. funziona esattamente come ho bisogno, e ho fatto in questo modo perché volevo ragni motore di ricerca per essere in grado di individuare e seguire il link. con JS che probabilmente non sarebbe successo, e non sono troppo sicuro di comportamento dei motori di ricerca quando si tratta di forme. inoltre non comporta alcun layout o effetti collaterali comportamentali (anche se ho assegnato una classe all'ancora e impostare il text-decoration per quella classe a none).
    1. se lo proibisce allora perché funziona? :) Nessun serio sviluppatore tiene conto di tutto il validatore W3C dice... provare a passare Facebook o Google o qualsiasi sito web enorme attraverso lì... Il web non è in attesa di nessuno
    1. @UriahsVictor Può funzionare oggi, ma un giorno i produttori di browser possono decidere di cambiare il comportamento in quanto non è valido.
    1. @JacobAlvarez manutentori del browser sanno meglio. questo non è qualcosa di raro, non vorrebbe andare giù come il browser che ha rotto internet.
  27. @Nicolas,following ha funzionato per me come il vostro non ha avuto type="button" a causa della quale ha iniziato a comportarsi come tipo di invio.. dal momento che ho già uno presentare type.it non ha funzionato per me.... e ora è possibile aggiungere classe al pulsante o per <a> per ottenere layout richiesto:

    <a href="http://www.google.com/">
        <button type="button">Click here</button>
    </a>
    
  28. se si desidera reindirizzare per le pagine che risiedono all'interno del tuo sito web, quindi ecco il mio metodo - Ho aggiunto l'attributo href al pulsante, e onclick assegnato this.getAttributes ('href') a document.location.href

    * * Non funziona se si fa riferimento per URL outsite del dominio a causa di 'X-Frame-Options' a 'sameorigence'.

    codice di esempio:

    <button onclick="document.location.href=this.getAttribute('href');" href="/">Home</button>
    
  29. perché non posizionare semplicemente il pulsante all'interno di un tag di riferimento ad esempio

    <a href="https://www.google.com/"><button>Next</button></a>
    

    questo sembra funzionare perfettamente per me e non aggiunge alcun 20% tag al link, proprio come si desidera. ho usato un link a google per dimostrare.

    si potrebbe naturalmente avvolgere questo in un tag forma, ma non è necessario.

    quando si collega un altro file locale basta metterlo nella stessa cartella e aggiungere il nome del file come riferimento. oppure specificare la posizione del file se in non è nella stessa cartella.

    <a href="myOtherFile"><button>Next</button></a>
    

    questo non aggiunge alcun carattere alla fine dell'URL sia, tuttavia ha il percorso del progetto file come l'url prima di finire con il nome del file. per esempio ad esempio

    se la mia struttura di progetto era...

    .. denota una cartella - denota un file mentre quattro | denotare una sottodirectory o un file nella cartella padre


    .. pubblico | | | |.. html | | | | | | | | | | | -main.html | | | | | -secondary.html

    se apro main.html l'URL sarebbe,

    http://localhost:0000/public/html/main.html?_ijt=i7ms4v9oa7blahblahblah
    

    tuttavia, quando ho cliccato sul pulsante interno main.html per passare a secondary.html, l'URL sarebbe,

    http://localhost:0000/public/html/secondary.html 
    

    nessun carattere speciale incluso alla fine dell'URL. spero che questo aiuti. a proposito - (% 20 denota uno spazio in un URL suo codificato e inserito nel luogo di loro.)

    nota: il localhost: 0000 ovviamente non sarà 0000 si avrà il proprio numero di porta lì.

    inoltre il? _ ijt = xxxxxxxxxxxxxxxx alla fine del main.html URL, x è determinato dalla propria connessione così ovviamente non sarà uguale al mio.


    potrebbe sembrare che sto affermando alcuni punti davvero di base, ma voglio solo spiegare come meglio posso. grazie per la lettura e spero che questo aiuto qualcuno almeno. buona programmazione.

  30. è possibile utilizzare javascript:

    <html>
    <button onclick='window.location = "http://www.google.com"'>
                Google
            </button>
    
    </html>

    sostituire http://www.google.com con il tuo sito web, assicurarsi di includere http:// prima dell'URL.

  31. 7 modi per farlo:

    1. utilizzando window.location.href = 'URL'
    2. utilizzando window.location.replace('URL')
    3. utilizzando window.location = 'URL'
    4. usare window.open('URL')
    5. usare window.location.assign('URL')
    6. utilizzando il modulo HTML
    7. utilizzando tag HTML di ancoraggio

    <!-- Using window.location.href = 'URL' -->
    <button onclick='window.location.href = "https://stackoverflow.com"'>
      Click Me
    </button>
    
    <!-- Using window.location.replace('URL') -->
    <button onclick='window.location.replace("https://stackoverflow.com")'>
      Click Me
    </button>
    
    <!-- Using window.location = 'URL' -->
    <button onclick='window.location = "https://stackoverflow.com"'>
      Click Me
    </button>
    
    <!-- Using window.open('URL') -->
    <button onclick='window.open("https://stackoverflow.com","_self","","")'>
      Click Me
    </button>
    
    <!-- Using window.location.assign('URL') -->
    <button onclick='window.location.assign("http://www.stackoverflow.com")'>
      Click Me
    </button>
    
    <!-- Using HTML form -->
    <form action='https://stackoverflow.com' method='get'>
      <input type='submit' value='Click Me'/>
    </form>
    
    <!-- Using HTML anchor tag -->
    <a href='https://stackoverflow.com'>
      <button>Click Me</button>
    </a>

  32. in JavaScript

    setLocation(base: string) {
      window.location.href = base;
    }
    

    in HTML

    <button onclick="setLocation('/<whatever>')>GO</button>"
    

More similar articles:

  • come creare un pulsante HTML che agisce come un link ad un elemento nella stessa pagina?
  • immagini con ancora tag che non agisce come un link
  • come mettere un link su un pulsante con bootstrap?
  • come fare clic implicitamente su un pulsante quando viene cliccato un collegamento ipertestuale nella stessa pagina
  • ancora tag agisce come un modulo invia pulsante?
  • <input />come faccio a collegare un CSS personalizzato progettato pulsante (classe) utilizzando?
  • jquerymobile pulsante link non funziona, funziona se mi aggiorna la pagina
  • dove inserire il link in questo codice per il pulsante di iscrizione?
  • come avere un bootstrap classe pulsante link ad un sito esterno
  • come Mimic Android/iOS pulsanti quadrati con HTML semplice e CSS2?
  • pulsante di reset che agisce come il pulsante di invio
  • pulsante vs link = tipo di input = "presentare" su un modulo
  • link e formattazione, HTTP fa la differenza?
  • link non funziona dentro div
  • come fare un pulsante per passare a una cella specifica in un altro foglio in Google Spreadsheet?
  • come raccogliere informazioni da navigare url e link ancoraggio utilizzando jquery?
  • qual è la differenza tra questi due tasselli HTML?
  • pulsante ASP.NET link che impedisce il postback
  • come applicare ancoraggi html corretti
  • come faccio a rendere jstree nodi come link?
  • collegamento da una pagina HTML a una pagina specifica o contenuto nel file xps
  • voglio collegare il pulsante e metterlo a destra
  • HTML e css. pulsanti sociali come muoverli?
  • span all'interno di ancoraggio non funziona, idee?
  • cliccando sui link di ancoraggio sposta tutta la pagina verso l'alto
  • come sapere quale link 'href' è stato cliccato dalla pagina precedente?
  • ASP.NET hyperlink come updatepanel trigger
  • come estrarre collegamenti secondari completi usando Simple-HTML-DOM?
  • come cambiare la posizione di ancoraggio
  • perché fare clic non attiva un link dalla prima volta in cromo?