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
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">15-20 2
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
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
<html> <head> <title>exemplo 24</title> </head> <body> <div align="center"><h2> Teste de formulário </h2></div> <form action="mailto:ejds.aulas@gmail.com" 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
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
<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 = "http://ejds.no.sapo.pt"> Site Prof... <OPTION VALUE = "http://ejds.no.sapo.pt/t6si..html"> t6si <OPTION VALUE = "http://ejds.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].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"> E-mail <input type="text" name="email" 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
</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