Construindo formulários em HTML

Os formulários em HTML são utilizados para a coleta de dados do usuário, que após podem ser manipulados com a utilização de outras linguagens como PHP. Um exemplo muito comum de um formulário em HTML é o formulário de cadastro de usuários de e-mail, cujo mesmo possui campos para nome, sobrenome, data de nascimento e etc.
Os formulários são indispensáveis em nosso dia-a-dia, para se ter uma ideia estamos utilizando os mesmos até na hora de se enviar um simples e-mail.

Criando um formulário

A tag responsável pela criação de formulários é a tag <form>. É nesta tag que precisamos decidir como irá "funcionar" o nosso formulário, mas isso nós veremos mais adiante.
Exemplo:
<form>
</form>

Criando os campos do formulário

Existem vários tipos de campos e elementos que podem ser utilizados na construção de um formulário, mas antes de explicar a vocês como criar cada um deles, irei demonstrar alguns comandos que serão muito utilizados.
Observe a tabela abaixo:
Comandos Funções Valores
name
Atribui um nome ao campo. É muito importante a utilização deste comando, pois é através deste nome atribuído a cada campo, que poderemos capturar os dados e manipulá-los. Qualquer nome que não inicie com símbolos ou números, e que não contenha caracteres especiais (ç), nem acentos ou espaços.

value
Atribui um valor predefinido ao campo. Qualquer tipo de valor. Por exemplo, frases, números entre outros.

maxlength
Determina um valor máximo de caracteres que um campo irá suportar. Números inteiros maiores que zero.

size
Determina o tamanho do campo em caracteres. Números inteiros maiores que zero.

rows
Determina a quantidade de linhas em uma área de texto. Números inteiros maiores que zero.

cols
Determina a quantidade de colunas em uma área de texto. Números inteiros maiores que zero.

disabled
Desabilita um campo ou área de texto, impossibilitando ao usuário inserir dados. Valor disabled, em português desativado.

checked
Este comando é aplicável a caixas de seleção e a botões do tipo rádio, e quando for aplicado, a opção já aparece selecionada. Valor checked, em português verificado/marcado/selecionado.

type
Define o tipo do campo ou elemento do formulário. button (botão), checkbox (caixa de seleção), file (campo para a seleção de arquivos no PC), password (campo de senha), radio (botão radio), reset (botão que limpa o formulário), submit (botão que envia o formulário), text (campo de texto).
Agora que já demonstrei quase todos os comandos a serem utilizados nos elementos dos formulários, vamos ver como criar cada um deles utilizando as seguintes tags: <input>, <select> e <textarea>.
Campo de texto:
Um campo de texto é criado com a tag <input> e definindo seu tipo para texto com o comando type, e também não podemos se esquecendo de nomeá-lo com o comando name.
Exemplo:
<form>
      <input type="text" name="nome_do_usuario"/>
</form>
Você também pode preencher um campo automaticamente com o comando value, e aplicar outros comandos explicados acima.
Exemplo:
<form>
      <input type="text" name="nome_do_usuario" value="Maik Basso" size="40" />
</form>
Campo de senha:
A única diferença entre um campo de senha e um de texto é que no campo de senha os caracteres são protegidos, ou seja, o navegador exibe asteriscos ou bolinhas em vez dos caracteres. Para criar um campo de senha defina o valor do comando type para password.
Exemplo:
<form>
      <input type="password" name="senha_do_usuario"/>
</form>
Campo para a seleção de arquivos:
Esse tipo de campo é utilizado para a seleção de arquivos no computador, e é criado definindo o tipo seu tipo para file.
Exemplo:
<form>
      <input type="file" name="imagem"/>
</form>
Nesse tipo de campo o comando value não se aplica.
Caso deseje utilizar este tipo de campo em seu formulário você deve definir um comando na tag <form> para que seja possível o envio do arquivo. O comando é enctype, esse comando deve assumir o valor de multipart/form-data.
Exemplo:
<form enctype="multipart/form-data">
      <input type="file" name="imagem"/>
</form>
Caixa de seleção:
São caixas que possibilitam ao usuário selecionar uma ou mais opções. Para criar uma caixa de seleção atribua o valor checkbox ao comando type.
Exemplo de um conjunto de caixas de seleção para coleta da resposta de uma pergunta:
<form>
      De que frutas você gosta? <br />
      <input type="checkbox" name="uva" value="uva"/>Uva <br />
      <input type="checkbox" name="maca" value="maca"/>Maçã <br />
      <input type="checkbox" name="melancia" value="melancia"/>Melancia
