Formulários HTML
Autor: Mateus Queiroz Correia | Publicado: 2008-07-31T22:09:00-03:00

Para enviar informações ao servidor na arquitetura WEB utilizamos a Requisição HTTP(HTTP Request), nesta podemos enviar informações através de cookies, na URL chamado querystring e internamente na requisição. Uma forma muito comum de enviar estas informações do cliente é utilizar o formulário HTML e seus elementos de formulário.O formulário HTML é representado pelo elemento &lt;form&gt; e dois atributos são importantes de serem conhecidos por nós, o atributo method, que pode receber os valores get e post, e o atributo action que define a URL destino que os dados do formulário serão enviados para fazer a próxima requisição.Veja uma exemplo no código 1:&lt;form method="post" action="formulario.asp" &gt;&lt;/form&gt;Código 1 - Exemplo da utilização do elemento &lt;form&gt;O formulário define o método e o destino para onde os dados do formulário serão enviados, mas somente os valores dos elementos de formulários serão enviados. Então textos livres ou qualquer outro elemento que não seja de formulário, não serão enviados ao servidor. Ainda para que o elemento de formulário tenha seu valor enviado, deve ter definido o seu atributo name e o atribudo disabled não definido, ou seja, o elemento deve estar habilitado.Para ver isto acontecendo, vamos criar outro HTML chamado formulario.htm e adicionar o código 2 como seu conteúdo:  &lt;html&gt;  &lt;head&gt;  &lt;title&gt;Formulario HTML&lt;/title&gt;  &lt;/head&gt;  &lt;body&gt;  &lt;form method="post" action="formulario.htm"&gt;      &lt;fieldset&gt;         &lt;legend&gt;Informacoes do Usuario&lt;/legend&gt;          Usuario: &lt;input  type="text" name="usuario" /&gt;&lt;br /&gt;          Senha: &lt;input  type="password" name="senha" /&gt;&lt;br /&gt;          &lt;input  type="checkbox" id="usuarioAtivo" name="usuarioAtivo" value="1" /&gt;&lt;label  for="usuarioAtivo"&gt;Usuario ativo&lt;/label&gt;      &lt;/fieldset&gt;&lt;br /&gt;      Nome: &lt;input type="text" name="nome"  /&gt;&lt;br/&gt;      Sexo:      &lt;input type="radio" name="sexo"  id="sexoMasculino" value="m" /&gt;&lt;label for="sexoMasculino"&gt;Masculino&lt;/label&gt;      &lt;input type="radio" name="sexo"  id="sexoFeminino" value="f" /&gt;&lt;label for="sexoFeminino"&gt;Feminino&lt;/label&gt;&lt;br /&gt;      Estado Sudeste:      &lt;select name="estado"&gt;          &lt;option&gt;Espirito  Santo&lt;/option&gt;          &lt;option&gt;Minas  Gerais&lt;/option&gt;          &lt;option&gt;Rio de  Janeiro&lt;/option&gt;          &lt;option&gt;São  Paulo&lt;/option&gt;      &lt;/select&gt;&lt;br /&gt;      Cupom desconto: &lt;input type="text"  name="cupomDesconto" readonly="readonly" value="12-34-56" /&gt;&lt;br /&gt;      Observacoes:&lt;br /&gt;      &lt;textarea name="observacoes" cols="60"  rows="2"&gt;&lt;/textarea&gt;&lt;br /&gt;&lt;br /&gt;      Teste de campo desabilitado: &lt;input  type="text" name="campoDesabilitado" disabled="disabled" value="Valor do campo  desabilitado" size="60" /&gt;&lt;br /&gt;      Este é um campo oculto: &lt;input  type="hidden" name="campoOculto" value="Valor do campo oculto" /&gt;&lt;br /&gt;      &lt;input type="submit" name="enviar"  value="Enviar" /&gt;  &lt;/form&gt;  &lt;/body&gt;  &lt;/html&gt;Código 2 - Código do formulário 1No código 2 têm vários elementos de formulário, abaixo segue uma lista de todos os elementos de formulário do HTML 4.01 e está em negrito os elementos utilizado no código 2:&lt;input type="text"/&gt;Define uma caixa de texto para digitação do usuário&lt;input type="password"/&gt;Define uma caixa de texto para digitação do usuário, o texto digitado não aparecerá no navegador&lt;input type="radio"/&gt;Define uma opção para seleção&lt;select&gt;Monta uma lista de valores, para seleção de uma ou várias opções.&lt;input type="checkbox"/&gt;Controle que permite selecioná-lo, normalmente utilizado para confirmar uma opção&lt;textarea&gt;Permite a digitação de um texto que pode ter várias linhas.&lt;input type="file"&gt;Permite o envio de um arquivo selecionado pelo usuário ao servidor.&lt;input type="hidden"&gt;Permite o envio de um valor, que não é visível pelo usuário.&lt;input type="submit"&gt;Botão que, quando clicado, faz o envio dos dados do formulário.&lt;input type="reset"&gt;Botão que limpa os valores dos elementos de formulário para seus valores iniciais.&lt;input type="image"&gt;Botão que é uma imagem, quando clicado, envia os dados do formulário.&lt;input type="button"&gt;Botão que não envia os dados do formulário. Interessante para o uso com javascript.Além dos elementos de formulário acima, o código têm também os elementos &lt;fieldset&gt; e o &lt;legend&gt;, estes elementos definem uma área e um texto da área respectivamente, o que é gerado ao ser interpretado pelo navegador está disponível na Imagem 1. O elemento &lt;label&bt; que define um texto, que quando clicado ativa o elemento de mesmo id do texto definido no atributo for. Assim ao se clicar no label de texto "Usuário ativo", o checkbox é marcado.Vamos ver o que o HTML acima gera ao ser visualizado em um navegador:Imagem 1 - Visualizando o formulárioPreencha os valores como na Imagem 2:Imagem 2 - Preenchendo os valoresClicando em enviar e analisando a requisição HTTP criada para este evento, por exemplo utilizando o firebug, teremos o resultado conforme Imagem 3 e Imagem 4:Imagem 3 - Analisando a requisicao HTTP no FirebugImagem 4 - Parametros de post da requisicao HTTPAlguns pontos importante de serem observados são:Textos livres dentro de formulário não são enviados, somente elementos de formulário;Elementos de formulário em modo somente leitura, atributo readonly definido, tem seus valores enviados normalmente;Elementos de formulário em desabilitados, atributo disabled definido, não tem seus valores enviados;Campos ocultos tem seus valores enviados;Repare que para ter seus valores enviados os elementos devem ter seu atributo name definido. O atributo id pode ser definido, mas não influencia no envio de informações ao servidor, este atributo é utilizado para manipulação em cliente, seja por javascript ou por exemplo pelo elemento &lt;label&gt;Referências:http://developer.mozilla.org/en/docs/DOM:formhttp://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-40002357http://developer.mozilla.org/en/docs/XUL:labelhttp://msdn.microsoft.com/en-us/library/ms535845(VS.85).aspx