Imagens Links Controlos

Cada uma destes campos tem funcionalidade própria e você vai aprender em que situação utilizá-los em seus formulários.
Pode ter múltiplos formulários em um único hiperdocumento. Apenas certifique-se que os blocos <form></form> não se sobrepõem. Um formulário começa com a marcação <form> e termina com </form>. Outros items devem ser especificados.

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

• Método 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 activada. (Método de Query String).

• Método post
Este método transmite toda a informação fornecida via formulário, imediatamente após a URL activada. Ou seja, quando o servidor recebe uma activação de um formulário utilizando POST ele sabe que precisa continuar "ouvindo" para obter a informação. Este é o melhor método.(Método Tranfer Strings).

• Segundo
O formulário precisa saber para onde enviar a informação. Esta é a URL que é activada a partir do formulário, e ela é referenciada através da marcação action. Esta URL em geral aponta para um script cgi, asp, php, perl,etc. que irá receber e descodificar 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. Neste caso iremos usar um script php, pois o nosso site encontra-se num servidor unix e julgo ser um sistema bastante fácil de compreender.

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. Na verdade a expressão name é o nome da variável que passará para o Script.

• value="" (Opcional).
Utilizando a marcação value especifica que texto aparecerá no campo quando o formulário fôr exibido.

• size="" (Opcional).
Esta marcação altera o tamanho deste campo exibido na tela. O usuário sempre poderá digitar mais caracteres do que o tamanho do campo na tela, pois o texto irá se deslocar à esquerda dentro do campo.

• maxlength="" (Opcional).
Limita o número de caracteres que o usuário pode digitar, basta usar esta marcação. O formulário irá emitir um bip de erro se o usuário tentar digitar além do permitido em maxlength.

Exemplo:

