HTML. Sessão 8 HTML. Criação de Páginas WEB. Formulários

Tamanho: px

Começar a partir da página:

Download "HTML. Sessão 8 HTML. Criação de Páginas WEB. Formulários"

Manoel Beretta Taveira
8 Há anos
Visualizações:

1 HTML Sessão 8 HTML Falta ver de que forma podemos trocar informações com nosso visitante. Este aspecto é primordial para a grande quantidade de acções que se podem realizar : Comprar um artigo, preencher uma encomenda, enviar um comentário ao autor... Os formulários são as famosas caixas de texto e botões que podemos encontrar em muitas páginas web. São muito utilizados para realizar buscar ou também para introduzir dados pessoais, por exemplo, em sites de comércios electrónico. Os dados que o utilizador introduz nestes campos são enviados ao correio electrónico do administrador do formulário ou também, a um programa que se encarrega de processá-los automaticamente. 1

.. Os formulários são as famosas caixas de texto e botões que podemos encontrar em muitas páginas web.

2 Tags <FORM> e </FORM> definem um formulário para recolher dados inseridos pelo utilizador Atributos: ACTION - Define o tipo de acção a realizar com o formulário. Como já dissemos, existem duas possibilidades: O formulário é enviado a um endereço de correio electrónico O formulário é enviado a um programa ou script que processa seu conteúdo. METHOD - Especifica o método usando na comunicação com o servidor (GET ou POST), Enctype - Indica a forma na qual viajará a informação que for mandada pelo formulário <form action= ejds.aulas@gmail.com" method=post> Tag <INPUT> é o item mais importantes que se pode colocar dentro de <FORM>. Insere um campo para introduzir dados. Dentro do <INPUT> podemos ter vários valores TYPE diferentes: text, password, checkbox, radio, button, sudmit, reset e hidden. Todos os tipos de input precisam ter um atributo NAME definido, pois é parte das informações enviadas como par nome / valor. <input type="text" name="nome" size=40> <input type="checkbox" name="programs1" value="graficos" CHECKED>Gráficos <input type="radio name="age" value="15-20">

METHOD - Especifica o método usando na comunicação com o servidor (GET ou POST), Enctype - Indica a forma na qual viajará a informação que for mandada pelo formulário <form action= ejds.aulas@gmail.

3 Atributos size maxlength value Rows Cols Significado Define o tamanho da caixa em número de caracteres Indica o tamanho máximo do texto que pode ter o formulário Em alguns casos pode ser interessante atribuir um valor definido ao campo em questão Define o número de linhas do campo de texto. Define o número de colunas do campo de texto. Tag <SELECT> permite definir uma lista com várias opções seleccionáveis, inseridos numa lista com <OPTION>. <select name="familia"> </select> <option>1 <option>2 <option>3 <option>4 ou mais 3

de linhas do campo de texto. Define o número de colunas do campo de texto.

4 Atributos size Multiple Selected Significado Indica o número de valores mostrados da lista. O resto pode ser visto por meio da barra lateral de deslocamento. Permite a selecção de mais vários elementos da lista. Da mesma forma que multiple, este atributo não toma nenhum valor simplesmente indica qual a opção que é apresenta como padrão. Tag <TEXTAREA> </TEXTAREA> Permite inserir uma caixa de texto. Atributos name Rows Cols Significado Define o nome Define o número de linhas do campo de texto. Define o número de colunas do campo de texto. <textarea name="comentários" rowns=20 cols=60></textarea> 4

Da mesma forma que multiple, este atributo não toma nenhum valor simplesmente indica qual a opção que é apresenta como padrão.

