Julio Battisti - Artigos e tutoriais gratuitos; Venda de livros, e-books, video-aulas e cursos online.

SITES DINÂMICOS COM ASP 3.0 - CURSO COMPLETO
Autor: Júlio Battisti

Lição 015 - Capítulo 02 - Uma revisão rápida de HTML

Conforme descrevemos na introdução desse livro, as páginas da Internet, são criadas utilizando-se da linguagem HTML – Hypertext Markup Language. Uma tradução seria: Linguagem de Marcação de Texto. As páginas ficam gravados no servidor Web, e quando o cliente digita um endereço solicitando a página, a mesma é transportada até o navegador do cliente. O navegador interpreta o código HTML e exibe a página, já formatada. Neste tópico, faremos uma revisão rápida, sobre os principais elementos de uma página HTML, bem como sobre os principais elementos para a construção de formulários em páginas HTML, pois estaremos utilizando elementos de formulários, como campos para a digitação de texto, durante os exemplos deste livro.

Estrutura básica de uma página HTML.

Todo documento HTML, apresenta a mesma estrutura básica. Documentos HTML são criados utilizando o que chamamos de “tag” ou marcador. Por exemplo, existe uma tag para fazer com que o Navegador exiba um determinado texto em negrito, outra tag para exibir texto em itálico, um conjunto de tags para criar as linhas e colunas de uma tabela, e assim por diante. Na Listagem 2.1, vemos um exemplo da estrutura básica de um documento HTML:

Listagem 2.1 – O exemplo do Hallo Word.

1          <HTML>
2          <HEAD>
3          <META NAME="GENERATOR" Content="Microsoft Front Page 4.0">
4          <TITLE>Criando Sites dinâmicos com ASP 3.0 !!!</TITLE>
5          </HEAD>
6          <BODY>
7          <P>Uma Página HTML muito simples !!!!</P>
8          </BODY>
9          </HTML>

IMPORTANTE! Cabe novamente ressaltar, que os números de linha, não fazem parte do código HTML. Apenas foram colocados na listagem, para facilitar a explicação da mesma. Esta recomendação é válida para todas as listagens apresentadas neste livro. Com isso, se você for digitar esta listagem, não digite o número das linhas. Este fato pode ser comprovado pela Figura 2.1:

As maioria das tags HTML são formadas por pares. Conforme podemos ver na Listagem 2.1, todo documento HTML, começa com a tag <HTML> e termina com uma tag </HTML>, linhas 1 e 9, respectivamente.

Logo após a tag <HTML>, temos a tag <HEAD>. Dentro das tags <HEAD> e </HEAD>, podemos colocar diversas informações, muitas vezes chamadas de Metainfomração. A informação contida nesta seção do documento, é informação a respeito do próprio documento, como por exemplo: qual o programa utilizado para gerar o documento, nome do autor, data de criação, etc. As informações contidas nesta seção do documento, são utilizadas, muitas vezes, pelos mecanismos de pesquisa da Internet, como o Altavista (www.altavista.digital.com) e o Yahoo (www.yahoo.com). Uma tag especial, que podemos utilizar é a tag <TITLE> </TITLE>. O texto colocado dentro desta tag, será exibido na Barra de títulos do Navegador. Este fato pode ser comprovado pela Figura 2.1:

Curso Completo de ASP 3.0 - Júlio Battisti
Figura 2.1 Um exemplo de utilização da tag <TITLE> </TITLE>.

Observe o título que aparece na Barra de títulos da Figura 2.1. Logo após o título, no caso do Internet Explorer, aparece a expressão: Microsoft Internet Explorer.

Após o par de tags <HEAD> </HEAD>, nos temos a tag <BODY>. A partir da tag <BODY>, na linha 6, é que começa a parte do documento que será exibida pelo Navegador. Tudo o que estiver entre o par de chaves <BODY> </BODY>, é conteúdo que deve ser exibido pelo Navegador. Neste nosso exemplo, muito simples, temos apenas uma parágrafo de texto sendo exibido. A tag que define uma parágrafo de texto é <P> </P>, conforme indicado na linha 7.

Esta é a estrutura básica de todo documento HTML.

