Cliente Web

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 <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:

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.

Além dos elementos de formulário acima, o código têm também os elementos <fieldset> e o <legend>, 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 <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ário

Preencha os valores como na Imagem 2:

Imagem 2 - Preenchendo os valores

Clicando 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 HTTP

Alguns 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

Cliente Web

sexta-feira, 4 de julho de 2014

Exemplo de Design Responsivo com Divs

terça-feira, 2 de setembro de 2008

Navegador do Google

quinta-feira, 31 de julho de 2008

Formulários HTML

Quem sou eu

Arquivo do blog