Crie formulários que submetam com um ENTER

Parece óbvio, não? Mas infelizmente não é tão óbvio quanto parece. Muitos sites por aí estão regredindo vários passos na escala evolutiva da web e criando formulários que só submetem com um clique do mouse em um botão ou um ENTER quando o mesmo botão tem o foco.

Esse tipo de problema é devido, praticamente sempre, ao desejo de fazer alguma coisa “legal” com o formulário, sempre usando JavaScript e AJAX.

E a solução é tão simples: coloque um botão de submissão comum em seus formulários.

Exemplos comuns desse tipo de formulário são campos de busca e formulários onde você deve entrar apenas seu email, por exemplo, para se inscrever em algum tipo de serviço.

Nesse tipo de formulário, o comportamento padrão do usuário é digitar e apertar ENTER. Veja como é fácil fazer isso funcionar:

<input type="text" name="email" size="50">
<input type=”submit” value=”Enviar”>

Simples assim. A não ser que o campo onde os dados devem ser digitados seja uma TEXTAREA, um ENTER dentro do campo de texto vai submeter o formulário, enviar os dados para o servidor e, com sorte, trazer uma resposta para o usuário.

Se você quiser fazer algo bonito, com AJAX e tudo mais, faça em outra camada. Na camada de comportamento. Já falei sobre isso aqui em alguns posts então não vale a pena gastar espaço falando de novo.

A moral da história é: não torne o que é simples complicado. Até porque acaba sendo mais complicado pra você também.


Leia também:

Postado por Bruno Torres em 1 Mai 2007 Categorias: Web
« Como criar elementos HTML via JavaScript/DOM
window.open() no Firefox: problemas com width »

8 Comentários sobre “Crie formulários que submetam com um ENTER”

  1. Yalli Oliveira disse:
    Maio 1st, 2007 at 5:16 pm

    É… ultimamente tenho vistos muitos sites com formulários em que o butão enter não funciona após o formulário ser completado… fazendo com que o usuário tenha o trabalho de tirar a mão do teclado. Pode parecer besteira, mas para mim, isso é um saco…

  2. MARCOS disse:
    Maio 3rd, 2007 at 2:01 am

    Por favor,

    preciso de ajuda para criar um formulário, como este que estou preenchendo para colocar num site que, de modo amador, estou desenvolvendo.

    Gostaria muito de saber como criar esses formularios e submete-los da melhor forma possivel.

    Se puder me jaudar, desde ja agradeço,

    Atenciosmente,

    Marcos

    Obs.: Parabens pela página. Um dia chego lá.

  3. Lourenço Rizzotto disse:
    Julho 3rd, 2007 at 8:55 pm

    Eu descordo da importancia de utilizar ENTER para submeter formulários.Como foi dito a cima na TEXTAREA o ENTER não irá submeter o formulário, e se pensarmos bem o último campo que o usuário prenche é a TEXTAREA.

  4. Pereira disse:
    Julho 19th, 2007 at 11:48 am

    Teste de formulario

  5. Fernando Bernardes disse:
    Agosto 21st, 2007 at 4:03 pm

    //é da um trampo pra fazer isso… mais é so funfa esse código ae… ele chega se o botao pressionado dentro das text’s for igual a enter… se for ele submete o formulario ;) faroww galera ? facil d+ né ?
    function apertaenter () {

    var keynum;

    if (window.event) keynum = window.event.keyCode;

    else if (e.keyCode) keynum = e.wich;

    if (keynum == 13) document.getElementById(’iddoformulario’).submit();
    }

    //nos campos tipo text vc poem
    //Nao esquece de por

  6. Fernando Bernardes disse:
    Agosto 21st, 2007 at 4:06 pm

    falto uma ciosa… tem q por o onkeypressed nas input…

  7. Anselmo Battisti disse:
    Outubro 10th, 2007 at 8:57 am

    Outro problema na questão do ENTER para enviar os formulário são os campos SELECT. Se este tipo de campo for o último do seu formulário ai não tem o que fazer tem que dar o TAB pq qualquer outra abordagem, por exemplo, quando o usuário clicar no select mandar o foco automaticamente para o botão submit acaba provocando outros problemas de usabilidade

  8. Thiago disse:
    Novembro 14th, 2007 at 2:50 pm

    Faz isso funcionar no Internet Explorer

Leave a Reply