Cada tag do HTML, pode conter um ou mais atributos. Um atributo, modifica a maneira como o Navegador exibe o conteúdo da página. Por exemplo, na Listagem 2.2, estamos utilizando o atributo color da tag <FONT>, para modificar as características da fonte do texto a ser exibido.

Listagem 2.2 – Utilizando atributos da tag <FONT> </FONT>.

1          <HTML>
2          <HEAD>
3          <META NAME="GENERATOR" Content="Microsoft Front Page 4.0">
4          <TITLE>Criando Sites dinâmicos com ASP 3.0 !!!</TITLE>
5          </HEAD>
6          <BODY>
7          <P><FONT color=navy><B>Uma Página HTML muito simples !!!!</B></FONT> </P>
8          </BODY>
9          </HTML>

Neste caso, na linha 7, o atributo color é definido para o valor navy, o qual equivale a uma fonte de cor Azul marinho. Observe que a tag <FONT> </FONT>, é utilizada, dentro da tag de parágrafo, para modificar as características da fonte deste parágrafo. Também utilizamos a tag <B> </B>, para fazer com que o texto fosse exibido em negrito. Ao visualizar este documento, no navegador, o texto “Uma Página HTML muito simples !!!”, será exibido em negrito e com cor de fonte Azul Marinho.

Um estudo mais detalhado sobre as tags da linguagem HTML, foge ao escopo deste livro. Novamente indico o livro “Série Curso Básico & Rápido HTML 4.0”, da editora Axcel Books, para maiores informações sobre a linguagem HTML. Apenas como um exemplo de uma página mais completa, considere a Listagem 2.3, onde utilizamos as tags para criação de tabelas. <TABLE> E </TABLE>, para criar a tabela. <TR> e </TR> para criar novas linhas, e <TD> e </TD>, para criar as células dentro de uma linha da tabela.

Listagem 2.3 – Uma página HTML com diversas tags.

1          <HTML>
2          <HEAD>
3          <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
4          <TITLE>Criando Sites dinâmicos com ASP 3.0 !!!</TITLE>
5          </HEAD>
6          <BODY>
7          <P><FONT color=navy><B>Produção de SOJA da Região Sul !!!</B></FONT></P>
8          <TABLE border=1 cellPadding=1 cellSpacing=1 width="75%">
9          <TR>
10            <TD align=middle>Ano de Produção</TD>
11            <TD align=middle>Produção em Toneladas</TD>
12        </TR>
13        <TR>
14           <TD align=middle>1996</TD>
15           <TD align=middle>23450</TD>
16        </TR>
17        <TR>
18            <TD align=middle>1997</TD>
19            <TD align=middle>32456</TD>
20        </TR>
21        <TR>
22            <TD align=middle>1998</TD>
23            <TD align=middle>33000</TD>
24        </TR>
25        <TR>
26            <TD align=middle>1999</TD>
27            <TD align=middle>32560</TD>
28        </TR>
29        </TABLE>
30        <P>Dados atualizados em -> 30/06/2000.</P>
31        </BODY>
32        </HTML>

Na Figura 2.2, temos o documento da Listagem 2.3, sendo exibido no Navegador.

Curso Completo de ASP 3.0 - Júlio Battisti
Figura 2.2 Um exemplo de utilização da tag <TABLE> </TABLE>.

No próximo item estudaremos algumas tags ligadas a criação de formulários com HTML. Estudaremos estas tags em maiores detalhes, pois estaremos utilizando-as em diversos exemplos deste livro.

Tags para a criação de Formulários HTML.

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:

Curso Completo de ASP 3.0 - Júlio Battisti
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 Capítulo 4, estaremos aprendendo 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”>

Atributo	Descrição
TYPE	Indica o tipo do campo, no caso de campos para digitar ou exibir informação, utilizamos TEXT.
SIZE	Determina o tamanho do campo que será exibido no Navegador.
MAXSIZE	Tamanho máximo de caracteres do campo. MAXSIZE pode ser maior do que SIZE. Neste caso o Navegador rola o conteúdo do campo, quando o mesmo atingir o número de caracteres definido por SIZE.
NAME	É o nome associado ao campo, o qual será utilizado pela página ASP, para fazer referência ao campo.
VALUE	É o valor padrão do campo. Por exemplo, para um campo Cidade, podemos definir o atributo VALUE como São Paulo. Neste caso, ao carregar o formulário, no Navegador, o campo Cidade, já vem com o valor São Paulo. Caso seja necessário, o usuário pode modificar este valor.
ID	Utilizado por linguagens de Script, como o VBScript.

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.

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.

