UNIPAC – ARAGUARI CAMPUS – IX PROF. EVERTON HIPÓLITO DE FREITAS Formulário HTML.

UNIPAC – ARAGUARICAMPUS – IX

PROF. EVERTON HIPÓLITO DE FREITAS

Formulário HTML

HTML - Formulário

Para permitir uma maior interação entre “sistemas computacionais” e os seus usuários, é necessário a existência de mecanismos de entrada que permita o computador identificar o que seus usuários querem, quais ações a serem executadas, etc...

O formulário em HTML é um meio do usuário entrar com informações para um sistema.

Exemplo de formulário HTML

Como ocorre o tratamento dos dados no formulário?

Primeiramente, a página com o formulário é carregada. Após o preenchimento do formulário, o javascript valida os

campos que são obrigatórios. Caso estejam preenchidos, envia os dados dos campos para um

servidor tratar as informações. Caso campos obrigatórios estejam em branco, emitir uma mensagem

de erro. Após o javascript validar os campos, os dados do

formulário são enviados para o servidor que irá tratá-los. A tarefa de tratar os dados consta na verificação se os campos

obrigatórios foram validados, se os valores esperados foram informados, armazenamento dos dados no banco de dados, etc...

Após o tratamento dos dados, as informações são armazenadas no banco de dados e uma mensagem de confirmação é retornada pelo servidor. Continua o processo normalmente .....

Tag Form

Os formulários são delimitados pela Tag<FORM>… </FORM>. Esta Tag permite agrupar vários elementos de formulário

(botões, campos de texto, campos de seleção,…) e possui os atributos obrigatórios: NAME

Indica o nome que identifica o elemento formulário na página. Um id pode ser especificado, ou não. (como se fosse um apelido)

METHOD indica sob qual método de envio dos dados (digitados no

formulário) será utilizado:• “POST” os dados são enviados em pacotes.• “GET” os dados são enviados e codificados na URL.

ACTION indica o endereço para onde os dados serão enviados. mailto:adresse.email@machine

• Permite abrir o programa de email correspondente.

mailto:adresse.email@machine

Lembrete

Atenção, todos os elementos (tag) em uma página HTML pode possuir o atributo id para definir um apelido.

<html><head><title>Untitled Document</title></head><body id="paginaCliente"><table id="dadosPessoa"><tr>

<td id="columnName"> Maria Helena</td><td id="columnCor"> Morena</td>

</tr></table></body></html>

Exemplo do uso da tag Form

Sintaxe da tag form<FORM METHOD="POST" ou "GET" ACTION="url“

NAME=“nomeFormulario”>... </FORM>

Exemplo<FORM METHOD=“POST” ACTION=

mailto:[email protected] name=“formCli”> ...</FORM>

mailto:[email protected]

Por dentro da tag Form

É possível inserir qualquer elemento HTML básico numa tag FORM (textos, botões, quadros, relações,…) mas, sobretudo, é interessante inserir elementos interativos.

Estes elementos interativos são : Campos INPUT ,TEXTAREA e SELECT

Tag Form : campo input

A Tag INPUT é a tag essencial dos formulários, pois permite criar um bom número de elementos “interativos”.

A sintaxe desta tag é a seguinte: <INPUT type=“tipo" value=“valor padrão"

name=“nome do elemento"> Atributo name é essencial pois ele permite a manipulação

do campo nos javascript ou servlets (linguagem script). Atributo value permite definir um valor padrão para o

campo. O atributo type permite definir o tipo de elemento que

será exibido no form. A seguir veremos os tipos possíveis.

Form: input: type=“tipos”

Text trata-se de um campo que permite receber uma linha de texto. A dimensão do campo pode ser definida através do atributo

size e a quantidade máxima do texto (caracteres) pode ser definido através do atributo maxlength.

Exemplo

<form id="formCLiente" name="formCli" action="" method="post">Nome do cliente

<input type="text" name="campoNome" value="<digite aqui>" size="40" maxlength="30"></form>

No lado do servidor:Variável chama “campoNome”Seu conteúdo será o valor digitado no campo