</form>
Botões de seleção radio:
Um conjunto destes botões permite ao usuário selecionar apenas uma opção. Para a criação destes botões atribua o valor radio ao comando type.
Exemplo de um conjunto de botões radio para coleta da resposta de uma pergunta:
<form>
      Você tem carro? <br />
      <input type="radio" name="carro" value="sim"/>Sim <br />
      <input type="radio" name="carro" value="nao"/>Não
</form>
Observe que neste tipo de botão de seleção o comando name de todas as opções deve ter o mesmo valor.
No caso da caixa de seleção e dos botões radio, o valor a ser enviado é o valor do comando value.
Botões com função indefinida:
Esse tipo de botão não tem uma função definida em um formulário, a mesma deve ser estabelecida através de outra linguagem de programação como Java script. Para a criação destes botões atribua o valor button ao comando type.
Exemplo:
<form>
      <input type="button" name="meu_botao" value="Clique aqui!"/>
</form>
Neste caso o valor do comando value é o texto do botão.
Botões enviar e limpar:
Esses botões têm a função de enviar ou limpar um formulário. Para a criação de botões de envio atribua o valor submit ao comando type, e para criar botões para limpar o formulário atribua o valor reset ao comando type.
Exemplo:
<form>
      <input type="reset" name="botao_limpar" value="Limpar"/>
      <input type="submit" name="botao_enviar" value="Enviar"/>
</form>
Como no caso acima, o valor do comando value é o texto do botão.
Áreas de texto:
A diferença de uma área de texto para um campo de texto é que na área de texto se tem a opção de escrever em mais de uma linha, e quando a texto ocupa uma região maior que a estabelecida para a área, aparecem barras de rolagem.
Áreas de texto são ideais para formulários de e-mail e comentários por comportarem uma quantidade de texto maior que os campos de texto. Para criar uma área de texto utilize a tag <textarea>.
Exemplo:
<form>
      <textarea name="minha_area_de_texto" rows="12" cols="50"></textarea>
</form>
Neste caso para predefinir um valor a uma área de texto apenas escreva o texto entre as tags <textarea> e </textarea>
Exemplo:
<form>
      <textarea name="minha_area_de_texto" rows="12" cols="50">Escreva aqui!</textarea>
</form>
Menu drop-down:
Tem a função semelhante aos botões radio, pois permitem apenas a escolha de uma única opção. Sua utilização é recomendada quando se tem um número muito grande de opções de resposta.
Para criar um menu drop-down utilize a tag <select> e para criar cada uma das opções utilize a tag <option>.
Exemplo:
<form>
      Qual é o seu estado? <br />
      <select name="estado">
            <option>RS</option>
            <option>SC</option>
            <option>PR</option>
            <option>RJ</option>
            <option>SP</option>
      </select>
</form>

Ações e métodos de envio dos formulários:

Após termos construído nosso formulário, devemos informar a ele o método de envio das informações, e também a página que receberá as informações para a manipulação.
Então para informar ao navegador o método de envio dos dados do formulário utilize o comando method, esse comando pode assumir os seguintes valores:
POST - envia os dados do formulário de forma invisível ao usuário.
GET - envia os dados de forma visível ao usuário. Supomos que temos um formulário de login com campos para nome e senha (denominados nome e senha), os dados serão passados pela URL da página, e ao enviar o formulário irá aparecer o seguinte sufixo na URL: ?nome=valor_do_campo_nome&senha=valor_do_campo_senha.
Agora para definir a página que receberá as informações do formulário utilize o comando action. Como valor deste comando coloque a URL da página que irá receber os dados.
Exemplo:
<form action="index.html" method="post">
      Nome:<br />
      <input type="text" name="nome_do_usuario"/><br />
      Senha:<br />
      <input type="password" name="senha_do_usuario"/><br />
      <input type="submit" name="botao_entrar" value="Entrar"/>
</form>
Também é possivel criar formulários que enviam e-mails através de gerenciadores de e-mails como o Outlook, para isso coloque como valor do comando action do formulário mailto:seu_email, depois coloque text/plain como valor do comando enctype do formulário, e defina o método de envio para get.
Exemplo:
<form action="mailto:maik@maikbasso.com.br" method="get" enctype="text/plain">
</form>

Exemplo de formulário:

Agora que você já sabe como criar formulários, observe abaixo o exemplo que criei para esta postagem, utilizando uma tabela para organizar um formulário de login.
Exemplo:
<h1>Faça login</h1>
<form action="index.html" method="post">
      <table>
            <tr>
                  <td>
                        Nome:
                  </td>
            </tr>
            <tr>
                  <td>
                        <input type="text" name="nome_do_usuario"/>
                  </td>
            </tr>
            <tr>
                  <td>
                        Senha:
                  </td>
            </tr>
            <tr>
                  <td>
                        <input type="password" name="senha_do_usuario"/>
                  </td>
            </tr>
            <tr>
                  <td>
                        <input type="submit" name="botao" value="Entrar"/>
                  </td>
            </tr>
      </table>
