HTMLProfessora: Hanna Sérgia Sousa de MagalhãesE-mail: hanna_magalhaes@yahoo.com.br

Aula 06 - HTMLFormulários Eletrônicos

Formulários Eletrônicos

Você vai aprender a criar "Formulários Eletrônicos", que permitem um usuário do Web submeter informações para o provedor do serviço.Existem vários tipos de campos de entrada, como:• campos de entrada de texto• menus de múltipla escolha ou escolha única• botões sim-ou-não• botões para submissão ou limpeza de formulário

Formulários Eletrônicos• Cada uma destes campos tem funcionalidade própria e você

vai aprender em que situação utilizálos em seus formulários.• Se você já conhece HTML, as marcações utilizadas em

formulários seguem a mesma convenção, e portanto, será fácil aprender.

Formulários Eletrônicos• Um formulário é uma área que pode conter elementos de

formulário.• Os elementos de formulário são elementos que permitem o

usuário entrar informação (como campos de texto, campos de área de texto, menus drop-down, botões radiais, caixas de seleção, etc.) em um formulário.

• Um formulário é definido pela tag <form>.• EX: <FORM>

<INPUT><INPUT>

</FORM>

Principais atributos do marcador <FORM>1 – NAME, METHOD e ACTION<FORM NAME=”nome do formulário” METHOD=”valor” ACTION=”tratador do formulário”>elementos do formulários</FORM>• NAME: Especifica o nome do formulario. Util em casos de validacao dos

campos, por exemplo, quando se utiliza uma linguagem de scripts como JavaScript.

• METHOD: Metodo que define como os dados serao transmitidos para o programa que ira processa-los. Devem ter valores GET ou POST, sendo que a diferenca entre estes dois valores esta no modo como os dados sao empacotados. Normalmente o programa que sera utilizado para processar o formulario ja especifica o valor para o atributo METHOD.

• ACTION: Indica o endereco do programa que recebera os dados do formulario.

• Exemplo:• <FORM NAME=”maladireta” METHOD=”post”

ACTION=”maladireta.asp”>

Marcadores relativos aos campos de formulário• Utilizado para indicar um novo campo de formulario e diferenciado

pelo seu tipo.1 – INPUT, TYPE, NAME, VALUE, MAXLEGNGHT e CHECKED• <INPUT TYPE=”tipo” NAME=”nome” VALUE=”valor” SIZE=”tamanho

em pixels”• MAXLENGHT=”tamanho maximo em pixel”>• INPUT: Especifica um campo de entrada de dados.• TYPE: Atributo mais importante do marcador por definir o tipo de

elemento a ser inserido no formulario.• NAME: Nome do elemento, Util em casos de validacao de campos, por

exemplo, quando se usa uma linguagem de scripts como JavaScript.• VALUE: Valor que pode ser predefinido para o campo.• MAXLENGHT: Comprimento maximo do campo.• CHECKED: Em casos de caixas de checagem, predefine como checada.

Codificação básica• Como vimos, um formulário começa com a marcação <FORM>

e termina com </FORM>. Outros itens devem ser especificados:

• Primeiro, o formulário precisa saber como enviar a informação para o servidor. Existem dois métodos, GET e POST.

METHOD="GET"• A maioria dos documentos HTML são recuperados a partir da

requisão de uma única URL ao servidor. Assim, um formulário que utilize este método, envia toda sua informação ao final da URL ativada.

Codificação básica

METHOD=“POST"• Este método transmite toda a informação fornecida via

formulário, imediatamente após a URL ativada. Ou seja, quando o servidor recebe uma ativação de um formulário utilizando POST ele sabe que precisa continuar "ouvindo" para obter a informação. Este é o melhor método.

Codificação básica• Segundo, o formulário precisa saber para onde enviar a

informação. Esta é a URL sendo ativada a partir do formulário, e ela é referenciada através da marcação ACTION. Esta URL em geral aponta para um script CGI que irá receber e decodificar os resultados. Lembre-se que se você está referenciando um script que reside no mesmo servidor do formulário, você não precisa incluir a URL completa.

ACTION="/cgi-bin/post-query" para um script no seu servidorACTION="http://www.cr-df.rnp.br/cgi-bin/post-query" para um script no servidor do CR/DF

Codificação básica• Após você construir estas marcações, seu formulário geralmente

terá a seguinte estrutura:<FORM METHOD="POST" ACTION="/cgi-bin/post-query">Marcações de campos de entrada e HTML em geral</FORM>• Observe que este formulário utiliza o método POST e envia as

informações digitadas para um script local chamado post-query no diretório /cgi-bin do servidor.

• Outra informação importante: cada marcação de entrada em um formulário tem uma opção NAME associada, de tal forma que o script saiba qual o nome, isto é, como chamar cada valor digitado.

• Certamente você pode definir mais de um campo de entrada textual ou menu dentro de um formulário, mas certifique-se de que cada um possui um nome diferente.

Entrada (Input)• A tag de formulário mais usada é a tag <input>. O tipo de

input é especificado com o atributo type (tipo). Os tipos de input mais usados são explicados a seguir.