hidden trata-se de um campo escondido.

Ele não está visível no formulário, porém, será enviado para o servidor.

Permite definir um valor fixo (que não será informado pelo usuário) para uma variável.

Exemplo

No lado do servidor:Variável chama “faculdade”Seu conteúdo será ‘unipac araguari’

<form id="formCLiente" name="formCli" action="" method="post"><input type="hidden" name="faculdade" value="unipac araguari">

</form>


Password trata-se de um campo de texto utilizado para digitar senhas.

A medida que o usuário digita alguma senha, o mesmo apresenta asteriscos ao invés do caracter que foi pressionado.

Exemplo

No lado do servidor:Variável chama “senha”Seu conteúdo será o valor digitado no campo

<form id="formCLiente" name="formCli" action="" method="post">Informe a senha de acesso ao aluno WEB:

<input type="password" name="senha" size="20" maxlength="20"> </form>


Checkbox Trata-se de um campo de seleção, ativo (checked) ou

inativo(unchecked). Quando ativo, assume o valor que estiver no campo value. Quando inativo, este campos se torna inexistente, portanto não

será enviado para página que trata os dados. Mais de um campo poderá ser selecionado (cada campo

possuirá o mesmo nome, porém, valores “value” diferentes). Quando ativo, no momento que os dados são enviados para o

servidor, para serem tratados, o formato name/value é enviado. O servidor acessa o valor (value) deste campo através do seu

nome (name) O servidor recebera um array (identificado pelo name)

contendo os valores dos campos que foram selecionados.


Exemplo de Checkbox <form id="formCLiente" name="formCli" action="" method="post">Selecione as disciplinas que cursa:

<input type="checkbox" name="disciplina" value="Portugues" checked="checked"> Português

<input type="checkbox" name="disciplina" value="Matemática"> Matemática<input type="checkbox" name="disciplina" value=“111"> Programação

</form>

No lado do servidor:Variável chama “disciplina”Seu conteúdo será [Portugues, 111]

Atenção: o atributo “checked” traz o elemento selecionado por padrão.


Radio Trata-se de um campo de seleção.

Quando selecionado, assume o valor que estiver no campo value.

Poderá ter mais de uma opção de seleção, porém, somente uma opção pode ser selecionada (cada campo possuirá o mesmo nome, porém, valores “value” diferentes).

Quando selecionado, no momento que os dados são enviados para o servidor, para serem tratados, o formato name/value é enviado. O servidor acessa o valor (value) deste campo através do seu

nome (name) O servidor recebera uma única variável identificada pelo

“name” contendo o valor do campo que foi selecionado.


Exemplo Radio<form id="formCLiente" name="formCli" action="" method="post">Selecione o seu sexo:

<input type="radio" name="sexo" value="M" checked="checked"> Masculino<input type="radio" name="sexo" value="Feminino" > Feminino

</form>

No lado do servidor:Variável chama “sexo”Seu conteúdo será M

Atenção: o atributo “checked” traz o elemento selecionado por padrão.


Submit Exibe o botão responsável por enviar os dados do

formulário para o servidor que irá tratá-la. O botão submit dispara o evento responsável por enviar

os dados que foram digitados no formulário para o servidor que irá tratá-los.

<form id="formCLiente" name="formCli" action="" method="post"><input type="submit" name="enviarDados" value="Cadastrar

cliente“checked="checked" ></form>

Atenção: o atributo “checked” indica que: Se a tecla <ENTER> for pressionada, o botãoserá ativado.


Reset Este campo permite que os dados do formulário

retornem ao seus valores iniciais.<form id="formCLiente" name="formCli" action="" method="post">

<input type="reset" name="limpar" value="Limpar campos"> </form>


Button Botões do tipo button não têm comportamento pré-

definido, sendo usados apenas em scripts no lado cliente.

<form id="formCLiente" name="formCli" action="" method="post"><input type=“button" name=“exibirSenha” value=“Mostrar senha" >

</form>

Atenção: o botão está associados a eventos no lado do javascript.


File O campo de entrada de arquivo permite ao usuário

