Desenvolvimento - ASP
Curso Básico de ASP 3.0 – Módulo 02 – Lição 02
Nesta lição é apresentada a primeira parte sobre os comandos para criação de formulários em HTML. Toda conexão, pesquisa, inserção e interação de páginas ASP, com bancos de dados, é feita através de formulários, os quais são processados, no servidor, por páginas ASP.
por Júlio Cesar Fabris BattistiTags para a criação de Formulários HTML – Parte 1
A criação de formulários, permite que o usuário preencha alguns campos e envie os dados para o servidor Web. Por exemplo, quando você está comprando pela Internet, em um determinado momento, você precisa fornecer informações, como o endereço de entrega, telefone de contato, etc. Você preenche estas informações em um formulário. Nos formulários, normalmente, existe um botão “Enviar”, no qual você deve clicar, após ter preenchido os dados necessários. São muitas as aplicações onde utilizamos formulários.
Criando o Formulário – a tag <FORM> </FORM>
Um formulário é criado, utilizando as tags <FORM> </FORM>. Na Listagem 2.4, temos um exemplo de criação utilização da tag <FORM>.
Listagem 2.4 – Tag para a criação de formulários.
1 <HTML>
2 <HEAD>
3 <META NAME="GENERATOR" Content="Microsoft Front Page 4.0">
4 <TITLE> Um exemplo simples de formulário.</TITLE>
5 </HEAD>
6 <BODY>
7 <P> Cadastro de Clientes :<BR>
8 Preencha os campos e clique no botão Enviar Dados.</P>
9 <P>
10 <FORM action="" id=FORM1 method=post name=FORM1><BR>
{ Aqui teríamos tags HTML de definição do formulário }
11 </FORM>
12 </BODY>
13 </HTML>
O atributo mais importante da tag FORM, é o atributo Action. No atributo action, devemos informar o endereço de uma página ASP, um script CGI, ou qualquer outro elemento capaz de processar os dados digitados em um formulário. O usuário preenche os campos do formulário, ao clicar no botão Enviar, é chamada a página ou programa indicada no atributo Action, o qual é responsável por processar as informações do formulário.
Na Listagem 2.5, temos um exemplo em que uma página ASP é responsável em processar os dados enviados pelo formulário:
Listagem 2.5 – O atributo action contém o endereço de uma página ASP.
1 <HTML>
2 <HEAD>
3 <META NAME="GENERATOR" Content="Microsoft Front Page 4.0">
4 <TITLE> Um exemplo simples de formulário.</TITLE>
5 </HEAD>
6 <BODY>
7 <P> Cadastro de Clientes :<BR>
8 Preencha os campos e clique no botão Enviar Dados.</P>
9 <P>
10 <FORM action="http://www.meusite.com/processa.asp" id=FORM1 method=post name=FORM1><BR>
{ Aqui teríamos tags HTML de definição do formulário }
11 </FORM>
12 </BODY>
13 </HTML>
A Figura 2.3, ilustra este processo:
Figura 2.3 A Página ASP, armazena os dados digitados no formulário, em um Banco de Dados.
Neste caso, a página ASP recebe os dados do formulário preenchido pelo Cliente, processa os dados, e armazena em um Banco de dados. O Servidor de Banco de dados, pode ser o mesmo servidor Web, ou um Equipamento separado. Após armazenar os dados no Banco de dados, a página ASP, envia código HTML puro, de volta para o cliente. Normalmente a página HTML que retorna para o cliente, apresenta uma mensagem dizendo que os dados foram enviados com sucesso, ou, no caso de erros, apresenta uma mensagem de erro, com a possível causa do problema.
A partir do Módulo 4, aprenderemos a criar páginas ASP para tratar com formulários e armazenar os dados enviados em Bancos de dados, bem como para fazer pesquisas em Banco de dados.
Criando uma Caixa de texto – a tag <INPUT TYPE=”TEXT”>
A tag <INPUT TYPE=”TEXT”>, cria uma caixa de texto, na qual podem ser exibidos valores e também digitados valores, quer seja numéricos ou texto. Esta tag, possui os seguintes atributos:
Tabela 2.1 Atributos da tag <INPUT TYPE=”TEXT”>
Na Listagem 2.6, temos um exemplo de criação de um formulário com duas campos para entrada de texto. Um para o nome, outro para o endereço.
Listagem 2.6 – Um formulário com dois campos de texto.
1 <HTML>
2 <HEAD>
3 <META NAME="GENERATOR" Content="Microsoft Front Page 4.0">
4 <TITLE> </TITLE>
5 </HEAD>
6 <BODY>
7 <P> Digite os dados solicitados, depois clique no botão Enviar:</P>
8 <FORM action="" id=FORM1 method=post name=FORM1>
9 <P>Nome: <INPUT type=”text” id=nome name=nome maxlength=20 ></P>
10 <P>Endereço: <INPUT type=”text” id=endereco name=endereco maxlength=20 ></P>
11 </FORM>
12 </BODY>
13 </HTML>
Nas linhas 9 e 10, temos o código HTML, que cria os dois campos do formulário. A Figura 2.4, mostra este formulário, sendo visualizado no Internet Explorer, onde o usuário digitou dados nos campos do formulário.
Figura 2.4 Visualizando um Formulário simples no Internet Explorer.
Criando uma Caixa de texto para a digitação de senhas – a tag <INPUT TYPE=”PASSWORD”>
A tag <INPUT TYPE=”PASSWORD”>, cria uma caixa de texto, apropriada para a digitação de senhas, pois enquanto o usuário digita a senha, são exibidos, somente asteriscos (*). Isso impede que alguém, que descubra a senha do usuário, simplesmente observando quando o mesmo está preenchendo o formulário. Esta tag, possui os seguintes atributos:
Tabela 2.2 Atributos da tag <INPUT TYPE=”PASSWORD”>
Na Listagem 2.7, temos um exemplo de criação de um formulário com um campo para a digitação de senhas:
Listagem 2.7 – Um formulário com um campo para a digitação de uma senha.
1 <HTML>
2 <HEAD>
3 <META NAME="GENERATOR" Content="Microsoft Front Page 4.0">
4 <TITLE> </TITLE>
5 </HEAD>
6 <BODY>
7 <P> Digite os dados solicitados, depois clique no botão Enviar:</P>
8 <FORM action="" id=FORM1 method=post name=FORM1>
9 <P>Nome: <INPUT type=”text” id=nome name=nome maxlength=20 ></P>
10 <P>Endereço: <INPUT type=”text” id=endereco name=endereco maxlength=20 ></P>
11 <P>Senha: <INPUT type=”password” id=senha name=senha maxLength=10></P>
12 </FORM>
13 </BODY>
14 </HTML>
Na linha 11, temos o código HTML, que cria o campo para a digitação de senha. A Figura 2.5, mostra este formulário, sendo visualizado no Internet Explorer, onde o usuário digitou dados nos campos do formulário.
Figura 2.5 O Campo para senha, somente exibe asteriscos (*).
Criando um “Check Box” - a tag <INPUT TYPE=”CHECKBOX”>
A tag <INPUT TYPE=”CHECKBOX”>, cria um pequeno quadradinho, conhecido como Check Box. Um Check Box, pode estar em dois estados: Marcado ou desmarcado. Normalmente é utilizado para a entrada de dados. Por exemplo, você pode estar utilizando um formulário para pesquisa, na qual podem existir questões que permitam a escolha de mais do que uma alternativa. Neste caso a utilização de várias tags do tipo Check Box, é o mais indicado. Esta tag, possui os seguintes atributos:
Tabela 2.3 Atributos da tag <INPUT TYPE=”CHECKBOX”>
Na Listagem 2.8, temos um exemplo de criação de um formulário com a utilização de vários Check Box.
Listagem 2.8 – Um formulário com vários Check Box.
1 <HTML>
2 <HEAD>
3 <META NAME="GENERATOR" Content="Microsoft Front Page 4.0">
4 <TITLE> </TITLE>
5 </HEAD>
6 <BODY>
7 <P> Digite os dados solicitados, depois clique no botão Enviar:</P>
8 <FORM action="" id=FORM1 method=post name=FORM1>
9 <P>Nome: <INPUT type=”text” id=nome name=nome maxlength=20 ></P>
10 <P>Endereço: <INPUT type=”text” id=endereco name=endereco maxlength=20 ></P>
11 <P>Senha: <INPUT type=”password” id=senha name=senha maxLength=10></P>
12 <P> Certificações:
13 <INPUT id=MCP name=MCP type="checkbox" value="MCP"> MCP
14 <INPUT id=MCSE name=MCSE type="checkbox" value="MCSE">MCSE
15 <INPUT id=MCDBA name=MCDBA type="checkbox" value="MCDBA">MCDBA
16 <INPUT id=MCSD name=MCSD type="checkbox" value="MCSD">MCSD</P>
17 </FORM>
18 </BODY>
19 </HTML>
Nas linhas de 13 à 16, temos o código HTML, que cria os diversos Check Box. Quando o usuário seleciona um determinado Check Box, o valor do atributo value é associado com o Check Box, o qual, por sua vez, pode ser armazenado em um campo de uma tabela do Banco de Dados, pela página ASP, a qual é responsável pelo processamento dos dados do formulário.. A Figura 2.6, mostra este formulário, sendo visualizado no Internet Explorer, onde o usuário digitou dados nos campos do formulário e marcou alguns dos Check Box disponíveis. Observe que mais do que um Check Box pode ser marcado.
Figura 2.6 O usuário selecionou vários Check Box.
Criando um conjunto de
“Radio Buttons” - a tag
<INPUT TYPE=”RADIO”>
A tag <INPUT TYPE=”RADIO”>, cria um “Radio Button”. Um “Radio Button”, pode estar em dois estados: Marcado ou desmarcado. Utilizamos estes elementos em grupos. Uma característica de um grupo de Radio Buttons, é que somente um dos Radio Button do grupo pode estar selecionado. Se você clicar em um Radio Button que não está selecionado, este será selecionado, e o que estava selecionado será desmarcado. Para criar um grupo de Radio Buttons, é bastante simples, basta atribuir o mesmo valor para o atributo Name, para todos os Radio Buttons, que farão parte de grupo. Desta maneira, de todos os Radio Buttons que tiverem o mesmo nome, somente um poderá estar selecionado em um determinado momento. Esta tag, possui os seguintes atributos:
Tabela 2.4 Atributos da tag <INPUT TYPE=”RADIO”>
Atributo Descrição
TYPE Indica o tipo do campo, neste caso, utilizamos RADIO
CHECKED Indica se o Check Box está, inicialmente marcado ou não.
NAME É o nome associado a todos os Radio Buttons que fazem parte do mesmo grupo, o qual será utilizado pela página ASP, para fazer referência ao campo.
ID Utilizado por linguagens de Script, como o VBScript.
VALUE É o valor de retorno do campo, caso o Check Box seja marcado.
Na Listagem 2.9, temos um exemplo de criação de um formulário com a utilização de um grupo de Radio Buttons, para a seleção do tipo de Cartão de Crédito.
Listagem 2.9 – Um formulário com um grupo de Radio Buttons.
1 <HTML>
2 <HEAD>
3 <META NAME="GENERATOR" Content="Microsoft Front Page 4.0">
4 <TITLE> </TITLE>
5 </HEAD>
6 <BODY>
7 <P> Digite os dados solicitados, depois clique no botão Enviar:</P>
8 <FORM action="" id=FORM1 method=post name=FORM1>
9 <P>Nome: <INPUT type=”text” id=nome name=nome maxlength=20 ></P>
10 <P>Endereço: <INPUT type=”text” id=endereco name=endereco maxlength=20 ></P>
11 <P>Senha: <INPUT type=”password” id=senha name=senha maxLength=10></P>
12 <P>Certificações:
13 <INPUT id=MCP name=MCP type="checkbox" value="MCP"> MCP
14 <INPUT id=MCSE name=MCSE type="checkbox" value="MCSE">MCSE
15 <INPUT id=MCDBA name=MCDBA type="checkbox" value="MCDBA">MCDBA
16 <INPUT id=MCSD name=MCSD type="checkbox" value="MCSD">MCSD</P>
17 <P> Selencione o Cartão de Crédito:</P>
18 <P>
19 <INPUT id=cartao name=cartao type=”radio” value=Valor>Visa
20 <INPUT id=cartao name=cartao type=”radio” value="Master Card">Master Card
21 <INPUT id=cartao name=cartao type=”radio” value=Outros> Outros
22 </P>
23 </FORM>
24 </BODY>
25 </HTML>
Nas linhas de 19 à 21, temos o código HTML, que cria os diversos Radio Buttons. Quando o usuário seleciona um dos Radio Buttons, o valor do atributo value é associado com o Grupo de Radio Buttons, o qual, por sua vez, pode ser armazenado em um campo de uma tabela do Banco de Dados, pela página ASP, a qual é responsável pelo processamento dos dados do formulário.. A Figura 2.7, mostra este formulário, sendo visualizado no Internet Explorer, onde o usuário digitou dados nos campos do formulário e marcou uma das opções disponíveis, para o Cartão de Crédito. Nunca é demais lembrar, que o usuário somente conseguirá marcar uma das opções.
Figura 2.7 O usuário somente conseguie selecionar uma das opções para o Cartão de Crédito.
Conclusão
Nesta lição apresentei a primeira parte sobre os comandos para criação de formulários em HTML. Toda conexão, pesquisa, inserção e interação de páginas ASP, com bancos de dados, é feita através de formulários, os quais são processados, no servidor, por páginas ASP.
