Cadastro em HTML

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:

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:

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:

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">


<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 />

<fieldset>
<legend>Dados de Endereço</legend>
<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 />


<fieldset>
<legend>Dados de login</legend>
<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

Cadastro em HTML

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Cadastro em HTML

Enviado por

Direitos autorais:

Formatos disponíveis

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

Sobrenome, RG, CPF e Data de Nascimento.

Campos de Dados do Endereço

Campos de Dados de Login

E por fim, criamos dois simples botões.

Código HTML de nosso Tutorial sobre

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

Abaixo Resultado do código HTML do

Você também pode gostar