Formulários

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.