Curso Completo de ASP 3.0 - Júlio Battisti
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”>

Atributo	Descrição
TYPE	Indica o tipo do campo, no caso de campos para digitar senhas, utilizamos PASSWORD.
SIZE	Determina o tamanho do campo que será exibido no Navegador.
MAXSIZE	Tamanho máximo de caracteres do campo. MAXSIZE pode ser maior do que SIZE. Neste caso o Navegador rola o conteúdo do campo, quando o mesmo atingir o número de caracteres definido por SIZE.
NAME	É o nome associado ao campo, o qual será utilizado pela página ASP, para fazer referência ao campo.
VALUE	É o valor padrão do campo. Normalmente é deixado em branco.
ID	Utilizado por linguagens de Script, como o VBScript.

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.

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.

Curso Completo de ASP 3.0 - Júlio Battisti
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”>

Atributo	Descrição
TYPE	Indica o tipo do campo, neste caso, utilizamos CHECKBOX.
CHECKED	Indica se o Check Box está, inicialmente marcado ou não.
NAME	É o nome associado ao campo, 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.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.

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.

Curso Completo de ASP 3.0 - Júlio Battisti
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 Radio Button 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 Radio Button 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.

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.

Curso Completo de ASP 3.0 - Júlio Battisti
Figura 2.7 O usuário somente conseguie selecionar uma das opções para o Cartão de Crédito.

Criando um campo para digitação de comentários e textos maiores – a tag <TEXTAREA> </TEXTAREA>.

A tag <TEXTAREA> </TEXTAREA>, cria um campo para a digitação de quantidades maiores de texto, no formulário. Por exemplo, pode ser um campo para digitação de comentários, críticas e sugestões, ou um campo para apresentar uma descrição mais detalhada de um produto, no caso de uma página que apresenta um catálogo de produtos. Esta tag, possui os seguintes atributos:

Tabela 2.5 Atributos da tag <INPUT TYPE=”RADIO”>

Atributo	Descrição
NAME	É o nome associado ao campo, o qual será utilizado pela página ASP, para fazer referência ao campo.
ID	Utilizado por linguagens de Script, como o VBScript.
WRAP	Determina se o texto deve trocar automaticamente de linha, quando for atingido o tamanho limite do campo. O valor padrão para este campo é SOFT.

Na Listagem 2.10, temos um exemplo de criação de um formulário com a utilização de um campo para a digitação de sugestões e comentários.

Listagem 2.10 – Um formulário com um campo para sugestões e comentários.

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        <TEXTAREA id=coment name=coment wrap=SOFT> </TEXTAREA>
24        </FORM>
25        </BODY>
26        </HTML>

Na linha 23, temos o código HTML, que cria o campo para a digitação do texto, para as críticas e sugestões. A Figura 2.8, mostra este formulário, sendo visualizado no Internet Explorer, onde o usuário digitou suas críticas e sugestões.

Curso Completo de ASP 3.0 - Júlio Battisti
Figura 2.8 O usuário digita suas críticas e sugestões.

Criando uma lista de opções (Caixa de combinação) – a tag <SELECT></SELECT> em combinação com <OPTION></OPTION>.

A tag <SELECT></SELECT> cria a lista, e as tags <OPTION></OPTION> definem os elementos da lista. Esta lista é chamada de “Caixa de combinação”, onde é apresentada uma lista de valores, dentre as quais o usuário pode selecionar uma ou mais opções, clicando nas respectivas opções. Cada opção (definida pelas tags <OPTION></OPTION>), possui um valor que é exibido na lista, e um valor associado, caso esta opção seja selecionada. Este valor associado é que será armazenado no Banco de dados, pela página ASP. Principais atributos da tag <SELECT></SELECT>.

Tabela 2.6 Atributos da tag <SELECT></SELECT>.

Atributo	Descrição
NAME	É o nome associado à lista, o qual será utilizado pela página ASP, para fazer referência ao campo.
ID	Utilizado por linguagens de Script, como o VBScript.
MULTIPLE	Pode ser True ou False. Caso seja True, permite que sejam selecionados múltiplo itens.

Na Listagem 2.11, temos um exemplo de criação de um formulário com a criação de uma lista bairro, com três valores possíveis.

Listagem 2.11 – Um formulário com uma Caixa de combinação bairro.

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>Selecione o bairro:
13        <SELECT id=bairro name=bairro>
14                    <OPTION selected value=CENTRO>CENTRO</OPTION>
15                    <OPTION value=CAMOBI>CAMOBI</OPTION>
16                    <OPTION value=DORES>DORES</OPTION>
17        </SELECT>
18        </P>
19        <P>Certificações:
20        <INPUT id=MCP name=MCP type="checkbox" value="MCP"> MCP
21        <INPUT id=MCSE name=MCSE type="checkbox" value="MCSE">MCSE
22        <INPUT id=MCDBA name=MCDBA type="checkbox" value="MCDBA">MCDBA
23        <INPUT id=MCSD name=MCSD type="checkbox" value="MCSD">MCSD</P>
24        <P>Selencione o Cartão de Crédito:</P>
25        <P>
26        <INPUT id=cartao name=cartao type=”radio” value=Valor>Visa
27        <INPUT id=cartao name=cartao type=”radio” value="Master Card">Master Card
28        <INPUT id=cartao name=cartao type=”radio” value=Outros>Outros
29        </P>
30        <TEXTAREA id=coment name=coment wrap=SOFT> </TEXTAREA>
31        </FORM>
32        </BODY>
33        </HTML>

Nas linhas 13 à 17, temos o código HTML, que cria a Caixa de combinação. Na primeira opção - <OPTION selected value=CENTRO>CENTRO</OPTION>, a palavra “selected”, indica que esta opção deve estar selecionada por padrão. A Figura 2.9, mostra este formulário, com a opção DORES, sendo selecionada, na Caixa de combinação Bairros.

Curso Completo de ASP 3.0 - Júlio Battisti
Figura 2.9 Selecionando uma opção, na Caixa de combinação.

Finalizando o formulário com os botões Enviar dados e Limpar dados – As tags <INPUT TYPE=”SUBMIT”> e <INPUT TYPE=”CLEAR”>.

Todo formulário deve ter um botão do tipo Submit. Ao clicar neste botão, é chamada a página ASP (ou outro endereço indicado), indicada no atributo “action” do formulário. A página ASP processa os dados enviados pelo formulário HTML, podendo, por exemplo, adicionar os dados digitados em uma tabela de um Banco de dados. Na Tabela 2.7, temos os atributos para um botão do tipo Submit.

Tabela 2.7 Atributos da tag <INPUT TYPE=”SUBMIT”>.

Atributo	Descrição
TYPE	Deve ser definido como SUBMIT
NAME	Utilizado por linguagens de Script, como o VBScript.
ID	Utilizado por linguagens de Script, como o VBScript.
VALUE	É o texto que será exibido no botão.

Embora não seja de uso obrigatório, é bastante comum termos um botão do tipo Reset. Ao clicar neste botão, todos os campos do formulário são apagados. O Projetista da aplicação Web é que ira definir a necessidade, ou não, da utilização de um botão do tipo Reset. Na Tabela 2.8, temos os atributos para um botão do tipo Reset.

Tabela 2.8 Atributos da tag <INPUT TYPE=”RESET”>.

Atributo	Descrição
TYPE	Deve ser definido como RESET.
NAME	Utilizado por linguagens de Script, como o VBScript.
ID	Utilizado por linguagens de Script, como o VBScript.
VALUE	É o texto que será exibido no botão.

Na Listagem 2.12, completamos o nosso formulário de exemplo, com a adição de um botão do tipo Submit e outro botão do tipo Reset.

Listagem 2.12 – O Formulário completo, com os botões do tipo Submit e Reset, já incluídos.

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>Selecione o bairro:
13        <SELECT id=bairro name=bairro>
14                    <OPTION selected value=CENTRO>CENTRO</OPTION>
15                    <OPTION value=CAMOBI>CAMOBI</OPTION>
16                    <OPTION value=DORES>DORES</OPTION>
17        </SELECT>
18        </P>
19        <P>Certificações:
20        <INPUT id=MCP name=MCP type="checkbox" value="MCP"> MCP
21        <INPUT id=MCSE name=MCSE type="checkbox" value="MCSE">MCSE
22        <INPUT id=MCDBA name=MCDBA type="checkbox" value="MCDBA">MCDBA
23        <INPUT id=MCSD name=MCSD type="checkbox" value="MCSD">MCSD</P>
24        <P>Selencione o Cartão de Crédito:</P>
25        <P>
26        <INPUT id=cartao name=cartao type=”radio” value=Valor>Visa
27        <INPUT id=cartao name=cartao type=”radio” value="Master Card">Master Card
28        <INPUT id=cartao name=cartao type=”radio” value=Outros>Outros
29        </P>
30        <TEXTAREA id=coment name=coment wrap=SOFT> </TEXTAREA><P>
32        <INPUT id=”Enviar” name=”Enviar” type=”submit” value="Enviar dados">
33        <INPUT id=”Limpar” name=”Limpar” type=”reset” value="Limpar dados">
34        </P>
35        </FORM>
36        </BODY>
37        </HTML>

Nas linhas 32 e 33, temos o código HTML, que cria os botões “Enviar dados” e “Limpar dados”, respectivamente. A Figura 2.10, mostra o nosso formulário de exemplo, já completo.

Curso Completo de ASP 3.0 - Júlio Battisti
Figura 2.10 O Formulário de Exemplo, já completo.

Com isso concluímos a nossa revisão, sobre HTML. Esta revisão fez-se necessária, pois ao longo de todo livro, estaremos utilizando formulários HTML, em conjunto com páginas ASP. No restante deste capítulo, e no próximo capítulo, estarei apresentando os fundamentos do VBScript.

« Lição anterior

Δ Página principal

¤ Capítulos

Próxima lição »

GRANDES DESTAQUES DO SITE:

MEGA FORMAÇÃO EM Infraestrutura de TI - Formação Completa e Profissional em Infra de TI: Domine Hardware e Manutenção - Redes de Computadores - Windows Server - Servidores Linux - Banco de Dados e Segurança da Informação e Torne-se o Profissional que o Mercado está Desesperado para Contratar

MAIS DETALHES | COMPRAR

Curso Online de SAP MM HANA - Formação Completa + Acesso ao SAP Hana para Praticar + Acesso a IA que Responde Todas as tuas Dúvidas sobre SAP + 2 horas de Consultoria com o Autor do Curso

MAIS DETALHES | COMPRAR

Formação Completa Purple Team - Equipe Roxa - Formação Blue Team Defesa com Wazuh + Formação Red Team Ataque - Hacker Ético Profissional - Online e Vitalício

MAIS DETALHES | COMPRAR

Formação Online em Power BI e Análise de Dados - do Básico ao Avançado - Criação de Dashboards no Power BI - Funções e Linguagem DAX no Power BI - Análise de Dados com Power Query e Linguagem M e Análise de Dados com o Excel - Formação Completa

MAIS DETALHES | COMPRAR

Cursos Online com Certificado - Formação Completa em Banco de Dados e Linguagem SQL - Linux - Hacker Ético Profissional - Wazuh - Mikrotik e pfSense - Tudo para Alavancar a sua Carreira

MAIS DETALHES | COMPRAR

Formação Profissional em Hardware Montagem Manutenção de Computadores e Impressoras Recuperação de Dados em HDs e SSDs Redes de Computadores e Como Ganhar Dinheiro com Este Conhecimento

MAIS DETALHES | COMPRAR

Júlio Battisti Livros e Cursosa sua sala de aula na internet

GRANDES DESTAQUES DO SITE:

Livros

Vídeo-Aulas

E-books

Cursos Online

Conteúdo Gratuito

Institucional