</form>




Postagens relacionadas:

54 comentários:

Anônimo disse...

SITE BOM E UTIL, MAS PODERIA SANAR UMA DUVIDA?

COMO FAÇO PARA MANDAR O FORMULARIO PARA UM ENDERÇO DE EMAIL ESPECIFICO CONFERME A SELEÇÃO NAS OPÇOES? POR EXEMPLO: CASO O USUARIO SELECIONE A OPÇÃO AREA FINANCEIRA, AO CLICAR NO BOTÃO DE ENVIO ELE ENVIA PARA O EMAIL DA AREA FINACEIRA E ASSIM POR DIANTE PARA OS DEMAIS EAMILS.

Maik Basso disse...

Você deve usar a uma linguagem de programação como PHP para construir a estrutura de envio de e-mails. Em seu script PHP você deverá recuperar os dados do formulário e atribuí-los a variáveis que deverão ser passadas por parâmetro na função mail() do PHP, a qual enviará o seu e-mail.

Exemplo:

$titulo = “Sua Mensagem”;
$conteudo= “Conteúdo da mensagem aqui!”;
$e_mail = “maik@maikbasso.com.br”;
$headers= "Content-type:text/html;";//não obrigatório

mail($e_mail, $titulo, $conteudo, $headers);

Você também poderá utilizar de uma estrutura condicional para selecionar o e-mail ao qual deverá der enviada a mensagem. Por exemplo:

if($tipo_mail == “financeiro”){
$e_mail = “financeiro@teste.com”;
}
if($tipo_mail == “comercial”){
$e_mail = “comercial@teste.com”;
}
else{
$e_mail = “outro@teste.com”;
}

Pedrito e Pedrão disse...

ótima postagem, eu gostaria de que tivesse duas actions ao submeter o formulario , ele ser enviado para duas paginas especificas no metodo post tem como?

Maik Basso disse...

Com o método post desconheço, tente usar o método get.

Felipe Moreno disse...

Olá, muito esclarecedor seu post. Obrigado.
Mas eu tenho uma dúvida básica: exemplo, numa landing page tenho um formulário só com o campo de email para o usuário que por ventura se cadastre. Essa landing page está no servidor onde está o site, numa pasta em separado. Tenho dúvida em relação ao valor que devo colocar em "action" no form da landin page. E como saber quem se cadastrou? Onde poderei localizar isso? Obrigado desde já.

Maik Basso disse...

No action você coloca o endereço do arquivo que deve receber os dados do formulário e realizar alguma ação, geralmente uso PHP para esse fim. Caso sua dúvida esteja no link que deve colocar no action, saiba que deve seguir um padrão para isso. Por exemplo, você disse que sua landing page está em uma pasta separada, vamos supor que esta se chame "minhapasta", se o arquivo que executa a ação estiver na mesma pasta, vamos supor um nome a ele de "acao.php", o link do action será simplesmente "acao.php", agora se ele estiver fora da pasta use o simbolo de pasta acima "../" para designar que o arquivo está fora da pasta, por exemplo "../acao.php".

Você também mencionou que está com dúvida em saber quem se cadastrou, isso já é mais trabalhoso, você terá de usar uma linguagem de programação, por exemplo, PHP, e salvar os dados do form em um arquivo ou mesmo em um banco de dados MYSQL, o que requer tempo e conhecimento básico em arquivos ou banco de dados.

Espero ter ajudado, ou ao menos esclarecido sua dúvida.

Apoio Distribuidores disse...

Gostaria de saber codigo de formulário que envia para quantos emails eu quiser tipo eu cadastre os e-mails no codigo e na hora de enviar vai para todos os e-mails

Maik Basso disse...

Essa implementação pode ser feita usando PHP.

Isadora Almeida disse...

Olá, me tire uma dúvida nesse name="nome_usuario", esse nome_usuario é a variável onde será armazenada a infor. digitada pelo usuário, correto? No caso o nome dele. Logo no meu banco de dados, o atributo tem que ter esse mesmo nome, certo?

Maik Basso disse...

Não necessariamente. Esse no name="nome_usuario" é uma marcação HTML ao qual será utilizada para capturar o nome do usuário com uma linguagem de programação como por exemplo usando post em PHP, assim que o formulário for enviado. Para capturar use a linha abaixo.

$nome = $_POST["nome_usuario"];

