Você está na página 1de 6

Vamos definir nosso primeiro bloco de fieldset, para colocar os dados pessoas, como Nome,

Sobrenome, RG, CPF e Data de Nascimento.


Este trecho do código começa pelo comentário:

<!-- DADOS PESSOAIS-->

Usamos a tag <legend> para criar uma descrição para cada tipo de fieldset, que se chamará "Dados
Pessoais".
Como são diversos campos, e todos terão labels (legenda descritiva do campo), usaremos os
conceitos de tabelas em HTML para organizar e alinhas nossos campos.

O que basicamente vamos fazer é colocar o nome do campo em uma coluna e o campo na coluna ao
lado, assim teremos sempre o nome (label) lado a lado do campo (<input>).

Assim, nesse primeiro grupo de campos, usaremos apenas um tipo de campo de formulário, o de
Caixa de Texto. Apenas atentamos para o fato de limitar o número de caracteres no RG em 13
números.
Também dividimos os campos de CPF em dois campos diferentes, para o leitor saber bem que no
primeiro campo vão os 9 primeiros dígitos, depois tem um hífen e por fim um campo que cabe os
dois dígitos identificadores.

Como há muita confusão para preencher uma data, colocamos valores pré-definidos em cada
campo, para sinalizar que queremos data no padrão: dd/mm/aaaa

Campos de Dados do Endereço


Para os dados de endereço, como rua, número, bairro e cidade, iremos fazer igual como fizemos
com os campos de dado pessoal, usando caixas de texto.
Este trecho do código é iniciado pelo comentário:
<!-- ENDEREÇO -->

A única diferença aqui é o uso de menu através das tags <selection> e <option>. para criar todas as
opções de estados brasileiros. O código é longo, mas bem simples de entender.

Aqui é importante frisar o uso dos atributos name, e que cada um desses campos tenham nomes
distintos, para não haver confusão na hora que enviarmos esses dados para um script no servidor.

Campos de Dados de Login


Essa seção, no código HTML, é identificada pelo comentário:
<!-- DADOS DE LOGIN -->
Para fazer os campos do formulário responsáveis pelo sistema de login, usamos caixas de texto para
pedir o login e o e-mail.
Já para pedir a senha e sua confirmação, usamos o que aprendemos em caixas de password.

E aqui uma novidade: usamos um campo do tipo file, que automaticamente cria um botão para que
possamos carregar um arquivo de nosso HD.
Para usar essa ferramenta, basta colocar "file" como o valor do atributo type da tag <input>:
<input type="file" name="imagem" >

E por fim, criamos dois simples botões.


Um botão de reset (limpar campos) e de submit (enviar).

Código HTML de nosso Tutorial sobre


Formulários
<!DOCTYPE html>

<html>
<head>
<title> Como criar um formulário completo em HTML </title>
<meta name="description" content="Aprenda a criar um site completo que usa
formulários em HTML">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>
<h1> Bem vindo ao site HTML Progressivo</h1>
<h2> Preencha o formulário abaixo para participar do curso de HTML & CSS
completo, online e grátis</h2><br />

<form action="Script_do_Formulario.php" method="post">

<!-- DADOS PESSOAIS-->


<fieldset>
<legend>Dados Pessoais</legend>
<table cellspacing="10">
<tr>
<td>
<label for="nome">Nome: </label>
</td>
<td align="left">
<input type="text" name="email">
</td>
<td>
<label for="sobrenome">Sobrenome: </label>
</td>
<td align="left">
<input type="text" name="sobrenome">
</td>
</tr>
<tr>
<td>
<label>Nascimento: </label>
</td>
<td align="left">
<input type="text" name="dia" size="2" maxlength="2" value="dd">
<input type="text" name="mes" size="2" maxlength="2" value="mm">
<input type="text" name="ano" size="4" maxlength="4" value="aaaa">
</td>
</tr>
<tr>
<td>
<label for="rg">RG: </label>
</td>
<td align="left">
<input type="text" name="rg" size="13" maxlength="13">
</td>
</tr>
<tr>
<td>
<label>CPF:</label>
</td>
<td align="left">
<input type="text" name="cpf" size="9" maxlength="9"> - <input type="text"
name="cpf2" size="2" maxlength="2">
</td>
</tr>
</table>
</fieldset>

<br />
<!-- ENDEREÇO -->
<fieldset>
<legend>Dados de Endereço</legend>
<table cellspacing="10">

<tr>
<td>
<label for="rua">Rua:</label>
</td>
<td align="left">
<input type="text" name="rua">
</td>
<td>
<label for="numero">Numero:</label>
</td>
<td align="left">
<input type="text" name="numero" size="4">
</td>
</tr>
<tr>
<td>
<label for="bairro">Bairro: </label>
</td>
<td align="left">
<input type="text" name="bairro">
</td>
</tr>
<tr>
<td>
<label for="estado">Estado:</label>
</td>
<td align="left">
<select name="estado">
<option value="ac">Acre</option>
<option value="al">Alagoas</option>
<option value="am">Amazonas</option>
<option value="ap">Amapá</option>
<option value="ba">Bahia</option>
<option value="ce">Ceará</option>
<option value="df">Distrito Federal</option>
<option value="es">Espírito Santo</option>
<option value="go">Goiás</option>
<option value="ma">Maranhão</option>
<option value="mt">Mato Grosso</option>
<option value="ms">Mato Grosso do Sul</option>
<option value="mg">Minas Gerais</option>
<option value="pa">Pará</option>
<option value="pb">Paraíba</option>
<option value="pr">Paraná</option>
<option value="pe">Pernambuco</option>
<option value="pi">Piauí</option>
<option value="rj">Rio de Janeiro</option>
<option value="rn">Rio Grande do Norte</option>
<option value="ro">Rondônia</option>
<option value="rs">Rio Grande do Sul</option>
<option value="rr">Roraima</option>
<option value="sc">Santa Catarina</option>
<option value="se">Sergipe</option>
<option value="sp">São Paulo</option>
<option value="to">Tocantins</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="cidade">Cidade: </label>
</td>
<td align="left">
<input type="text" name="cidade">
</td>
</tr>
<tr>
<td>
<label for="cep">CEP: </label>
</td>
<td align="left">
<input type="text" name="cep" size="5" maxlength="5"> - <input type="text"
name="cep2" size="3" maxlength="3">
</td>
</tr>
</table>
</fieldset>
<br />

<!-- DADOS DE LOGIN -->


<fieldset>
<legend>Dados de login</legend>
<table cellspacing="10">
<tr>
<td>
<label for="email">E-mail: </label>
</td>
<td align="left">
<input type="text" name="email">
</td>
</tr>
<tr>
<td>
<label for="imagem">Imagem de perfil:</label>
</td>
<td>
<input type="file" name="imagem" >

</td>
</tr>
<tr>
<td>
<label for="login">Login de usuário: </label>
</td>
<td align="left">
<input type="text" name="login">
</td>
</tr>
<tr>
<td>
<label for="pass">Senha: </label>
</td>
<td align="left">
<input type="password" name="pass">
</td>
</tr>
<tr>
<td>
<label for="passconfirm">Confirme a senha: </label>
</td>
<td align="left">
<input type="password" name="passconfirm">
</td>
</tr>
</table>
</fieldset>
<br />
<input type="submit">
<input type="reset" value="Limpar">
</form>

</body>
</html>

Abaixo Resultado do código HTML do


Tutorial sobre Formulários