Como criar um botão HTML que funcione como um link?

Eu gostaria de criar um botão HTML que actuasse como um link. Então, quando você clica no botão, ele é redirecionado para uma página. Eu gostaria que ele fosse o mais acessível possível.

Eu também gostaria que houvesse' não há caracteres extras, ou parâmetros na URL.

Como posso conseguir isto?

Com base nas respostas publicadas até agora, estou a fazer isto no momento:

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

mas o problema com isso é que em Safari e Internet Explorer, ele adiciona um caractere de ponto de interrogação ao final da URL. Eu preciso encontrar uma solução que não'não adicione nenhum caractere ao final da URL.

Há duas outras soluções para fazer isto: Usando JavaScript ou estilizando um link para se parecer com um botão.

Usando JavaScript:

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

Mas isso obviamente requer JavaScript, e por essa razão é menos acessível aos leitores de tela. O objetivo de um link é ir para outra página. Portanto, tentar fazer um botão agir como um link é a solução errada. Minha sugestão é que você deve usar um link e estilo para parecer com um botão.

<a href="/link/to/page2">Continue</a>
Community
Pergunta editada :em
Programação
button html hyperlink anchor htmlbutton
25º maio 2010 в 4:39
21 vistas
Solução

HTML

A forma HTML simples é colocá-lo em um `onde você especifica a URL de destino desejada no atributoaction`.


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

Se necessário, defina CSS display: inline; no formulário para mantê-lo no fluxo com o texto ao redor. Ao invés de <input type="submit"> no exemplo acima, você também pode utilizar . A única diferença é que o elemento permite crianças.

Você espera intuitivamente ser capaz de utilizar `análogo ao elemento`, mas infelizmente não, este atributo não existe de acordo com especificação HTML.

CSS

Se o CSS é permitido, simplesmente utilize um <a> que você estilo para se parecer com um botão utilizando entre outros a propriedade appearance (apenas Internet o suporte ao Explorer é atualmente (julho de 2015) ainda pobre).

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

Ou escolha uma dessas muitas bibliotecas CSS como Bootstrap.

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

JavaScript

Se o JavaScript for permitido, defina o window.location.href.

<input type="button" onclick="location.href='http://google.com';" value="Go to Google" />
BalusC
Resposta editada :em
Comentários (20)
 

    <input TYPE="button" VALUE="Home Page"
        onclick="window.location.href='http://www.wherever.com'">
Peter Mortensen
Resposta editada :em
Comentários (6)

A única maneira de fazer isso (exceto pela engenhosa idéia da BalusC!) é adicionando um evento JavaScript clique ao botão, o que não é bom para acessibilidade.

Já pensou em estilizar um link normal como um botão? Você não pode alcançar botões específicos de SO dessa forma, mas ainda assim é a melhor maneira IMO.

Peter Mortensen
Resposta editada :em
Comentários (5)