Come creare un pulsante HTML che si comporta come un link?

Vorrei creare un pulsante HTML che si comporta come un link. Così, quando si fa clic sul pulsante, esso reindirizza a una pagina. Vorrei che fosse il più accessibile possibile.

Vorrei anche che non ci fossero caratteri extra o parametri nell'URL.

Come posso ottenere questo?

Sulla base delle risposte postate finora, attualmente sto facendo questo:

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

ma il problema è che in Safari e Internet Explorer, aggiunge un punto interrogativo alla fine dell'URL. Ho bisogno di trovare una soluzione che non aggiunga alcun carattere alla fine dell'URL.

Ci sono altre due soluzioni per farlo: Usare JavaScript o stilizzare un link per farlo sembrare un pulsante.

Usare JavaScript:

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

Ma questo ovviamente richiede JavaScript, e per questo motivo è meno accessibile agli screen reader. Lo scopo di un link è di andare in un'altra pagina. Quindi cercare di far agire un pulsante come un link è la soluzione sbagliata. Il mio suggerimento è di usare un link e stilizzarlo per farlo sembrare un pulsante.

<a href="/link/to/page2">Continue</a>
Community
Domanda modificata 23º maggio 2017 в 12:03
Programmazione
button html hyperlink anchor htmlbutton
25º maggio 2010 в 4:39
31 visualizzazioni
Soluzione

HTML

Il modo semplice HTML è di metterlo in un `in cui si specifica l'URL di destinazione desiderato nell'attributoaction`.


    <input type="submit" value="Go to Google" />

Se necessario, impostate il CSS display: inline; sul modulo per mantenerlo nel flusso con il testo circostante. Invece di <input type="submit"> nell'esempio precedente, puoi anche usare . L'unica differenza è che l'elemento permette i bambini.

Ti aspetteresti intuitivamente di poter usare `analogamente all'elemento`, ma purtroppo no, questo attributo non esiste secondo le specifiche HTML.

CSS

Se i CSS sono ammessi, usa semplicemente un <a> che stilizzi per sembrare un pulsante usando tra l'altro la proprietà appearance (solo il supporto di Internet Explorer è attualmente (luglio 2015) ancora scarso).

<a href="http://google.com" class="button">Go to Google</a>
<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;
}

Oppure scegli una delle tante librerie CSS come Bootstrap.

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

JavaScript

Se JavaScript è permesso, imposta il window.location.href.

<input type="button" onclick="location.href='http://google.com';" value="Go to Google" />
BalusC
Risposta modificata 4º agosto 2016 в 10:53
Commentari (20)
 

    <input TYPE="button" VALUE="Home Page"
        onclick="window.location.href='http://www.wherever.com'">
Peter Mortensen
Risposta modificata 21º luglio 2014 в 3:22
Commentari (6)

L'unico modo per farlo (tranne l'idea geniale di BalusC!) è aggiungere un evento JavaScript onclick al pulsante, che non è buono per l'accessibilità.

Hai considerato lo stile di un normale link come un pulsante? Non puoi ottenere pulsanti specifici del sistema operativo in questo modo, ma è ancora il modo migliore IMO.

Peter Mortensen
Risposta modificata 21º luglio 2014 в 3:24
Commentari (5)