O formulário HTML é representado pelo elemento <form> 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:
<form method="post" action="formulario.asp" >
</form>
Código 1 - Exemplo da utilização do elemento <form>
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:
<html>
<head>
<title>Formulario HTML</title>
</head>
<body>
<form method="post" action="formulario.htm">
<fieldset>
<legend>Informacoes do Usuario</legend>
Usuario: <input
type="text" name="usuario" /><br />
Senha: <input
type="password" name="senha" /><br />
<input
type="checkbox" id="usuarioAtivo" name="usuarioAtivo" value="1" /><label
for="usuarioAtivo">Usuario ativo</label>
</fieldset><br />
Nome: <input type="text" name="nome"
/><br/>
Sexo:
<input type="radio" name="sexo"
id="sexoMasculino" value="m" /><label for="sexoMasculino">Masculino</label>
<input type="radio" name="sexo"
id="sexoFeminino" value="f" /><label for="sexoFeminino">Feminino</label><br />
Estado Sudeste:
<select name="estado">
<option>Espirito
Santo</option>
<option>Minas
Gerais</option>
<option>Rio de
Janeiro</option>
<option>São
Paulo</option>
</select><br />
Cupom desconto: <input type="text"
name="cupomDesconto" readonly="readonly" value="12-34-56" /><br />
Observacoes:<br />
<textarea name="observacoes" cols="60"
rows="2"></textarea><br /><br />
Teste de campo desabilitado: <input
type="text" name="campoDesabilitado" disabled="disabled" value="Valor do campo
desabilitado" size="60" /><br />
Este é um campo oculto: <input
type="hidden" name="campoOculto" value="Valor do campo oculto" /><br />
<input type="submit" name="enviar"
value="Enviar" />
</form>
</body>
</html>
Código 2 - Código do formulário 1
No 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:
- <input type="text"/>
Define uma caixa de texto para digitação do usuário - <input type="password"/>
Define uma caixa de texto para digitação do usuário, o texto digitado não aparecerá no navegador - <input type="radio"/>
Define uma opção para seleção - <select>
Monta uma lista de valores, para seleção de uma ou várias opções. - <input type="checkbox"/>
Controle que permite selecioná-lo, normalmente utilizado para confirmar uma opção - <textarea>
Permite a digitação de um texto que pode ter várias linhas. - <input type="file">
Permite o envio de um arquivo selecionado pelo usuário ao servidor. - <input type="hidden">
Permite o envio de um valor, que não é visível pelo usuário. - <input type="submit">
Botão que, quando clicado, faz o envio dos dados do formulário. - <input type="reset">
Botão que limpa os valores dos elementos de formulário para seus valores iniciais. - <input type="image">
Botão que é uma imagem, quando clicado, envia os dados do formulário. - <input type="button">
Botão que não envia os dados do formulário. Interessante para o uso com javascript.
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 Firebug
Imagem 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 <label>
Referências:
http://developer.mozilla.org/en/docs/DOM:form
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-40002357
http://developer.mozilla.org/en/docs/XUL:label
http://msdn.microsoft.com/en-us/library/ms535845(VS.85).aspx
Imagem 1 - Criando um novo Web Site no VWD
Imagem 2 - Configurando o novo site web