• O valor TEXT no atributo TYPE de um INPUT indica que o campo sera de texto, ou seja, um campo onde o usuario podera entrar com dados.

Campos de Texto• Os campos de texto são usados quando você quer que o

usuário digite letras, números, etc. em um formulário.• Ex: <form>Primeiro nome:<input type="text" name="firstname"> <br>Último nome:<input type="text" name="lastname"></form>

Obs: observe que em muitos navegadores, o comprimento do campo de texto é de 20 caracteres por padrão (default).

Botões Radiais• Botões Radiais são usados quando você quer que o usuário

selecione uma entre uma quantidade limitada de escolhas.• Ex:<form> <input type="radio" name="sex" value="male"> Masculino <br> <input type="radio" name="sex" value="female"> Feminino </form>

Observe que somente uma opção pode ser escolhida.

Caixas de Seleção• As Caixas de Seleção são usadas quando você quer que o

usuário selecione uma ou mais opções de uma quantidade limitada de escolhas.

• Ex: <form> <input type="checkbox" name="bike">Eu tenho uma bicicleta <br> <input type="checkbox" name="car"> Eu tenho um carro </form>

O Atributo Ação do Formulário (Form's Action) e o Botão Enviar (Submit)• Quando o usuário clica no botão "Enviar", o conteúdo do formulário

é enviado para outro arquivo. O atributo de ação do formulário define o nome do arquivo para o qual enviar o conteúdo. O arquivo definido no atributo action geralmente faz algo com a entrada recebida.

• Ex: <form name="input" action="html_form_action.asp" method="get">Nome do Usuário:<input type="text" name="user"><input type="submit" value="Enviar"></form>

Se você digitar alguns caracteres no campo de texto acima, e clicar no botão Enviar", você irá enviar a sua entrada para a página chamada "html_form_action.asp". Esta página irá mostrar-lhe a entrada recebida.

Caixa drop down simples• Este exemplo demonstra como criar uma caixa drop down

simples numa página HTML. A caixa drop-down é uma lista selecionável.

Ex:<form><select name="cars"><option value="volvo">Volvo<option value="saab">Saab<option value="fiat">Fiat<option value="audi">Audi</select></form>

Área de texto• Este exemplo demonstra como criar uma área de texto (um controle de

entrada de texto multi-linhas). Um usuário pode escrever texto na área de texto. Numa área de texto você pode escrever uma quantidade ilimitada de caracteres.

• Ex: <p>Este exemplo não pode ser editadoporque nosso editor usa uma textareapara a entrada de dados, e o seunavegador não permite uma área detexto dentro de uma área de texto.</p>

<textarea rows="10" cols="30">O gato estava brincando no jardim.

Criar um botão• Este exemplo demonstra com criar um botão. No botão você

pode definir o seu próprio texto.• Ex:<form><input type="button" value="Oi mundo!"></form>

Conjunto de campo em torno dos dados• Este exemplo demonstra como desenhar uma borda com um título em torno

dos seus dados.• Ex:<fieldset><legend>Informações de saúde:</legend><form>Altura <input type="text" size="3">Pêso <input type="text" size="3"></form></fieldset>

• OBS:• Se não houver borda em torno do formulário de entrada, o seu navegador é

muito antigo.

Formulário com Senha• <INPUT TYPE=”PASSWORD”>• Para o valor PASSWORD (senha) no atributo TYPE aplicam-se todos os

atributos do tipo TEXT exceto que todas as letras digitadas aparem com um asterisco.

• Exemplo:• <FORM>• <p>Digite sua senha:<INPUT TYPE=”PASSWORD” NAME=”Senha”

SIZE=”8” MAXLENGHT=”8”></p>• </FORM>O atributo SIZE configura o tamanho do campo e e baseado

no numero de caracteres.

• Este valor nao limita o tamanho do campo, somente define o tamanho em que sera mostrado na pagina. Quem define o numero maximo de caracteres que podem ser digitados e o atributo MAXLENGHT, que e opcional.

Caixa de texto com várias linhas• <TEXTAREA NAME=”nome” ROWS=”numero de linhas”

COLS=”números de colunas”></TEXTAREA>• O marcador TEXTAREA permite definir um campo de texto com

varias linhas.• ROWS: define o numero de linhas da caixa de texto.• COLS: define quantos caracteres (colunas) cada linha possui.• NAME: define o nome da caixa de texto.• Exemplo:• <FORM>• <p>Entre com seu comentário:</p>• <p><TEXTAREA NAME=”comentario” ROWS=”3”

COLS=”20”></TEXTAREA>• </p>• </FORM>

Tags de FormulárioTag Descrição<form> Define um formulário para entradas do usuário<input> Define um campo de entrada<textarea> Define uma área de texto (um controle de entrada

de texto multi-linhas)<label> Define um rótulo para um controle<fieldset> Define um conjunto de campos<legend> Define um título para um conjunto de campos<select> Define uma lista selecionável (uma caixa drop-down)<optgroup> Define um grupo de opção<option> Define uma opção em uma caixa drop-down<button> Define um botão para pressionar

Vamos exercitar....