Exercicio 4 - Form e JSx

Exercício HTML e JavaScript
a) Observe atentamente a imagem abaixo, ela representa um formulário HTML. Construa-o e salve com o nome
FormContato.html
Obs.:
- Note que os campos nome e e-mail são obrigatórios.
- O campo e-mail, além de ser obrigatório, deve controlar as características deste tipo de conteúdo.
As condições acima são controladas pelo botão submit (Enviar), ou seja, HTML puro.
b) Observe atentamente a imagem abaixo, ela representa a página aberta ao clicar no botão submit (Enviar) do
formulário (propriedade action do form) se as duas condições do item “a” forem satisfeitas.
O link “voltar” deve retornar ao formulário FormContato.html
Construa esta página.
c) A tag <form> deve conter também a propriedade/evento: onsubmit="return validar(contato);"
Veja como ficará (todo o texto abaixo na mesma linha):
<form id="formulario" name="contato" method="post" onsubmit="return validar(contato);"
action="PaginaObrigado.html">
Explicação da linha acima:
Informamos o nome da função (código JavaScript) que será executada que é “validar”, indicando que queremos
receber o retorno dela (return). Caso o retorno da função validar seja true (verdadeiro) os dados serão passados
para a página de processamento (indicada em action=”pagina_de_processamento_em_asp_ou_php”). Caso o
retorno da função validar seja false (falso) os dados não serão enviados e mensagens contidas no código da
função “validar” serão mostradas.
O código da função JavaScript “validar” será feito de modo a retornar false se o texto do campo “Mensagem” do
formulário for preenchido incorretamente (com menos de 10 caracteres) ou retornar true caso contrário.
O parâmetro “contato” indica que a função JavaScript “validar” receberá todos os atributos do formulário
(contato é o valor da propriedade name do formulário). Pode- se utilizar “this” no lugar do nome do formulário.
Obs. 1:
O atributo “action” indica qual página deve ser aberta ao clicar o botão <Enviar> do formulário (para qual página
enviar os dados do formulário). É nesta página que normalmente estarão os comandos (em alguma linguagem de
programação) para processamento dos dados (como gravá-los em um banco de dados). Neste exercício, a página
a ser aberta não processará informações (apenas exibirá uma mensagem de agradecimento).
Obs. 2:
O atributo “method” define o método de envio dos dados do formulário (“post” ou “get”). O método “get” envia
os dados do formulário através da barra de endereços do navegador. O método “post” envia os dados
escondidos, sendo considerada mais segura.
Exemplo: o Google trabalha com o método get. Note que ao digitar uma frase para pesquisa e clicar no botão
correspondente, sua frase aparece na barra de endereços.
Abaixo apresentamos o código da função javascript “validar”.
Ele deve ser incluído no código HTML, após o fechamento da TAG FORM.
<script type="text/javascript">
function validar(contato){
if(contato.mensagem.value.length < 10){
alert("A MENSAGEM está muito curta.");
return false;
}
return true;
}
</script>
d) Suponha que, em outra página, é preciso criar um link para o formulário do item “a”. Escreva o código HTML
correspondente.
Resp.: