A linguagem HTML também permite que o cliente (navegador) interaja com o servidor, preenchendo campos, clicando em botões e passando informações. Por exemplo, eu tenho um formulário em meu site onde eu peço a todos os visitantes que dêem suas opiniões. Essas informações devem ser tratadas por programas, denominados scripts, que podem armazená-las para uma posterior utilização. Os scripts podem ainda retornar um outro documento HTML, uma URL, ou algum outro tipo de dado para o cliente.
O elemento FORM, da linguagem HTML, é justamente o responsável por tal interação. Ele provê uma maneira agradável e familiar para coletar dados do usuário através da criação de formulários com janelas de entrada de textos, botões, etc.
É preciso ter em mente que o FORM coleta dados, mas não os processa. São os scripts que entendem os dados, como mencionado. É aí que entra a necessidade da interface ASP ou PHP. Tal interface permite que o servidor se comunique com o script que vai atuar sobre essas informações, retornando os resultados para o navegador.
A confecção de scripts exige que se aprenda uma linguagem de programação chamada ASP ou PHP
CONSTRUINDO FORMULÁRIOS COM O FORM
Para fazer formulário, você tem que colocar as TAGs <form></form>. Todos os outros comandos devem ficar dentro dessas TAGs. Ok?!
ATRIBUTOS PARA FORM
O elemento FORM pode conter dois atributos que determinaram para onde será mandada a entrada do FORM. Vejam como eles são:
GET
Esse atributo indica totalmente como o dado é passado para o script ou programa definido no atributo ACTION.
POST
Passa os dados para a entrada padrão do sistema operacional.
Vale a pena lembrar, que será mostrado, abaixo, um exemplo completo, de como fazer sua página com formulários. Também será dado um endereço, de um servidor, que processa os dados e os retorna via e-mail. Aí poderá ser lido normalmente. Agora será explicado como colocar os campos de dados, mas se não estiver entendendo, copie o exemplo, e só altere os dados, com o seu nome, e suas informações.
Criando um formulário
Exemplo:
<form action="http://www.servidor1.com.br/bancodedados.php" method="post">
...
</form>
Obs: existe o method="get", mas o method="post" é o mais usado. Os atributos action e method são utilizados em outras linguagens de programação tais como ASP e PHP que serão ensinados em outros capítulos.
INPUT
A TAG <INPUT> especifica uma variedade de campos editáveis dentro de um formulário. Ele pode receber diversos atributos que definem o tipo de mecanismo de entrada (botões, janelas de texto, etc.), o nome da variável associada com o dado da entrada, o alinhamento e o campo do valo mostrado. O atributo mais importante do INPUT é o NAME. Ele associa o valor da entrada do elemento. Por exemplo, quando você for receber os dados, já, processados, irá vir o value = resposta dada pelo visitante. Outro atributo importante é o TYPE. Ele determina o campo de entradas de dados. Veja como se usa este atributo:
<input type="text" name="nome">
Para mudar o tamanho, da janela padrão, você tem que colocar o comando size. Por exemplo:
<input type="text" name="nome" size="8"> (ou número desejado)
Outro comando importante é o VALUE. Ele acrescenta uma palavra digitada no comando à janela. Por exemplo:
<input type="text" name="nome" size="8" value="texto">
Olhe como ficaria:
TYPE="TEXT"
Inserindo uma caixa de texto (text)
Exemplo:
<form>
Campo 1: <input type="text" name="campo1"> <br />
<!-- O primeiro campo permite a digitação de qualquer
quantidade de caracteres em uma caixa com tamanho de
20 caracteres. -->
Campo 2: <input type="text" name="campo2" size=5 maxlength=10> <br />
<!-- O segundo campo possui uma caixa com tamanho 5 e permite a digitação de até 10 caracteres -->
Campo 3: <input type="text" name="campo3" maxlength=5> <br />
<!-- O terceiro campo mostra uma caixa com tamanho padrão e permite a digitação de 5 caracteres -->
Campo 4: <input type="text" name="campo3" value="Isto é um texto">
<!-- O último campo pode escrever "Isto é um texto" dentro da caixa de texto sem precisar digitá-lo -->
</form>
Resultado
TIPOS DE ELEMENTOS TYPE
Você pode fazer várias coisas com o elemento TYPE. Por exemplo, para ser um campo de senha, que quando digitado, apareça o símbolo "*", ao invés das letras, você deve escrever o seguinte:
<input type="password" name="nome" size="8">
TYPE="PASSWORD"
Este comando serve para fazer um campo de senhas! Quando a pessoa digitar, aparecerá o sinal de "*"! O comando é:
<input type="password" name="senha" maxlength="6">
Inserindo uma senha (password)
Esse comando é idêntico ao comando caixa de texto. Sua única diferença é que, no lugar dos caracteres digitados, aparece um asterisco. Como o próprio nome indica, ele é ideal para a digitação de senha e palavras-chave, pois impede a visualização do texto que está sendo digitado.
Exemplo:
<form>
Digite uma senha: <input type="password" name="senha" size=5 maxlength=5>
</form>
Resultado:
TYPE="RADIO"
Quando o usuário deve escolher uma resposta em uma única
alternativa, de um conjunto, utiliza-se o radiobutton's. Um exemplo
típico do uso de tais botões, é cuja resposta pode ser SIM ou NÃO. É
preciso que todos os rádios buttons sejam de um mesmo grupo, ou seja,
referentes à mesma pergunta, tenham o mesmo atributo NAME. Para esse
tipo de entrada, os atributos NAME e VALUE, são necessários. Veja a
seguir:
<p>
<input type="radio" name="voce_gostou_dessa_home_page" value="sim">sim<br />
<input type="radio" name="voce_gostou_dessa_home_page" value="nao">não
</p>
Repare:
Inserindo botão de opção (radio)
Exemplo:
<form>
Estado civil: <br />
<input type="radio"
name="estado" value="solteiro" checked> Solteiro <br />
<input type="radio" name="estado" value="casado"> Casado <br />
<input type="radio"
name="estado" value="divorciado"> Divorciado <br />
<input type="radio" name="estado" value="viuvo"> Viúvo
</form>
Resultado:
TYPE="CHECKBOX"
Esse comando é válido quando apenas uma resposta, é esperada. Mas nem sempre está é a situação...O tipo CHECKBOX provê outros botões através dos quais mais de uma alternativa, pode ser escolhida.
Definição dos checkboxs:
<p>
<imput Type="checkbox" name="Chrome" value="goo">Google Chrome<br />
<imput Type="checkbox" name="Explorer" value="exp">Internet Explorer<br />
<imput Type="checkbox" name="Firefox" value="fire">Firefox<br />
</p>
Veja o resultado:
Inserindo caixa de seleção (checkbox)
Exemplo:
<form>
<p>
Linguagem de programação<br />
<input
type="checkbox" name="web1" value="html" checked> HTML<br />
<input type="checkbox" name="web2" value="css" checked> CSS<br />
<input
type="checkbox" name="web3" value="javascript"> Javascript<br
/>
<input type="checkbox" name="web4" value="dhtml"> Dhtml
</p>
</form>
Resultado
SELECT
Embora os usuários não precisem digitar sempre suas respostas,
mostrar cada opção através de botões consegue um bom espaço, e
facilidade. Veja como ele funciona:
<select>
<option>opção1</option>
</select>
Veja o resultado:
Inserindo caixa de listagem (select)
Exemplo:
<form>
Digite capital:
<select name="capital">
<option> Rio de Janeiro </option>
<option selected> São Paulo </option>
<option> Belo Horizonte </option>
<option> Vitória </option>
</select>
</form>
Resultado:
Usando os parâmetros size e multiple
O parâmetro size permite a especificação de um tamanho fixo para a lista, independente da quantidade de itens que ela possui.
Obs: para selecionar dois ou mais itens da lista pressione shift ou ctrl e selecione o item com o mouse.
O parâmetro multiple permite que diversos itens sejam selecionados
Exemplo:
<form>
Escolha seu nome:
<select name="nomes" multiple size=8>
<option> João</option>
<option>Maria</option>
<option selected> Marcos</option>
<option> Sônia </option>
<option selected> Francisco</option>
<option> Joselma </option>
<option selected> Antônio</option>
<option> Francisca </option>
<option> Thiago</option>
<option> Romeu</option>
</select>
</form>
Resultado:
TEXTAREA
Para se limitar o tamanho do campo mostrado na tela, faz-se o uso dos atributos COLS e ROWS que especificam, respectivamente, o número de colunas e linhas que se deseja mostrar para o usuário. O atributo NAME é
obrigatório, e especifica o nome da variável, que será associada à
entrada do cliente (navegador). O atributo value não é aceito nesse
elemento, mas você pode colocar já um texto da seguinte maneira. Veja
como ele é colocado:
<textarea name="nome" cols="20" rows="3">texto</textarea>
Inserindo uma área de texto (textarea)
rows - especifica a altura, ou seja, a quantidade de linhas que a caixa deve ter.
cols - especifica a largura, ou seja, a quantidade de caracteres ou colunas que a caixa deve ter.
Exemplo:
<form>
<textarea name="campo1" rows="4" cols="20">
Digite seus comentários
</textarea>
</form>
Resultado:
TYPE="HIDDEN"
Inserindo um texto oculto (hidden)
Os campos ocultos não são apresentados no formulário. Eles ficam invisíveis na apresentação do navegador. Se alguém decidir consultar o código fonte Html da sua página estes campos serão apresentados.
Exemplo:
<input type="hidden" name="personagem" value="Bob Esponja Calça Quadrada">
TYPE="FILE"
Fazendo um upload de seus arquivos
Se você quiser enviar a sua foto para o seu álbum de fotografia, esse comando é próprio para isto. Este comando envia para o servidor qualquer tipo de arquivo.
Exemplo:
<input type="file" name="foto" value="envie sua foto aqui">
Resultado:
TYPE="SUBMIT"
Esse é o botão que submete os dados do formulário quando
pressionados, ou seja, possibilitam, o envio, dos dados para o script
que vai tratá-los. Veja como se adiciona o botão:
<input type="submit" value="enviar">
Veja como ficará:
Enviando os dados do formulário - O botão submit
Para enviar os dados do formulário para o servidor a linguagem html possui o botão submit que ao ser pressionado, acessa a URL do programa script especificado no comando form e envia os dados de cada campo do formulário.
Veja o comando enviar abaixo
<input type="submit" value="Enviar">
TYPE="RESET"
No caso dos botões RESET, quando o botão é clicado,
ele automaticamente limpa todos os campos já preenchidos no formulário,
voltando à situação inicial.
<input type="reset" value="Limpar">
Veja como ficará:
Apagando o conteúdo de todos os campos
Se você inserir novas informações para os campos do formulário, terá de apagar e digitar o texto nos campos de digitação. Por meio do botão apagar campo, você pode apagar e restabelecer o valor padrão para todos os campos do formulário de uma única vez.
Veja o comando apagar campo abaixo:
<input type="reset" value="apagar">
Veja o exemplo com os campos enviar (submit) e apagar (reset) dentro de um formulário:
<form action="http://www.meuservidor.com/formulário.php" method="post">
Digite o seu nome neste campo: <br />
<input type="text" name="nome" size=30 maxlength=50> <br />
Pressione o botão para <br />
<input type="submit" value="Enviar">
ou <input type="reset" value="Apagar campo">
</form>
Resultado
TYPE="BUTTON"
Se não quero enviar os dados do formulário para o servidor, mas que os dados fiquem no navegador usamos o botão de comando (button), este botão só funciona quando utilizo uma outra linguagem, o Javascript, sem ele o botão não funciona.
Inserindo um botão de comando (button)
Exemplo:
<input type="button" name="botao1" value="Botão de comando">
Resultado:
EXEMPLO COMPLETO
Abaixo, temos um exemplo completo de uma página com um formulário.
Código Fonte |
<form action="http://www.nomedaempresa.com.br/formulario.php" method="post"> <input type="Hidden" name="TipoDeFormulario" value="E-mail"> <input type="Hidden" name="Destino" value="nome@e-mail.com.br /"> <input type="Hidden" name="Descricao" value="Dados do Formulário de HTML"> Qual o seu nome?<input type="Text" name="Nome" size="40"><br /> Qual o seu E-mail?<input type="Text" name="E_mail" size="40"><p> Você gostou da minha Home Page?<input type="Radio" name="Gostou" value="Sim">sim <input type="Radio" name="Gostou" value="Mais ou Menos"CHECKED> Mais ou Menos <input type="Radio" name="Gostou" value="Não">Nem um pouco!<p> Qual a página que você mais gostou?? <select name="MelhorPágina"> <option value="Interface">Interface</option> <option value="Imagens, som, etc.">Imagens, som, cores, comandos básicos, etc.</option> <option value="Frames">Frames</option> <option value="Ferramentas">Ferramentas</option> <option value="Formulários">Formulários</option> <option value="CGI">CGI</option> <option value="JAVA">JAVA</option> <option value="Javascript">Javascipt</option> <option value="CHAT">CHAT</option> <option value="Onde colocar">Onde colocar</option> <option value="Onde divulgar">Onde Divulgar</option> <option value="Bombas em Javascript">Bombas em Javascript</option> <option value="Contadores de Acesso">Contadores de Acesso</option> <option value="Organizando às informações">Organizando às informações</option> </select> <p> Deixe seus comentários sobre a minha Home Page:<textarea name="Comentários" cols="28" rows="5"></textarea><br /> O que está faltando?<input type="Text" name="O_que_está_faltando" Value="o que falta?"><br /> Essa Home Page lhe ajudou? <input type="Radio" name="Ajudou" value="sim">Sim <input type="Radio" name="Ajudou" value="Não!">Não!<p> <input type="Submit" value="Enviar "> <input type="Reset" value="Limpar Dados"> </form> |