<html> <head> <title>Formulário Texto</title> <style type="text/css"> .bot{font-family:Verdana,Arial; color:#ffff99; font-size:10px; background:#184A4A; border:thin solid #875535; cursor:hand} .1{font-family:Verdana,Arial; color:#ffff99; font-size:10px} </style> </head> <body leftmargin="1" topmargin="0" bgcolor="#333333" text="#FFFF99"> <h3>Formulário Entrada Texto:</h3> <form action="resposta.php" method="post"> <div class="tx1a"> Seu Nome: <br> <input type="text" name="Nome" size="30" maxlength="30"><br> (Máximo 30 caracteres)<br><br> Seu Telefone: <br> <input type="text" name="Telefone" size="12" maxlength="12"><br> (Máximo 12 Dígitos)</div><br> <input type="hidden" value="1" name="Controlo"> <div style="padding-left:30px"> <input type="submit" value=" Enviar " class="bot"></div> </form> <p align="center"> <input type="button" value="Fechar Janela" class="bot" onclick="window.close()"></p> </body> </html>

<html> <head> <title>Formulário PW</title> <style type="text/css"> .bot{font-family:Verdana,Arial; color:#ffff99; font-size:10px; background:#184A4A; border:thin solid #875535; cursor:hand} .1{font-family:Verdana,Arial; color:#ffff99; font-size:10px} </style> </head> <body leftmargin="1" topmargin="0" bgcolor="#333333" text="#FFFF99"> <h3>Formulário PassWord:</h3> <form action="resposta.php" method="post"> <div class="tx1a"> Entre PassWord: <br> <input type="text" name="PW" size="8" maxlength="8"><br> (Entre PW com 8 Caracteres)<br><br> <input type="hidden" value="2" name="Controlo"> <div style="padding-left:30px"> <input type="submit" value=" Enviar " class="bot"></div> </form> <p align="center"> <input type="button" value="Fechar Janela" class="bot" onclick="window.close()"></p> </body> </html>

• rows="" (Obrigatório).
Especifica o número de linhas da entrada textual.

• cols="" (Obrigatório).
Especifica o número de colunas da entrada textual.

• default="" (Opcional).
Este é o texto que pode mostrar de início se fôr inserido no meio das tags.

Exemplo:

<html> <head> <title>Formulário Texto Área</title> <style type="text/css"> .bot{font-family:Verdana,Arial; color:#ffff99; font-size:10px; background:#184A4A; border:thin solid #875535; cursor:hand} .1{font-family:Verdana,Arial; color:#000000; font-size:10px} </style> </head> <body leftmargin="1" topmargin="0" bgcolor="#333333" text="#FFFF99"> <h3>Formulário Texto Área:</h3> <form action="resposta.php" method="post"> <input type="hidden" value="3" name="Controlo"> Entre <br> para nova linha.<br> <textarea name="Textoar" rows="5" cols="40" class="tx1a">Este texto é apenas um exemplo: Escreva o Seu próprio Texto se desejar, como por exemplo a Sua Morada. </textarea><br><br> <div style="padding-left:30px"> <input type="submit" value=" Enviar " class="bot"></div> </form> <p align="center"> <input type="button" value="Fechar Janela" class="bot" onclick="window.close()"></p> </body> </html>

Existe a possibilidade de transferir variáveis ou valores necessários ao seu Script, através de entradas ocultas. Nos exemplos acima mostrados, pode verificar que existe uma entrada tipo hidden (escondida, não é mostrada na página) com o name=Controlo (Nome da variável a transferir), e value igual a um valor que serve de controlo de reconhecimento ao script da página que deve mostrar com suas respostas.

<html> <head> <title>Formulário Listas</title> <style type="text/css"> .bot{font-family:Verdana,Arial; color:#ffff99; font-size:10px; background:#184A4A; border:thin solid #875535; cursor:hand} .1{font-family:Verdana,Arial; color:#000000; font-size:10px} </style> </head> <body leftmargin="1" topmargin="0" bgcolor="#333333" text="#FFFF99"> <h3>Formulário Listas:</h3> <form action="resposta.php" method="post"> <input type="hidden" value="4" name="Controlo"> Qual das Cidades gosta mais?<br> <select name="Cidade"> <option value="Aveiro">Aveiro</option> <option value="Coimbra">Coimbra</option> <option value="Faro">Faro</option> <option value="Guarda">Guarda</option> <option value="Lamego">Lamego</option> <option value="Lisboa">Lisboa</option> <option value="Leiria">Leiria</option> <option value="Portimão">Portimão</option> <option value="Porto">Porto</option> <option value="Viseu">Viseu</option> </select><br><br> <div style="padding-left:30px"> <input type="submit" value=" Enviar " class="bot"></div> </form> <p align="center"> <input type="button" value="Fechar Janela" class="bot" onclick="window.close()"></p> </body> </html>

<html> <head> <title>Formulário Lista Múltipla</title> <style type="text/css"> .bot{font-family:Verdana,Arial; color:#ffff99; font-size:10px; background:#184A4A; border:thin solid #875535; cursor:hand} .1{font-family:Verdana,Arial; color:#000000; font-size:10px} </style> </head> <body leftmargin="1" topmargin="0" bgcolor="#333333" text="#FFFF99"> <h3>Formulário Lista Múltipla</h3> <form action="resposta.php" method="post"> <input type="hidden" value="5" name="Controlo"> Qual dos artigos deseja reservar?<br> <select name="Cidade[]" multiple> <option value="Hotel">Hotel</option> <option value="Pousada">Pousada</option> <option value="Pensão">Pensão</option> <option value="Quarto Casal">Quarto Casal</option> <option value="Quarto Simples">Quarto Simples</option> <option value="Pequeno Almoço">Pequeno Almoço</option> <option value="Almoço">Almoço</option> <option value="Jantar">Jantar</option> <option value="Fim de Semana">Fim de Semana</option> <option value="Semana">Semana</option> </select><br><br> <div style="padding-left:30px"> <input type="submit" value=" Enviar " class="bot"></div> </form> <p align="center"> <input type="button" value="Fechar Janela" class="bot" onclick="window.close()"></p> </body> </html>

<html> <head> <title>Formulário Check Box</title> <style type="text/css"> .bot{font-family:Verdana,Arial; color:#ffff99; font-size:10px; background:#184A4A; border:thin solid #875535; cursor:hand} .1{font-family:Verdana,Arial; color:#FFFF99; font-size:10px} </style> </head> <body leftmargin="1" topmargin="0" bgcolor="#333333" text="#FFFF99"> <h3>Formulário Check Box</h3> <form action="resposta.php" method="post" class="tx1a"> <input type="hidden" value="6" name="Controlo"> Qual dos artigos deseja receber?<br> <input type="checkbox" value="Livro A Esperança" name="Livro">Livro a Esperança<br> <input type="checkbox" value="Filme A Esperança" name="Filme">Filme a Esperança<br> <input type="checkbox" value="CD A Esperança" name="CD">CD A Esperança<br><br> <div style="padding-left:30px"> <input type="submit" value=" Enviar " class="bot"></div> </form> <p align="center"> <input type="button" value="Fechar Janela" class="bot" onclick="window.close()"></p> </body> </html>

Utilizam uma notação similar à de checkboxes, contudo, apenas uma opção deve ser escolhida, para tal dê o mesmo nome aos botões em que deseja a selecção. Tome em atenção que deve haver sempre um botão seleccionado checked. Escolha a sua opção default.

Exemplo:

<html> <head> <title>Formulário Botão Radio</title> <style type="text/css"> .bot{font-family:Verdana,Arial; color:#ffff99; font-size:10px; background:#184A4A; border:thin solid #875535; cursor:hand} .1{font-family:Verdana,Arial; color:#FFFF99; font-size:10px} </style> </head> <body leftmargin="1" topmargin="0" bgcolor="#333333" text="#FFFF99"> <h3>Formulário Botão Radio</h3> <form action="resposta.php" method="post" class="tx1a"> <input type="hidden" value="7" name="Controlo"> Qual das Classes deseja viajar?<br> <input type="radio" value="VIP" name="classe">VIP<br> <input type="radio" value="Primeira" name="classe">Primeira<br> <input type="radio" value="Segunda" name="classe">Segunda<br> <input type="radio" value="Económica" name="classe" checked>Económica<br><br> <div style="padding-left:30px"> <input type="submit" value=" Enviar " class="bot"></div> </form> <p align="center"> <input type="button" value="Fechar Janela" class="bot" onclick="window.close()"></p> </body> </html>

Como deve ter verificado, em todos os exemplos de formulários tem visto um botão submit. Este botão é o que faz o reconhecimento das suas variáveis na form , e as transfere para o seu script.
Existe também um botão tipo reset que se fôr inserido no seu formulário, quando seleccionado, limpa todas as entradas do usuário.

Nota: Tem aqui o script resposta.php.

<?php
echo '<style type="text/css">';
echo '.bot{font-family:Verdana,Arial; color:#ffff99; font-size:10px; background:#184A4A; ';
echo 'border:thin solid #875535; cursor:hand}';
echo '.1{font-family:Verdana,Arial; color:#ffff99; font-size:10px}';
echo 'body {margin-left:0px; margin-top:0px; background-color:#333333; color:#FFFF99}';
echo '</style>';

If ($Controlo==1){
   echo '<div class="tx1a"><h3>Formulário Texto</h3></div>';
   If ($Nome==""){
      echo '<div class="tx1a" align="center">O Campo Nome Não Pode Estar Vazio<br><br>';
      echo '<input type="button" value="Voltar" onclick="history.back()" class="bot"></div>';exit;}
   If ($Telefone==""){
      echo '<div class="tx1a" align="center">O Campo Telefone Não Pode Estar Vazio<br><br>';
      echo '<input type="button" value="Voltar" onclick="history.back()" class="bot"></div>';exit;}
   If ($Telefone != ""){
      for ($n=0; $n<strlen($Telefone); ++$n){
         $ck=substr($Telefone,$n,1);
         if ($ck < "0" || "9" < $ck){
            echo '<div class="tx1a" align="center">O Campo Telefone Está Errado!<br><br>';
            echo '<input type="button" value="Voltar" onclick="history.back()" class="bot"></div>';exit;}}}
   echo '<div class="tx1a">Seu Nome: '.$Nome.'<br><br>';
   echo 'Telefone: '.$Telefone.'</div><br>';
   echo '<div align="center">';
   echo '<input type="button" value="Fechar Janela" onclick="window.close()" class="bot"></div>';}

If ($Controlo==2){
   echo '<div class="tx1a"><h3>Formulário PassWord</h3></div>';
   If ($PW==""){
      echo '<div class="tx1a" align="center">O Campo PassWord Não Pode Estar Vazio<br><br>';
      echo '<input type="button" value="Voltar" onclick="history.back()" class="bot"></div>';exit;}
   If (strlen($PW) <8){
      echo '<div class="tx1a" align="center">O Campo PassWord Está Errado!<br><br>';
      echo '<input type="button" value="Voltar" onclick="history.back()" class="bot"></div>';exit;}
   echo '<div class="tx1a">Sua PassWord: '.$PW.'<br><br>';
   $cod=md5($PW);
   echo '<div class="tx1a">Sua PW Codificada: '.$cod.'<br><br>';
   echo '<div align="center">';
   echo '<input type="button" value="Fechar Janela" onclick="window.close()" class="bot"></div>';}

If ($Controlo==3){
   echo '<div class="tx1a"><h3>Formulário Texto Área</h3></div>';
   If ($Textoar==""){
      echo '<div class="tx1a" align="center">O Campo Texto Não Pode Estar Vazio<br><br>';
      echo '<input type="button" value="Voltar" onclick="history.back()" class="bot"></div>';exit;}
   echo '<div class="tx1a">Seu Texto: <br>';
   echo $Textoar.'<br><br>';
   echo '<div align="center">';
   echo '<input type="button" value="Fechar Janela" onclick="window.close()" class="bot"></div>';}

If ($Controlo==4){
   echo '<div class="tx1a"><h3>Formulário Listas</h3></div><br>';
   echo '<div class="tx1a">Sua Cidade Preferida: '.$Cidade;
   echo '<div align="center"><br>';
   echo '<input type="button" value="Fechar Janela" onclick="window.close()" class="bot"></div>';}

If ($Controlo==5){
   echo '<div class="tx1a"><h3>Formulário Lista Múltipla</h3></div><br>';
   echo '<div class="tx1a">Sua Reserva: <br>';
   for ($n=0; $n<10; ++$n){
      if ($Cidade[$n] != ""){
      echo '<div style="padding-left:20px">'.$Cidade[$n].'</div>';}}
   echo '<div align="center"><br>';
   echo '<input type="button" value="Fechar Janela" onclick="window.close()" class="bot"></div>';}

If ($Controlo==6){
   echo '<div class="tx1a"><h3>Formulário Check Box</h3><br>';
   echo 'Seu Pedido: <br>'.$Livro.'<br>'.$Filme.'<br>'.$CD.'</div>';
   echo '<div align="center"><br>';
   echo '<input type="button" value="Fechar Janela" onclick="window.close()" class="bot"></div>';}

If ($Controlo==7){
   echo '<div class="tx1a"><h3>Formulário Botão Radio</h3><br>';
   echo 'Deseja Viajar na Classe: '.$classe;
   echo '<div align="center"><br>';
   echo '<input type="button" value="Fechar Janela" onclick="window.close()" class="bot"></div>';}
?>