Form

O objeto Form representa um formulário em HTML, mais especificamente um elemento HTML definido pela tag <form>. Os formulários são usados para coletar dados digitados pelo usuário e enviá-los para o servidor. Através de JavaScript, além de ser possível manipular as informações digitadas dentro do formulário, é possível controlar as ações executadas pelo formulário. Por exemplo, é possível determinar o momento quando os dados do formulário serão enviados ao servidor ou mesmo apagar todos os dados dos campos contidos no formulário.

O exemplo a seguir representa uma situação muito comum em sistemas Web. Nesse exemplo, é definido um formulário contendo dois campos de entrada de texto, um para digitação do login e outro para digitação da senha. Normalmente, para submeter os dados dos campos contidos em um formulário para o servidor Web é usado um elemento chamado “Submit”, que nada mais é do que um tipo de input HTML (<input type=”submit” value=”Enviar dados”/>).

Esse elemento, ao ser clicado, tem como comportamento padrão submeter o formulário ao servidor (consequentemente os seus dados). Mas, como pode ser visto no trecho de código abaixo, ao invés de usarmos um “Submit”, usamos uma imagem.

Apesar de parecer estranho, esse tipo de substituição é muito comum, visto que o componente “Submit” nada mais é do que um botão padrão e não possui uma estética de visual muito refinada. Sites modernos normalmente usam figuras feitas sob medida para representar os seus botões nos estados de clicado e não clicado.

O problema dessa abordagem é que uma imagem não possui a mesma funcionalidade de um botão “Submit”, que é a de enviar os dados do formulário ao servidor. Então, como acrescentar essa funcionalidade a uma imagem? A resposta você já deve saber: através de JavaScript.

A ideia básica dessa solução é: atribui-se uma ação (função JavaScript) ao evento onclick na imagem e essa função, entre outras coisas, faz a submissão do formulário ao servidor. Veja o código do exemplo para entender essa solução.

Como pode ser visto, a função logar(), que é chamada ao se clicar na imagem, primeiramente valida se o usuário digitou o login e a senha (avaliando se o valor contido nos campos do formulário é vazio) e em caso positivo submete o formulário (chamada ao método submit() no objeto formulário). Repare que a imagem que utilizamos tem o src=”http://via.placeholder.com/100x40/6666ff/000000/&text=Entrar”. Nessa imagem estamos utilizando um serviço bastante interessante do site placeholder.com, que permite que você crie e utilize imagens de testes dinamicamente. Nesse caso estamos solicitando uma imagem com o tamanho 100x40 pixels, com a cor de fundo #6666ff (que é um tom de azul) com a cor do texto #000000 (cor preta) e com o texto “Entrar” escrito no meio da imagem. Colocando essa URL no src da tag IMG faz com que o site placeholder.com gere essa imagem para nós e a retorne para a nossa tag. É bem útil para criar imagens temporárias de teste sem precisar utilizar nenhum programa de edição gráfica nem salvar as imagens em disco, entretanto é recomendado que você crie suas próprias imagens do seu site ou sistema para o coloca em produção. Legal né?

Chegamos ao fim da nossa segunda aula sobre JavaScript. Na próxima aula, você estudará os avanços recentes na programação do lado do cliente. Esses avanços tiveram como objetivo melhorar a interatividade de páginas Web. Atualmente, os bons sites não abrem mão desse novo modelo de programação.

Na próxima aula, iremos continuar vendo como manipular os objetos criados pelo browser, com exemplos mais completos e que combinam muitos conhecimentos já adquiridos até aqui.