18.12.2024

Transformando um Botão HTML em um Link: Método GET e Redirecionamento

Resposta Rápida

Para redirecionar usuários para outra página ao clicar em um elemento de entrada (input), use o seguinte código:

<input type="button" value="Ir" onclick="window.location='https://exemplo.com'">

Esse código redirecionará o usuário para a URL especificada quando o botão for clicado, utilizando uma solicitação GET.

Usando JavaScript para Funcionalidade de Redirecionamento

Na resposta rápida, recomenda-se o uso de JavaScript para habilitar a funcionalidade de redirecionamento. Essa abordagem é particularmente eficaz em situações onde:

• É necessário simular um clique em um botão sem o envio padrão do formulário.
• É importante facilitar uma solicitação GET direta e simples.
• Não há expectativa de trabalhar com bibliotecas ou frameworks complexos de JavaScript.

Alternativas para Criar Links de Botões Sem Usar JavaScript

Se a decisão foi evitar o método onclick e o uso de JavaScript em geral, existem outras opções em HTML:

• Link Estilizado: Um elemento <a> estilizado como um botão com CSS mantém todas as funções de um hyperlink.

  <a href="https://exemplo.com" class="button-like">Ir</a>

• Envio de Formulário: Para submeter um formulário, use <input type="submit"> dentro de um <form>, especificando o método como "get".

  <form action="https://exemplo.com">
  <input type="submit" value="Ir">
  </form>

Passando Parâmetros em uma Solicitação GET

Você pode adicionar parâmetros diretamente na URL para funcionalidades mais detalhadas:

<input type="button" value="Buscar" onclick="location.href='https://exemplo.com?query=termoDeBusca';">

Essa abordagem permite enviar uma consulta de busca como um parâmetro.

Visualização

O processo do botão, apresentado na forma de um táxi 🚖, se parece com isto:

<input type="button" value="Visitar Broadway" onclick="location.href='http://broadway.com';">

🚖 Clique em 'Visitar Broadway' -> Enviar solicitação para rota (HTTP GET) -> Redirecionar para Broadway (broadway.com)

Um clique, e você é instantaneamente transportado para um novo lugar, como um personagem em um filme de aventura.

Gerenciando Redirecionamentos Complexos com o Método onclick

O manipulador de evento onclick em JavaScript é uma ferramenta poderosa para gerenciar redirecionamentos:

• Redirecionamento Condicional: Realize verificações de condição antes de redirecionar, utilizando uma estrutura de if-else para lidar com dados dinâmicos.

  function redirecionarUsuario() {
  if (usuarioTemPermissoes) {
    location.href = 'https://exemplo.com/privado';
  } else {
    alert('Acesso negado!');
  }
  }

• Adicionando Parâmetros de Consulta: Um clique em um botão pode enviar dados de um formulário para a URL usando codificação URI.

  function buscarComParametros() {
  const termoDeBusca = document.getElementById('inputBusca').value;
  location.href = `https://exemplo.com?query=${encodeURIComponent(termoDeBusca)}`;
  }

• Gerenciando Navegação: Se o formulário não passar pela validação, previna a ação padrão e informe ao usuário sobre os erros.

  document.getElementById('meuBotao').addEventListener('click', function(event) {
  if (formularioValido()) {
    location.href = 'https://exemplo.com';
  } else {
    event.preventDefault();
    alert('O formulário está preenchido incorretamente.');
  }
  });

SEO e UX: A Sinergia das Abordagens

Por trás de cada botão bem elaborado, existem algumas regras de SEO e UX em ação:

• Navegação Primária: Use a tag <a> para indicar navegação primária.
• Ações Dentro do App: Nesses casos, é melhor usar <button> ou <input>.
• Clareza para o Usuário: O propósito da ação do botão deve ser claro para o usuário.

Recursos Úteis

1. Tag <a>: Anchor - HTML: Linguagem de Marcação de Hipertexto | MDN – Guia detalhado do MDN sobre o uso da tag <a>.
2. Tag Button - W3Schools – Visão geral abrangente da tag <button> no W3Schools.
3. Quando Usar o Elemento Button | CSS-Tricks – Explicação do CSS-Tricks sobre o uso correto dos botões.
4. Como Fazer um Botão HTML Que Age Como um Link? - Stack Overflow – Discussão sobre a criação de um botão-link HTML no Stack Overflow.
5. Tag <form>: Formulário - HTML: Linguagem de Marcação de Hipertexto | MDN – Tudo que você precisa saber sobre formulários no MDN.
6. Método de Evento: preventDefault() - Web APIs | MDN – Guia detalhado sobre o uso do método Event.preventDefault().
7. Padrão HTML para o Elemento <button> – Descrição do padrão HTML para a tag <button>.

Video

Navigation