especificar um arquivo local cujo conteúdo será enviado junto com o formulário submetido, como upload. Para isso, o elemento form do formulário que o contém

deve especificar os atributos method="POST" e enctype="multipart/form-data".<form id="formCLiente" name="formCli" action="" method="post"><input type="file" name="arquivo“ />

</form>

Form:select

A tag select exibe o campo de seleção baseado em uma lista previamente definida.

Sintaxe:<select name=“nome” size=“10”>

Quem define o nome (name) do controle é o elemento select, enquanto cada valor (value) é dado por um option.

O rótulo de cada opção é dado pelo texto entre as tags de abre e fecha option.

O atributo size define o número de opções (linhas) exibidas da lista.

A exibição da barra de rolagem é automática e fica a cargo do browser.

O atributo selected define uma opção pré-selecionada (inicialmente "ligada"). É recomendado sempre definir explicitamente o que estará pré-selecionado, para evitar ambigüidade de comportamento em diferentes browsers.

Form:select

Exemplo select<form id="formCLiente" name="formCli" action="" method="post"><select name="cidade" size="1"> <option value="1" selected="selected">Ipatinga</option> <option value="Udia">Uberlândia</option> <option value="araguari">Araguari</option> <option value="SP">São Paulo</option></select></form>

<form id="formCLiente" name="formCli" action="" method="post"><select name="cidade" size="1"> <option value="1" selected="selected">Ipatinga</option> <option value="Udia">Uberlândia</option> <option value="araguari">Araguari</option> <option value="SP">São Paulo</option></select></form>’

A lista com o atributo multiple (multiple="multiple") pode ter mais de uma opção selecionada, normalmente pressionando-se CONTROL e/ou SHIFT ao selecionar outro elemento.

Form:textarea

O controle textarea é um campo de texto multi-linha. Os atributos rows e cols definem o número de linhas de altura e o de

"caracteres" de largura, respectivamente. O atributo wrap define se a mudança de linha será automática durante

a digitação ("on"), ou somente quando for pressionado ENTER ("off").

Todos os elementos do formulário podem ter atributo:- readonly (readonly="readonly" somente leitura, o elemento é enviado para o servidor) - disabled (disabled="disabled" desabilitado, o elemento não será enviado para o servidor).

<form id="formCLiente" name="formCli" action="" method="post">Observações:<textarea name="parea" rows="5" cols="60" wrap="off"></form>

DreamWeaver - Formulários

Para trabalhar com formulário no DreamWeaver, primeiramente inserimos a tag FORM. DreamWeaver 8

Menu InsertForm FormOs elementos do formulário

Menu InsertForm Form Text Field TextArea Button ...

Referências bibliográficas

http://pt.kioskea.net/contents/html/htmlform.php3

http://www.mhavila.com.br/topicos/web/controles.html



Trabalho – Protocolos

Desenvolva uma pesquisa que apresente os principais conceitos dos assuntos abaixo: Protocolo HTTP Protocolo HTTPs Protocolo FTP

O trabalho deverá seguir o layout de artigos.• Ponto: 5 pts.• Trabalho em dupla.• Data da entrega: 25/08/2010

OBS: O CONTEÚDO DO TRABALHO SERÁ COBRADO EM PROVA.• Tópicos que deverão estar presente: • Com qual intuito foi criado? Pra que serve? Onde é utilizado?

Como é utilizado? Exemplo de uso.• Entre outros.

Trabalho – Formulários

Desenvolva um formulário que tenha os campos apresentados na imagem a seguir. Imagem Formulário

Atenção, o formulário não deverá ter formatação. O formulário deverá ter todos os campos existentes na

imagem. Todos os elementos do formulário deverão ter sua

própria identificação. Data da entrega: 25/08/2010 Trabalho individual Valor: 3 pontos O trabalho deverá ser apresentado em sala.

UNIPAC – ARAGUARI CAMPUS – IX PROF. EVERTON HIPÓLITO DE FREITAS Formulário HTML.

Documents

Transcript of UNIPAC – ARAGUARI CAMPUS – IX PROF. EVERTON HIPÓLITO DE FREITAS Formulário HTML.