Depois de capturar o conteúdo, você poderá armazená-lo em seu banco de dados. O nome do atributo no banco de dados não precisa ter o mesmo nome, apenas costuma-se colocar igual para melhorar a legibilidade do código e também para facilitar sua compreensão.

Anônimo disse...

post muito bom, mais como impedir o login quando se há nada escrito nos campos login e senha???

Maik Basso disse...

Use Javascript para validar o valor dos campos.

edson silver disse...

Este site me foil extremament util. Desde ja agradeco pela materia. Master tambem Gostaria d saber cmo usar o Java Script para a confirmacao/validacao de campos d formulario!?

Maik Basso disse...

Não tenho como me extender muito nos comentários, mas vc teria de ter uma função mais ou menos assim:

function negocioLogin(){
//envia o form
function enviaFormulario(){
document.formulario.submit();
}
//está função e responsável por verificar os dados
this.verificarDados = function(){
formulario = document.formulario;

if(formulario.nome.value == ""){
return alert("Preencha o campo login.");
}
if(formulario.senha.value == ""){
return alert("Você esqueceu da senha.");
}
else{
return enviaFormulario();
}
}
}

Essa função verifica se os campos estão vazios, e se não estiver os envia. Para utiliza-la, basta declarar o objeto e chamar a função que envia o formulário no evento onclick do botão ou link desejado.

//declarando o objeto
negocioLogin = new negocioLogin();

//chamando a função
negocioLogin.verificarDados()

Anônimo disse...

eu gostaria de enviar os dados para outro site...
tem como mim ajudar?

no meu site Principal tem o formulário ondo o usuário vai se cadastrar... e quando clicar em enviar. os dados é enviado para outro site..
mim manda alguma sugestão ai por e-mail: davidssombra@live.com

Anônimo disse...

Adorei o site, os ensinos com certeza são de ótima valia, porém estou com um problema, eu sou novo na área então não conheço muito, mas quando eu coloco o código ensinado para que as pessoas possam comentar o site, não aparece, eu segui a mesma linha de comando aqui ensinado, e gostaria de resolver tal problema, grato pela atenção!!!!!

Maik Basso disse...

Se possível refaça a pergunta com mais clareza.

Anônimo disse...

Boa noite, sua explicação é muito boa muito obrigado salvei na pagina de Favoritos.

Anônimo disse...

esse site ta me ajudando bastante,mas eu queria saber o codigo da senha pra quando for digitar aparecer as bolinhas na senha

Maik Basso disse...

Isso já está especificado no conteúdo acima, mas retomando, use type="password" na tag input correspondente a senha.

Anônimo disse...

oi

GUIA DE TERÊ disse...

Preciso fazer um formulário que tenha os nomes e as marcas dos carros no formulário para uma empresa de seguros,saberia fazer? quanto cobra ou se não sabe, poderia indicar alguém para fazer?
Email para contato: mjscanto@hotmail.com

Anônimo disse...

Parabéns, muito interessante, mas eu gostaria de saber se é possível passar os parâmetros via URL se o método utilizado no formulário for o POST.
OBS.: tenho um banco de dados e gostaria de enviar os dados para um determinado form de um determinado site que usa esse método.

Maik Basso disse...

Sim "GUIA DE TERÊ", é bem simples fazê-lo, mas só aceito pedidos pelo formulário de contato do site.

Sim, é possível sim gravar os dados do form no banco de dados usando PHP.

Anônimo disse...

como activar o botao do tipo radio na saida em formularios

Jovens Novo Tempo disse...

Gostaria de saber se tem como fazer com que se o o login já existir avisar, e fazer com que os cadastro vão para um banco de dados.

Maik Basso disse...

Jovens Novo Tempo - Tem sim, mas para isso você terá de usar uma linguagem como PHP.

Maik Basso disse...

Não entendi muito bem sua pergunta, como assim ativar um botão radio?, tente usando Javascript.

RBastos Dutra disse...

Maik, gostaria de saber se tem como enviar as informações do formulário para um email sem precisar entrar no outlook

Maik Basso disse...

Isso é possível usando a função mail() do PHP.

Exemplo:

mail("teste@teste.com","assunto", "mensagem", $headers);

Paulo Silva disse...

Fiz um formulário em html e gostaria que fosse enviado direto sem passar pelo outlook, já li em vários postes que tenho que introduzir linguagem php mas nao sei como fazer a junçao das 2 linguagens, podiam me ajudar

Maik Basso disse...

Tenho planos de voltar a postar, quem sabe esta não seja uma de minhas próximas postagens....

Anônimo disse...