5 <html> <head> <title>exemplo 24</title> </head> <body> <div align="center"><h2> Teste de formulário </h2></div> <form method=post> <pre> Nome : <input type="text" name="nome" size=40> Curso: <input type="text" name="curso" size=40> De que tipos de programas você gosta? <input type="checkbox" name="programs1" value="graficos" CHECKED>Gráficos <input type="checkbox" name="programs2" value="internet" CHECKED>Internet <input type="checkbox" name="programs3" value="editores">editores de texto 1) Abrir o ficheiro modelo2.txt com o bloco de notas e digitar o seguinte código HTML: Continua... Continua... Qual a sua idade? <input type="radio" name="age" value="15-20">15-20 <input type="radio" name="age" value="21-30">21-30 <input type="radio" name="age" value="31 ou mais">31 ou mais Quantos pessoas residem em sua casa? <select name="familia"> <option>1 <option>2 <option>3 <option>4 ou mais </select> Comentários adicionais: <textarea name="comentários" rowns=20 cols=60></textarea> 5

<input type="checkbox" name="programs1" value="graficos" CHECKED>Gráficos <input type="checkbox" name="programs2" value="internet" CHECKED>Internet <input type="checkbox" name="programs3"

6 1) Abrir o ficheiro modelo2.txt com o bloco de notas e digitar o seguinte código HTML: </body> </html> </pre> </form> Obrigado por preencher o nosso questionário. Para enviá-lo, clique no botão "ENVIAR". <p> <input type="submit" value="enviar">-<input type="reset" value="limpar"> Guardar o ficheiro com o nome exemp24.html e testar no IE 6

</form> Obrigado por preencher o nosso questionário.

7 <html> <head> <title>exemplo 24a</title> </head> <body> </body> </html> <FORM NAME="Pesquisa"> </FORM> <SELECT NAME="tecno"> </SELECT> 1) Abrir o ficheiro modelo.txt com o bloco de notas e digitar o seguinte código HTML: <OPTION VALUE = " Site Prof... <OPTION VALUE = " t6si <OPTION VALUE = " 10 DG <INPUT TYPE="button" VALUE="Seleccione e... clique!" onclick="top.location.href = document.pesquisa.tecno.options [document.pesquisa.tecno.selectedindex].value"> Guardar o ficheiro com o nome exemp24a.html e testar no IE <html> <head> <title>exemplo 25</title> </head> <body> <form action="mailto:ejds.aulas@gmail.com" method="post" enctype="text/plain"> Nome <input type="text" name="nome" size="30" maxlength="100"> <input type="text" name=" " size="25" maxlength="100" value="@"> Cidade <input type="text" name="cidade" size="20" maxlength="60"> Sexo <input type="radio" name="sexo" value="masculino" checked> Homem <input type="radio" name="sexo" value="feminino"> Mulher Frequencia das viagens <select name="utilização"> <option value="1">várias vezes por dia <option value="2">uma vez por dia <option value="3">várias vezes por semana <option value="4">várias vezes por mês </select> 1) Abrir o ficheiro modelo2.txt com o bloco de notas e digitar o seguinte código HTML: 7

no.sapo.pt/10dg.html"> 10 DG <INPUT TYPE="button" VALUE="Seleccione e... clique!" onclick="top.location.href = document.pesquisa.tecno.options [document.pesquisa.tecno.selectedindex].

8 </form> Comentários sobre sua satisfação pessoal <textarea cols="30" rows="7" name="comentários"></textarea> <input type="checkbox" name="receber_info" checked> Desejo receber notificação das novidades nas linhas de autocarro. <input type="submit" value="enviar formulário"> <input type="reset" value="apagar tudo"> </body> </html> Guardar o ficheiro com o nome exemp25.html e testar no IE 8

notificação das novidades nas linhas de autocarro.

Documentos relacionados

Linguagem de. Aula 06. Profa Cristiane Koehler cristiane.koehler@canoas.ifrs.edu.br

Linguagem de. Aula 06. Profa Cristiane Koehler cristiane.koehler@canoas.ifrs.edu.br Linguagem de Programação IV -PHP Aula 06 Profa Cristiane Koehler cristiane.koehler@canoas.ifrs.edu.br Criação de Formulários o Um formulário consiste em uma série de campos que são preenchidos pelo usuário