9 Formulários Objetivos deste capítulo Ao terminar este capítulo, você deverá: Saber o que são formulários; Conhecer as principais tags para construção de um formulário; Criar o layout simples de um formulário. Etapas de Estudo Etapa 1 Criação de formulários Etapa 2 Campos de entrada de dados Para início de conversa Neste capítulo você verá de que maneira formulários podem ser criados com o auxilio do HTML, e de que maneira estes formulários permitem uma interação entre o usuário e o servidor, permitindo que milhares de tarefas possam ser executadas por intermédio do mundo virtual. Etapa 1 Criação de formulários Um formulário consiste em uma série de campos que são preenchidos pelo usuário e recebidos pelo servidor da Web para serem processados. Certamente você já deve ter entrado em alguma página de formulário e notado alguns campos em branco que devem ser preenchidos, como seu nome, endereço, telefone, e-mail, número de seu cartão de crédito, etc. De um modo geral, a criação de um formulário envolve duas etapas distintas: a primeira delas consiste na criação do layout do formulário, ou seja, a página que contém as caixas de diálogo que deverão ser preenchidas pelo usuário. A segunda etapa consiste em se desenvolver um programa de script, a ser executado pelo servidor, que tem por objetivo receber os dados que foram preenchidos pelo formulário e processá-los. Nome do Capítulo 153
Neste livro, apenas estudaremos a criação dos layouts de um formulário, já que o seu processamento, pelo servidor, exigem tecnologias e linguagens específicas que estão fora do escopo deste livro. No HTML, a criação de um formulário é realizada por intermédio das tags <FORM> e </FORM>, que isoladamente não faz com que o navegador desenhe alguma coisa na página ou permita a inclusão de dados. A tag <FORM> apenas possui elementos que permitem recolher as informações digitadas em um formulário e atributos que informam ao navegador de que maneira os dados recolhidos devem ser encaminhados ao servidor para serem processados. A seguir, descrevemos dois de seus atributos: Atributo ACTION O atributo ACTION da tag <FORM> tem por objetivo definir o tipo de ação a ser realizada com o formulário, tais ações podem ser: O formulário é enviado a um endereço de e-mail. O formulário é enviado a uma página que contém um programa de script que interpreta e processa os dados enviados. Para enviar um formulário para um endereço de e-mail usamos a sintaxe seguinte: <FORM ACTION="mailto:endereço@eletronico.com.br"> </FORM> Para enviar um formulário para ser processado por um programa de script, você deve especificar o endereço da página que contém tal script, ou seja, sua URL. Neste caso sua sintaxe tem o seguinte formato: <FORM ACTION="endereço da página"> </FORM> A maneira de indicar o endereço da página é a mesma utilizada no capítulo sobre vínculos. Atributo METHOD O atributo METHOD da tag <FORM> tem por objetivo definir a forma com que o formulário será enviado, ou seja, qual será o método usado para acessar a URL descrito pelo atributo ACTION. Os dois métodos usados atualmente são: GET e POST, ambos transferem dados do navegador para o servidor, com as seguintes diferenças básicas: GET: Os dados inseridos em um formulário fazem parte da URL associada à consulta enviada para o servidor. As informações digitadas neste modo são visualizadas na barra de endereço do navegador, exemplo: http://www.facaumsite.com.br/leitor.asp?id=7309 POST: Os dados inseridos no formulário fazem parte do corpo da mensagem encaminhada ao servidor e suporta uma grande quantidade de dados. As informações digitadas neste modo não são visualizadas na barra de endereço do navegador. Nota: Informações que exigem segurança não devem ser manipuladas pelo método GET. 154 Nome do Livro
Etapa 2 Campos de entrada de dados O HTML nos disponibiliza uma série de elementos destinados ao preenchimento dos dados de um formulário. Os principais são: Caixa de texto de uma linha (Text); Caixa de texto de rolagem (TextArea); Caixa de seleção (CheckBox); Botão de opção (Radio); Menu suspenso; Botão de envio (Submit). Caixa de texto de uma linha (Text) Consiste em uma caixa na qual você digita um texto com um tamanho predefinido, como seu nome, endereço, e-mail, etc. Sintaxe: <INPUT NAME="nome da caixa de texto" TYPE="text" VALUE="texto default a ser exibido na caixa" SIZE="tamanho da caixa de texto" MAXLENGTH="Número máximo de caracteres permitido na digitação" Em que: Name: (Obrigatório) Representa o nome a ser dado para a caixa de texto (entre aspas). Procure usar nomes que iniciem com txt para facilitar a interpretação do programa. Exemplo: txtnome, txtendereco, txtcidade, etc. Type: (Obrigatório) Constante que representa o nome do elemento usado. Deve ser sempre text (entre aspas) para caixas de texto de uma linha. Value: (Opcional) Exibe um texto pré-preenchido, na caixa de texto do navegador do usuário. Se esta cláusula for suprimida, nenhum texto será exibido na referida caixa (o texto default deve estar entre aspas). Size: (Opcional) Define a largura, em caracteres, de uma caixa de texto (esse número deve estar entre aspas). MaxLength: (Opcional) Indica o número máximo de caracteres que pode ser digitado na caixa de texto, ou seja, o tamanho máximo do campo (esse número deve estar entre aspas). Laboratório 9.1 Usando o elemento "Caixa de texto" Neste laboratório você verá de que maneira usamos uma caixa de texto em um formulário. 1. Com o auxílio do bloco de notas, abra o documento HTML doc5_1.htm que se encontra na pasta c:\serieweb\nhtml\lab. 2. Insira as linhas que estão em negrito na listagem seguinte: Nome do Capítulo 155
1. <HTML> 2. <HEAD> 3. <TITLE>Faça um Site - HTML</TITLE> 4. </HEAD> 5. <BODY> 6. 7. <FORM METHOD = "POST"> 8. Digite seu nome: 9. <INPUT TYPE="Text" SIZE="30" NAME="txtNome"> 10. </FORM> 11. 12. </BODY> 13. </HTML> 3. Salve seu trabalho como Lab9_1.htm na pasta c:\serieweb\nhtml\laboratorios. 4. Visualize o resultado em seu navegador, figura 1. 5. Digite algum texto no campo. Figura 1 - Visualização do laboratório 9.1. Analisando o documento A linha 7 informa ao navegador de que maneira o formulário será encaminhado ao servidor. <FORM METHOD = "POST"> A linha 8 insere o texto: Digite seu nome:. A linha 9 define a tag <INPUT>. <INPUT TYPE="Text" SIZE="30" NAME="txtNome"> Onde: Type="Text": Indica que o elemento do formulário é uma caixa de texto de uma linha. Size="30": Informa que o tamanho da caixa de texto será dimensionado para aproximadamente 30 caracteres. Name="txtNome": Indica que o nome dado à caixa de texto é txtnome. A linha 10 encerra a seção do formulário por intermédio da tag </FORM>. 156 Nome do Livro
Nota: Na prática, o formulário anterior não funciona corretamente, pois alguns elementos ainda devem ser inseridos. Nossa intenção, no momento, é apenas mostrar-lhe como inserir um elemento de caixa de texto em uma página. Caixa de texto de rolagem (TextArea) Uma caixa na qual você digita um texto livre, como sua opinião sobre um site, sobre seu trabalho, etc. Sintaxe: <TEXTAREA NAME="nome da caixa de texto de rolagem" VALUE="texto default a ser exibido na caixa" ROWS="número de linhas" COLS="número de colunas" MAXLENGTH="Número máximo de caracteres permitido na digitação" ALIGN="alinhamento" </TEXTAREA> Em que: Name: (Obrigatório) Representa o nome a ser dado para a caixa de texto de rolagem (entre aspas). Value: (Opcional) Exibe um texto pré-preenchido na caixa de texto de rolagem do navegador do usuário. Se esta cláusula for suprimida, nenhum texto será exibido na referida caixa (o texto default deve estar entre aspas). Rows: (Opcional) Define o número de linhas a ser exibido no campo de visão de uma caixa de texto de rolagem (esse número deve estar entre aspas). Cols: (Opcional) Define o número de colunas, em caracteres, a ser exibido no campo de visão de uma caixa de texto de rolagem (esse número deve estar entre aspas). MaxLength: (Opcional) Indica o número máximo de caracteres que pode ser digitado na caixa de texto de rolagem, ou seja, o tamanho máximo do campo (esse número deve estar entre aspas). Align: (Opcional) Define o alinhamento do texto na caixa de texto de rolagem, podendo conter os seguintes valores: right, left e center (estes valores devem estar entre aspas). Laboratório 9.2 Usando o elemento "Caixa de texto de rolagem" Neste laboratório você verá de que maneira usamos uma caixa de texto de rolagem em um formulário. 1. Com o auxílio do bloco de notas, abra o documento HTML doc5_1.htm que se encontra na pasta c:\serieweb\nhtml\lab. 2. Insira as linhas que estão em negrito na listagem seguinte: Nome do Capítulo 157
1. <HTML> 2. <HEAD> 3. <TITLE>Faça um Site - HTML</TITLE> 4. </HEAD> 5. <BODY> 6. 7. <FORM METHOD = "POST"> 8. Dê sua opinião: 9. <TEXTAREA ROWS="5" COLS="40" NAME="TxtOpiniao"></TEXTAREA> 10. </FORM> 11. 12. </BODY> 13. </HTML> 3. Salve seu trabalho como Lab9_2.htm na pasta c:\serieweb\nhtml\laboratorios. 4. Visualize o resultado em seu navegador, figura 2. 5. Digite algum texto no campo. Figura 2 - Visualização do laboratório 9.1. Analisando o documento A linha 9 contém a tag <TEXTAREA> com os seguintes atributos: <TEXTAREA ROWS="5" COLS="40" NAME="TxtOpiniao"></TEXTAREA> onde: TextArea: Indica que o elemento do formulário é uma caixa de texto de rolagem. Rows="5": Informa que a altura da caixa de texto de rolagem será dimensionada para 5 caracteres. Cols="40": Informa que a largura da caixa de texto de rolagem será dimensionada para 40 caracteres. Name=" TxtOpiniao": Indica que o nome dado à caixa de texto de rolagem é TxtOpiniao. Nota: Na prática, o formulário anterior não funciona corretamente, pois alguns elementos ainda devem ser inseridos. Nossa intenção, no momento, é apenas mostrar-lhe como inserir um elemento de caixa de texto em uma página. 158 Nome do Livro
Caixa de seleção (CheckBox) As caixas de seleção permitem a você selecionar ou desativar a opção a ela relacionada. Em uma lista com caixas de seleção, várias opções podem ser selecionadas ao mesmo tempo. Sintaxe: <INPUT TYPE="checkbox" NAME="nome da caixa de seleção" VALUE="valor de retorno">texto da caixa", em que: Name: (Obrigatório) Representa o nome a ser dado para a caixa de seleção (entre aspas). Procure usar nomes que iniciem com chk para facilitar a interpretação do programa. Exemplo: chk1, chknome, etc. Type: (Obrigatório) Constante que representa o nome do elemento usado. Deve ser sempre Checkbox (entre aspas) para caixas de seleção. Value: (Obrigatório) Qual é o valor a ser retornado quando um usuário selecionar ( ) esta opção (o valor deve estar entre aspas). Texto da caixa (Opcional) Define o texto que representa a caixa de seleção, a ser impresso à sua direita (esse texto deve estar entre aspas). Laboratório 9.3 Usando o elemento "Caixa de seleção" Neste laboratório você verá de que maneira usamos uma caixa de seleção em um formulário. 1. Com o auxílio do bloco de notas, abra o documento HTML doc5_1.htm que se encontra na pasta c:\serieweb\nhtml\lab. 2. Insira as linhas que estão em negrito na listagem seguinte: 1. <HTML> 2. <HEAD> 3. <TITLE>Faça um Site - HTML</TITLE> 4. </HEAD> 5. <BODY> 6. 7. <FORM METHOD = "POST"> 8. <INPUT TYPE="checkbox" NAME="chk1" VALUE="Jornal">Jornal O Globo<BR> 9. <INPUT TYPE="checkbox" NAME="chk2" VALUE="Revista">Revista Veja<BR> 10. <INPUT TYPE="checkbox" NAME="chk3" VALUE="Internet">Internet<BR> 11. <INPUT TYPE="checkbox" NAME="chk4" VALUE="TV">TV Bandeirantes 12. </FORM> 13. 14. </BODY> 15. </HTML> Nome do Capítulo 159
3. Salve seu trabalho como Lab9_3.htm na pasta c:\serieweb\nhtml\laboratorios. 4. Visualize o resultado em seu navegador, figura 3. Figura 3 - Visualização do laboratório 9.3. 5. Clique sobre algumas opções e observe o resultado. Analisando o documento A linha 8 insere o primeiro elemento da caixa de seleção, em que: Type="checkbox": Indica que o elemento do formulário é uma caixa seleção. Name="chk1": Indica que o nome dado à primeira caixa de texto é chk1. Value="Jornal": Armazena o valor Jornal na caixa de seleção chk1. "Jornal O Globo": Imprime Jornal O Globo à direita da caixa de seleção. <Br>: Insere uma quebra de linha após o texto Jornal o Globo. (Se inseríssemos um parágrafo, a distância entre uma caixa e outra seria muito grande. Uma quebra de linha aproxima as caixas, dando um visual melhor à página de formulário.) As linhas 9, 10 e 11 inserem as outras três caixas de seleção. Nota: Na prática, o formulário anterior não funciona corretamente, pois alguns elementos ainda devem ser inseridos. Nossa intenção, no momento, é apenas mostrar-lhe como inserir um elemento de caixa de texto em uma página. Botão de opção (Radio) Como o próprio nome mostra, os botões de opção (radio) indicam opções exclusivas, ou seja, apenas uma das opções de cada vez pode ser selecionada pelo usuário. O botão selecionado contém um ponto em seu centro ( ). Sintaxe: 160 Nome do Livro
<INPUT TYPE="radio" NAME="nome do botão de opção" VALUE="valor de retorno">texto da caixa" Em que: Name: (Obrigatório) Representa o nome a ser dado para o botão de opção (entre aspas). Type: (Obrigatório) Constante que representa o nome do elemento usado. Deve ser sempre radio (entre aspas) para botões de opção. Value: (Obrigatório) O valor a ser retornado quando um usuário selecionar ( ) esta opção (o valor deve estar entre aspas). Texto da caixa (Opcional) Define o texto que representa o botão de opção, a ser impresso à sua direita (esse texto deve estar entre aspas). Laboratório 9.4 Usando o elemento "Botão de opção (radio)" Neste laboratório você verá de que maneira usamos os botões de opção em um formulário. 1. Com o auxílio do bloco de notas, abra o documento HTML doc5_1.htm que se encontra na pasta c:\serieweb\nhtml\lab. 2. Insira as linhas que estão em negrito na listagem seguinte: 1. <HTML> 2. <HEAD> 3. <TITLE>Faça um Site - HTML</TITLE> 4. </HEAD> 5. <BODY> 6. 7. <FORM METHOD = "POST"> 8. <INPUT TYPE="radio" NAME="OptEstCivil" VALUE="Casado">Casado<BR> 9. <INPUT TYPE="radio" NAME="OptEstCivil" VALUE="Solteiro">Solteiro<BR> 10. <INPUT TYPE="radio" NAME="OptEstCivil" VALUE="Viúvo">Viúvo<BR> 11. <INPUT TYPE="radio" NAME="OptEstCivil" VALUE="Separado">Separado 12. </FORM> 13. 14. </BODY> 15. </HTML> 3. Salve seu trabalho como Lab9_4.htm na pasta c:\serieweb\nhtml\laboratorios. 4. Visualize o resultado em seu navegador, figura 4. Nome do Capítulo 161
Figura 4 - Visualização do laboratório 9.4. 5. Clique sobre algumas opções e observe o resultado. Analisando o documento A linha 8 insere o primeiro elemento da caixa de seleção, em que: Type="radio": Indica que o elemento do formulário é um botão de opção. Name="OptEstCivil": Indica que o nome dado aos botões de opção do grupo é OptEstCivil. Observe que o mesmo nome foi dado aos quatro botões do grupo, pois apenas um dos quatro valores pode ser armazenado na variável que contém o nome do botão. Value="Casado": Armazena o valor Casado na variável que contém o nome do botão: OptEstCiv. "Casado": Imprime Casado à direita do botão de opção. <Br>: Insere uma quebra de linha após o texto Casado. (Se inseríssemos um parágrafo, a distância entre um botão e outro seria muito grande. Uma quebra de linha aproxima os botões, dando um visual melhor à página de formulário.) As linhas 9, 10 e 11 inserem os outros três botões de opção. Nota: Na prática, o formulário anterior não funciona corretamente, pois alguns elementos ainda devem ser inseridos. Nossa intenção, no momento, é apenas mostrar-lhe como inserir um elemento de caixa de texto em uma página. Menu suspenso (Select e Option) O menu suspenso, também conhecido como caixa de lista suspensa, tem como função exibir uma lista de opções, dentre as quais pode-se escolher uma delas com um simples clique do mouse. Sintaxe: 162 Nome do Livro
<SELECT NAME="nome do menu suspenso" VALUE="valor default" SIZE="número de elementos visíveis" <OPTION>1ª opção da lista</option> <OPTION>2ª opção da lista</option> <OPTION>3ª opção da lista</option>... <OPTION>nª opção da lista</option></select> Em que: Name: (Obrigatório) Representa o nome a ser dado para o menu suspenso (entre aspas). Procure usar nomes que iniciem com Sel para facilitar a interpretação do programa. Exemplo: Sel1, SelEstado, etc. Esta é a variável que retornará o valor selecionado. Value: (Opcional) O valor a ser retornado se nenhuma opção for selecionada (o valor deve estar entre aspas). Size: (Opcional) Número de opções da lista, visíveis na tela. Se Size for omitido, terá o mesmo efeito que size="1". Exemplo: Para Size="1" temos: Para Size="2" temos: Option: (Obrigatório) Contém cada uma das opções da lista. Laboratório 9.5 Usando o elemento "Menu suspenso" Neste laboratório você verá de que maneira usamos menus suspensos em um formulário. 1. Com o auxílio do bloco de notas, abra o documento HTML doc5_1.htm que se encontra na pasta c:\serieweb\nhtml\lab. 2. Insira as linhas que estão em negrito na listagem seguinte: 1. <HTML> 2. <HEAD> 3. <TITLE>Faça um Site - HTML</TITLE> 4. </HEAD> 5. <BODY> 6. 7. <FORM METHOD = "POST"> 8. <select name="selestado" size="1"> 9. <option>são Paulo</option> 10. <option>rio de Janeiro</option> 11. <option>rio Grande do Sul</option> 12. <option>bahia</option> 13. <option>amazonas</option></select> 14. </FORM> 15. 16. </BODY> 17. </HTML> 3. Salve seu trabalho como Lab9_5.htm na pasta c:\serieweb\nhtml\laboratorios. 4. Visualize o resultado em seu navegador, figura 5. Nome do Capítulo 163
Figura 5 - Visualização do laboratório 9.5. 5. Clique sobre alguns itens do menu e observe o resultado. Analisando o documento A linha 8 insere o nome do menu suspenso SelEstado e o número de elementos exibidos, que no caso é 1. As linhas de 9 a 13 inserem, por meio da cláusula Option, as cidades: São Paulo, Rio de Janeiro,... Amazonas. Botão de envio O botão de envio tem por objetivo informar ao navegador para enviar o formulário ao servidor. Sintaxe: <IMPUT TYPE="submit" VALUE="Enviar"> Onde: Type: define qual a operação a ser realizada pelo botão. Se o seu valor for submit, indica que ao clicarmos sobre o mesmo o formulário será enviado. Se o seu valor for reset, os dados digitados nos campos do formulário serão apagados e o formulário não será enviado ao servidor. Value: Contém o rótulo do botão, ou seja, qual o nome ou texto que deverá exibir. No exemplo anterior, o botão exibirá o rótulo Enviar. Laboratório 9.6 Criando um formulário exemplo Como dissemos anteriormente, o envio de um formulário, requer o emprego de outras tecnologias e linguagens não descritas neste livro. Assim sendo, este laboratório tem como único objetivo demonstrar a criação de um formulário com vários elementos, sendo que seu envio não poderá ser concretizado devido a falta de componentes destinados para este fim. 1. Com o auxílio do bloco de notas, abra o documento HTML doc5_1.htm que se encontra na pasta c:\serieweb\nhtml\lab. 2. Insira as linhas que estão em negrito na listagem seguinte: 164 Nome do Livro
1. <HTML> 2. <HEAD> 3. <TITLE>Faça um Site - HTML</TITLE> 4. </HEAD> 5. <BODY> 6. <FORM METHOD="POST"> 7. 8. Nome: 9. <INPUT TYPE="text" NAME="Nome"> <BR> 10. E-mail: 11. <INPUT TYPE="text" NAME="Email"> <BR> 12. Sexo: 13. <INPUT NAME="Sexo" TYPE="radio" VALUE="radiobutton">Masculino 14. <INPUT NAME="Sexo" TYPE="radio" VALUE="radiobutton">Feminino <BR> 15. Em qual a região da cidade você mora : 16. <SELECT NAME="Regiao"> 17. <OPTION VALUE="Sul">Sul</OPTION> 18. <OPTION VALUE="Norte">Norte</OPTION> 19. <OPTION VALUE="Oeste">Oeste</OPTION> 20. <OPTION VALUE="Leste">Leste</OPTION> 21. <OPTION VALUE="Centro">Centro</OPTION> 22. </SELECT> 23. <BR><BR> 24. Opine sobre este livro:<br> 25. <TEXTAREA NAME="Opiniao" COLS="70" ROWS="7"></TEXTAREA> 26. <BR><BR> 27. <INPUT TYPE="checkbox" NAME="ReceberEnail" VALUE="Sim"> 28. Desejo receber iinformações sobre lançamentos de novos livros. 29. <BR><BR> 30. <INPUT TYPE="submit" NAME="Submit" VALUE="Enviar"> 31. <INPUT TYPE="RESET" NAME="Submit2" VALUE="Limpar dados"> 32. 33. </FORM> 34. </BODY> 35. </HTML> 3. Salve seu trabalho como Lab9_6.htm na pasta c:\serieweb\nhtml\laboratorios. 4. Visualize o resultado em seu navegador, figura 6. Nome do Capítulo 165
Síntese do capítulo Figura 6 - Visualização do laboratório 9.6. Neste capítulo você viu de que maneira criamos o layout de um formulário. Estes formulários são de extrema importância no HTML, uma vez que são responsáveis pela interação entre o usuário e o servidor, possibilitando a troca de dados. Quando necessitamos enviar dados para uma outra página, afim de que os mesmos possam ser processados, é necessário o emprego de outras tecnologias e linguagens, tais como ASP, VBScript, JavaScript, PHP, etc. No próximo capítulo você dará inicio à construção do site proposto neste livro, pondo em prática tudo aquilo que você aprendeu nestes nove capítulos. Lembra do documento Resumo.doc que se encontra na pasta c:\nhtml\docs? Se você seguiu as orientações deste livro, este documento, agora deve estar bem completo e será muito útil para ajudar você a "botar a mão na massa". Relaxe, tome um bom café e prepare-se para iniciar o seu projeto. Tarefa mínima 1. Crie um formulário para pesquisar os usuários que visitam o seu site. Faça as seguintes perguntas: Nome, Endereço do e-mail, sexo, idade, profissão. Crie um menu suspenso com algumas sugestões de títulos de livros que ele gostaria que fossem publicados, insira também um campo livre para que ele possa fazer algum comentário. Visite nosso site Confira as respostas da tarefa mínima em nosso site: www.facaumsite.com.br 166 Nome do Livro