HTML
Sessão 8
HTML
Criação de Páginas WEB
Formulários
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
Criação de Páginas WEB
Formulários
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=“[email protected]" method=post>
Criação de Páginas WEB
Formulários
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
Criação de Páginas WEB
Formulários
Atributos
Significado
size
maxlength
Define o tamanho da caixa em número de caracteres
Indica o tamanho máximo do texto que pode ter o formulário
value
Em alguns casos pode ser interessante atribuir um valor
definido ao campo em questão
Rows
Cols
Define o número de linhas do campo de texto.
Define o número de colunas do campo de texto.
Criação de Páginas WEB
Formulários
Tag <SELECT> permite definir uma lista com várias opções
seleccionáveis , inseridos numa lista com <OPTION> .
<select name="familia">
<option>1
<option>2
<option>3
<option>4 ou mais
</select>
3
Criação de Páginas WEB
Formulários
Atributos
Significado
size
Indica o número de valores mostrados da lista. O resto pode
ser visto por meio da barra lateral de deslocamento.
Multiple
Permite a selecção de mais vários elementos da lista.
Selected
Da mesma forma que multiple, este atributo não toma
nenhum valor simplesmente indica qual a opção que é
apresenta como padrão.
Criação de Páginas WEB
Formulários
Tag <TEXTAREA> </TEXTAREA> Permite inserir uma caixa de texto.
Atributos
Significado
name
Define o nome
Rows
Define o número de linhas do campo de texto.
Cols
Define o número de colunas do campo de texto.
<textarea name="comentários" rowns=20 cols=60></textarea>
4
Criação de Páginas WEB
Formulários
<html>
<head>
1) Abrir o ficheiro modelo2.txt com o bloco
<title>Exemplo 24</title>
de notas e digitar o seguinte código HTML:
</head>
<body>
<div align="center"><h2> Teste de formulário </h2></div>
<form action="mailto:[email protected]" method=post>
<pre>
Nome : <input type="text" name="nome" size=40>
Curso: <input type="text" name="curso" size=40>
<hr>
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
<hr>
Continua...
Criação de Páginas WEB
Formulários
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
<hr>
Quantos pessoas residem em sua casa?
<select name="familia">
<option>1
<option>2
<option>3
<option>4 ou mais
</select>
<hr>
Comentários adicionais: <br>
<textarea name="comentários" rowns=20 cols=60></textarea>
<hr>
Continua .....
5
Criação de Páginas WEB
Formulários
1) Abrir o ficheiro modelo2.txt com o bloco
de notas e digitar o seguinte código HTML:
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">
</pre>
</form>
</body>
</html>
Guardar o ficheiro com o nome exemp24.html e testar no IE
Criação de Páginas WEB
Formulários
6
Criação de Páginas WEB
Formulários
<html>
<head>
<title>Exemplo 24a</title>
</head>
<body>
<FORM NAME="Pesquisa">
1) Abrir o ficheiro modelo.txt com o bloco
de notas e digitar o seguinte código HTML:
<SELECT NAME="tecno">
<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
</SELECT>
<INPUT TYPE="button" VALUE="Seleccione e... clique!"
onclick="top.location.href = document.Pesquisa.tecno.options
[document.Pesquisa.tecno.selectedIndex].value">
</FORM>
</body>
</html>
Guardar o ficheiro com o nome exemp24a.html e testar no IE
Criação de Páginas WEB
Formulários
<html>
<head>
1) Abrir o ficheiro modelo2.txt com o bloco
<title>Exemplo 25</title>
</head>
de notas e digitar o seguinte código HTML:
<body>
<form action="mailto:[email protected]" method="post" enctype="text/plain">
Nome <input type="text" name="nome" size="30" maxlength="100"><br>
E-mail <input type="text" name="email" size="25" maxlength="100" value="@">
<br>
Cidade <input type="text" name="cidade" size="20" maxlength="60">
<br>
Sexo<br>
<input type="radio" name="sexo" value="Masculino" checked> Homem<br>
<input type="radio" name="sexo" value="Feminino"> Mulher<br><br>
Frequencia das viagens <br>
<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><br><br>
7
Criação de Páginas WEB
Formulários
Comentários sobre sua satisfação pessoal<br>
<textarea cols="30" rows="7" name="comentários"></textarea>
<br><br>
<input type="checkbox" name="receber_info" checked>
Desejo receber notificação das novidades nas linhas de autocarro.
<br>
<br>
<input type="submit" value="Enviar formulário">
<br>
<br>
<input type="Reset" value="Apagar tudo">
</form>
</body>
</html>
Guardar o ficheiro com o nome exemp25.html e testar no IE
Criação de Páginas WEB
Formulários
8
Download

Falta ver de que forma podemos trocar informações com nosso