Queria saber como ficaria uma function para manter o foco no primeiro campo vazio depois da verificação dos campos.

milton junior disse...

ola eu não entendi a parte de enviar o formulario, quero cadastrar o usuario e pra onde va esses dados? como faço pra ele fazer login?

Rogerio Santos disse...

Amigo por favor já pesquisei muito e não consegui nada, me responda como guardo todos os nomes e email's digitados no form ,em um arquivo txt.
uso um form em uma página index.html,uma php para receber e enviar os dados por email ,um para mim outro para quem se cadastrou,uso um cookie na página php par repassar o nome para a página de redirecionamento após o envio do form,recebe os dados em meu email, mas gostaria que eles fossem também guardados em um arquivo txt. se puder me ajudar te agradeço muito. obrigado

Rogerio Santos disse...

uso um form em uma página index.html,uma php para receber e enviar os dados por email ,um para mim outro para quem se cadastrou,uso um cookie na página php par repassar o nome para a página de redirecionamento após o envio do form,recebe os dados em meu email, mas gostaria que eles fossem também guardados em um arquivo txt. se puder me ajudar te agradeço muito. obrigado

Maik Basso disse...

milton junior deve-se utilizar de uma linguagem como PHP para implementar as rotinas necessárias ao seu sistema. O HTML apenas disponibiliza a estrutura do sistema, e o CSS os estilos da aplicação.

Maik Basso disse...

Rogerio Santos porque você quer guardar os dados em um arquivo txt? não seria mais fácil guardá-los em um banco de dados? Se seu servidor PHP for pago ou local geralmente ele dispõe de um serviço de banco de dados incluso, você deveria dar uma analisada nesta questão. Além da questão de segurança porque se os dados forem armazenados num txt qualquer um pode acessar os dados a menos que rigidas configurações de segurança sejam definidas.

Rogerio Santos disse...

Olá maik Basso,obrigado por me responder,na verdade sou muito leigo em php e banco de dados,não sei como fazer isso,mas uma hora eu consigo,obrigado.
gostei muito do seu do seu site, o visual dele é show,sua atenção com os visitantes parabéns.

Francisco Siríaco disse...

Estou fazendo o curso de Técnico em informatica para internet pelo (IFRO-RO) e este site e ótimo me tirou muitas duvida , parabéns ao criado, vou recomendar aos meus amigos

Tarciso Amorim disse...

maik como eu faco para fazer um script que eu possa emplentar e que essse script emvie para o meu email

Maik Basso disse...

Use a função mail() no PHP para construir o script.

Rogerio Santos disse...

Aê Maik estou usando o form que tu ensinou neste post e ta funcionando blz,veja como ficou a página http://extra.meximas.com

Anônimo disse...

Boa tarde muito bom o teu post ! tenho uma dúvida se alguém puder me ajudar agradeço ! quero usar checkboxe's para "filtrar" uma consulta na minha cabeça penso em: IF ( checkbox = 1)
echo "campo desejado: ".$linha['nome']."
";

Anônimo disse...

esse comando action="index.html"envia os dados para uma página... mas eu quero receber no meu e-mail os dados inseridos. Como faz? Não quero direionar para uma página, quero introduzir os dados nos campos e o formulário envia para o meu e-mail os nomes dos campos e o que foi digitado, tendeu? Como faz?

Maik Basso disse...

Você pode usar um script php para isso como expliquei nos comentários acima, ou simplesmente colocar no action seu email desta forma action="mailto:teste@teste.com" por exemplo.

LSergio disse...

Obrigado por compartilhar seu conhecimento, estou iniciando em programação web. Você tem uma didática muito boa, tenho certeza que vou aprender muito aqui no site, mais uma vez obrigado.

Luiz Sergio

Maik Basso disse...

Obrigado, fico feliz em ajudar!

Anônimo disse...

boa tarde!

Anônimo disse...

Boa tarde! Estou aprendendo a programar em html e css e estou tentando fazer um formulário sem tabelas, mas estou tendo dificuldades para colocar em colunas de 3, 3, 2 e 1, poderiam em ajudar?

Maik Basso disse...

Olá você terá de construir o formulário dentro de div's e alinhá-las com CSS.

i7Games disse...

ola eu gostaria de fazer um registro simples so de username,password e email
e ao completar o registro enviase as informações para o user.txt que tem no meu servidor pode me ajudar ?

Maik Basso disse...

Você terá de utilizar uma linguagem de programação para tal tarefa.

Sidney Reis disse...

Parabéns, ótimo site, Maik!

Postar um comentário

Deixe um comentário referente ao assunto do post, compartilhe seu conhecimento, sua dúvida ou deixe uma sugestão.