Tutorial: Como criar um formulário HTML para um site com a tag <form>
Ao longo deste artigo iremos mostrar, passo-a-passo, e comentando cada linha de código HTML, como fazer uma página de um site com um formulário completo, usando diversos conceitos que aprendemos no decorrer desta seção de nosso curso.E já citando o primeiro tutorial desta seção, vimos que para iniciar um formulário devemos usar a tag <form>, onde vamos usar dois atributos, o "action" que vai receber a URL do script de programação que vai tratar os dados do formulário preenchido pelo usuário e o atributo "method", que se refere a maneira na qual esses dados serão enviados.
Esses detalhes veremos quando estudarmos linguagens de programação para web.
O que devemos saber sobre a tag form é que ela envolve uma série de campos, que no nosso caso terá a seguinte sintaxe:
<form action="Script_do_Formulario.php" method="post">
campos do formulário
aqui dentro das tags
</form>
Com a estrutura básica montada e explicada, vamos criar os diferentes grupos do formulário, que são os campos de dados, campos de endereço e os campos de login.
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
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>
Nenhum comentário:
Postar um comentário