| Home | Importante! | História | Tutorial | HTML | Glossário | Faqs | Buscadores | Sinapse |
| Fóruns | ASCII | Cores | JavaScript | CSS | Links | Novidades | Browsers | Conclusão |
|
Formulários |
|
Define ambiente para processamento de formulários. Os formulários devem ser criados em paralelo com o programa ou roteiro que o servidor HTTP utilizará para processar as informações enviadas.
Pode conter: cabeçalhos, listas, blocos, tabelas, <SELECT>, <INPUT>, <TEXTAREA>
Utilizado dentro de: <BODY>,<DD>, <LI>, <BLOCKQUOTE>, <DIV>, <CENTER>Atributos::
action="..."
Obrigatório, a URL do roteiro CGI que processará os dados enviados no formulário.method="GET" ou "POST"
Obrigatório, onde: method="GET" os dados serão enviados para o programa "survey". No method="POST" o programa de navegação passa os dados para o programa "query".<FORM ACTION="http://www.dsc.ufpb.br/cgi-bin/survey/" METHOD="POST">
<FORM ACTION="http://www.dsc.ufpb.br/cgi-bin/query/" METHOD="GET">enctype=tipo
Opcional, define a forma de codificação do formulário.
Valor default é "application/x-www-form-urlencoded"Aqui está um bom exemplo da aplicação do comando <FORM> com alguns dos seus atributos (que destaquei em negrito). Estes são os parâmetros da Ferramenta de Busca do Cadê?, gentilmente cedido a este Tutorial.
Sintaxe:
<FORM METHOD=GET ACTION="http://busca.cade.com.br/scripts/engine.exe">
<CENTER><HR>
<b>Consulta ao Cadê? </b><input SIZE=30 maxlength=30 NAME=p1>
<input type=hidden name=p2 value=1><input type=hidden name=p3 value=1>
<INPUT TYPE=SUBMIT VALUE=Busca>
<HR></CENTER>
</FORM>Agora vamos fazer um teste: Insira uma palavra e vê se ele está funcionando.
Mais exemplos com a aplicação de <FORM> estão em Botões
Habilita a entrada de dados que o usuário digita através de textos, botões de rádio ou listas de opções (checklists).
Utilizado dentro de: <FORM>
Atributos:
type="text" ou "password"
Habilita a entrada de dados através de texto. Se o valor de type for password, o texto digitado não aparecerá na tela mas em seu lugar aparecerão asteriscos ou marcadores. O "password" aceita dados do tipo caractere.Outros Atributos:
name="..."
Contém nome da variável que receberá o texto;size="..."
Tamanho da janela para a entrada de texto em número de caracteres (default = 20 caracteres);maxlength="..."
Comprimento máximo permitido para entrada de texto (se maxlength for maior que size, o texto deve rolar dentro da janela;value="..."
Conteúdo inicial da janela (o que vai aparecer escrito dentro dela).submit
Este comando cria um botão que, ao ser acionado, envia os dados para o servidor, conforme o endereço especificado no comando "form".value="legenda"
Define a legenda do botão.Exemplo:
<form action="url"method="post">Por favor, digite seu nome
<input type="texto" size=20 name="seunome">
<input type="submit" value="Enviar dados">
</form>
type="radio"
Este comando cria campos do tipo botão de opção, que são associados a uma única variável. A escolha de um campo desabilita os demais.
Outros Atributos:
name="..."
Nome do conjunto;value="..."
Nome do elemento do conjunto.checked
Opcional, marca o botão como previamente selecionado (default é o primeiro da lista); O conjunto de botões de rádio deve ter o mesmo campo name e campo value diferentes.type="checkbox"
Habilita a entrada de dados através de listas de opções (possibilita a escolha de múltiplos itens em um conjunto).Outros Atributos:
name="..."
Nome do conjunto (ou do elemento, se houver campo value);value="..."
Nome do elemento.checked
Marca a opção como previamente selecionada (default é nenhuma seleção).type="reset"
Cria um botão que, ao ser clicado, apaga o conteúdo de todos os campos.Exemplo:
<form action="url"method="post">Escolha seu sabor:
<input type="checkbox" name="sabores" value="chocolate" Checked> Chocolate
<input type="checkbox" name="sabores" value="Creme"> Creme
<input type="checkbox" name="sabores" value="Morango"> Morango
<input type="reset">
</form>
type="hidden"
Define um campo invisível, cujo conteúdo é enviado junto com os demais. Utilizado para passar informação nos campos name e value entre documentos sem exibi-los.Outros Atributos:
name="..."
Nome da variável.value="..."
Valor da variável;type"image"
Recebe as coordenadas de um ponto selecionado em imagem incluída no documento para processamento pelo formulário.
Outros Atributos:
name="..."
Nome da variável (que receberá as coordenadas x,y);src="..."
URL onde se encontra a imagem;align="..."
Alinhamento da imagem em relação ao texto. align pode assumir os valores top, bottom (default) ou middle da mesma forma que no elemento <img>.Habilita a entrada de dados através da seleção de itens limitados em um menu de opções.
Pode conter: <option>
Utilizado dentro de: <FORM>Atributos:
size="número"
Este parâmetro permite determinar um tamanho fixo para a lista, independente da quantidade de itens que ela possui. No exemplo abaixo determinei que a lista exibirá 5 campos, embora ela tenha 8.Exemplo:
<select name="teste" size=5>
<option>campo 1
<option>campo 2
<option>campo 3
<option>campo 4
<option>campo 5
<option>campo 6
<option>campo 7
<option>campo 8
</select>
multiple
Permite seleção de mais de uma opção. Para selecionar vários itens, mantenha a tecla Ctrl pressionada enquanto clica sobre os itens desejados.Exemplo:
<select name="teste" size=5 multiple>
<option>leite
<option>sal
<option>arroz
<option>farinha
<option>cebola
<option>açucar
<option>feijão
<option>óleo
</select>Especifica as opções do menu acionado através de SELECT. O rótulo de fechamento é opcional e geralmente não é utilizado.
Pode conter: texto simples.
Utilizado dentro de:<SELECT>Atributos:
selected
Marca a opção selecionada;value="..."
Valor da variável a ser enviado caso esta opção seja selecionada (texto contido no elemento é default).Exemplo:
Ocupação:
<select name="cargo">
<option>Analista Sênior
<option selected>Programador Visual Basic
<option>Programador HTML
<option>Analista de Sistemas
</select>Ocupação:
Define uma área bidimensional editável, para a edição e criação de texto.
Pode conter: texto simples
Utilizado dentro de: <FORM>
Atributos:
name="..." Nome da variável;
rows="..." Número de linhas exibidas;
cols="..." Número de colunas exibidas. A área exibida pode conter barras de rolamento para acomodar textos maiores.
Exemplo:
Digite aqui suas críticas ou comentários:
<textarea name="campo1" rows=5 cols=50> </textarea>Digite aqui suas críticas ou comentários:
Um recurso prático para alinhar os campos do formulário é o comando <pre>. Este comando formata a fonte com tamanho fixo, possibilitando usar o recurso do espaço para compensar o tamanho das palavras. Nos exemplos abaixo segue primeiro um formulário simples desalinhado, depois, o mesmo formulário alinhado com a compensação de espaços que o comando <pre> possibilita colocar.
Exemplos;
Digite seu nome: <input type="text" size=60 name="seunome">
Digite seu endereço: <input type="text" size=60 name="seuendereco">
Sua profissão: <input type="text" size=40 name="profissao">Digite seu nome:
Digite seu endereço:
Sua profissão:
<pre>
Digite seu nome: <input type="text" size=60 name="seunome">
Digite seu endereço: <input type="text" size=60 name="seuendereco">
Sua profissão: <input type="text" size=40 name="profissao">
</pre>Digite seu nome: Digite seu endereço: Sua profissão:Este comando passou a operar na versão 4 do HTML. Ele cria uma moldura com um título em torno de um campo, deixando-o mais incrementado.
<legend>título...</legend>
Especifica um título para a moldura que envolve os campos.accesskey=tecla
Especifica uma tecla que, quando pressionada juntamente com Alt, move o cursor para o campo correspondente.
| Home | Importante! | História | Tutorial | HTML | Glossário | Faqs | Buscadores | Sinapse |
| Fóruns | ASCII | Cores | JavaScript | CSS | Links | Novidades | Browsers | Conclusão |