Enviar Link - Sem Javascript: Desvantagens?

Question

deparei-me com uma revelação no outro dia. Ao tentar criar um botão de envio, utilizando uma imagem, eu corri para um problema onde a imagem não foi exibido, mas o texto value era. Na época, isso não é o que eu queria, mas agora, quando olho para trás, vejo algum potencial de uso para isso.

Se você precisar enviar dados para outra página, mas nada disso requer entrada do usuário, você pode enviá-lo no link (ou formulário) via GET ou através de um formulário via POST. O problema é que a primeira cria URLs feias e o último requer um botão submit que parece fora do lugar. Claro, eu poderia vir acima com uma imagem, mas o que se eu só queria texto selecionável.

Então, eu comecei a brincar um pouco e Firefox parece tornar o seguinte como eu desejo, como um link clicável que envia um formulário. Tudo que você tem a fazer é remover o atributo src do tag input type='image':

<form action='some_page' method='post'>
  <input type='hidden' name='email_address' value='test@test.com' />
  <input type='image' value='E-mail User' />
</form>

Será que esta solução trabalho em outros navegadores? Quais são as desvantagens para fazer isso (além do fato óbvio de que o seu link CSS não é aplicado corretamente)? ??

Answer 1

Eu gosto de uma solução que utiliza uma ligação efectiva (oculto) que fica exposto via javascript em conjunto com um botão dentro de uma tag noscript.

 <form action="some_page" method="post">
    <input type="hidden" name="email_address" value="test@test.com" />
    <a href="#" class="submit-link" style="display: none;">E-mail User</a>
    <noscript>
       <input type="submit" value="E-mail User" />
    </noscript>
 </form>

 $('submit-link').click( function() {
     $(this).closest('form').submit();
     return false;
 })
 .show();

Answer 2

Não há necessidade de usar uma entrada de imagem, por que não usar um regular botão enviar e aplicar algum estilo heavy-handed para fazer parecer que texto normal?

<input type="submit" value="E-mail User" class="link">

<style>
input.link {
    border: none;
    background: none;
    cursor: pointer;
    /* etc */
}
</style>

Answer 3

Usando HTML 4.01 Strict ele trabalhou em FF3.5, mas não no IE8 ou Chrome. As obras de ligação, mas não há nenhum texto apenas um ponto em branco para uma imagem em falta.

Então, isso parece ser uma má ideia, uma vez que só pode trabalhar em um browser. Para mim, isso é um bem grande desvantagem, a menos que seu único mercado é para navegadores Firefox e, em seguida, vá em frente, ótima idéia. :)

Como James Skidmore sugeriu, é fácil de fazer um onclick com javascript para apresentá-lo como um post.

Eu sugeriria JS discretos, assim, se alguém não tem JS em seguida, ele vai funcionar como um link, fazendo uma submissão GET, mas se eles têm JS então seria alterar o comportamento a ser POST sem url feio mudança.

Ou, como foi mencionado o fundo da imagem pode se misturar com o fundo do formulário.

Answer 4

Você poderia, em vez enviar o formulário de forma dinâmica através de JS, ou usar um botão regular de enviar com um fundo transparente ou branco.