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>
Il modo semplice HTML è di metterlo in un <form>
in cui si specifica l'URL di destinazione desiderato nell'attributo action
.
<form action="http://google.com">
<input type="submit" value="Go to Google" />
</form>
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 <button type="submit">
. L'unica differenza è che l'elemento <button>
permette i bambini.
Ti aspetteresti intuitivamente di poter usare <button href="http://google.com">
analogamente all'elemento <a>
, ma purtroppo no, questo attributo non esiste secondo le specifiche HTML.
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>
Se JavaScript è permesso, imposta il window.location.href
.
<input type="button" onclick="location.href='http://google.com';" value="Go to Google" />
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.