Trabalhando com formulários no HTML \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto**
Termina em Tempo restante da oferta: 04 Horas
14 Min
50 Seg
Tempo restante da oferta: 04 14 50
[Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26)
[ ](https://www.treinaweb.com.br) Explorar
[ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login)
[ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Trabalhando com formulários no HTML [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) [ HTML ](https://www.treinaweb.com.br/blog/categoria/html)
# Trabalhando com formulários no HTML
No artigo de hoje, veremos um recurso muito utilizado pelos desenvolvedores front-end e presente no nosso dia a dia, formulários.
[ Rafael Oliveira ](https://www.treinaweb.com.br/blog/autor/rafael-oliveira) 4 anos atrás
Os formulários estão presentes no nosso dia-dia em basicamente tudo que fazemos, ao entrarmos em um site que exige que façamos um login, criar uma conta pela primeira vez, entrar em nossas contas bancárias, entre outras atividades que realizamos enquanto estamos conectados na internet.
Mas, como de fato criamos essa interação entre o usuário e o website? Vamos acompanhar este artigo e prestar muita atenção no passo a passo, para que assim, no final, tenhamos um formulário completo.
[  ](https://www.treinaweb.com.br/ebook/guia-HTML/)
## O que é?
Formulários são campos onde o usuário irá completar inserindo todos os dados necessários, seja seu nome completo, idade, e-mail, senha, entre outros, com a finalidade de se cadastrar e acessar uma página, por exemplo.
[  Curso HTML5 + CSS3 - Formulários Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-formularios)
Do mesmo modo, podemos montar um formulário com a finalidade de criar perguntas com respostas já preenchidas, onde o usuário irá apenas selecionar a resposta que mais se encaixa com a pergunta.
Dessa forma, observamos que é possível criar diversos tipos de formulários, não se privando apenas do preenchimento de dados pessoais.
## Estrutura de um formulário
Antes de mais nada, precisamos entender que um formulário é definido com a tag `form`. Quando declaramos `form`, ele vem acompanhado de um atributo chamado `action`, sua função é apenas coletar e levar todas as informações que foram inseridas no formulário para nosso documento, seja ele HTML, PHP, entre outros. Para definirmos qual documento queremos que o usuário seja direcionado, basta colocarmos o caminho dele dentro do atributo `action`.
Vamos imaginar que criamos dois documentos HTML, um colocamos o nome de `cadastro.html`, e o outro de `home.html`. No `cadastro.html`, iremos abrir a tag `form`, e no atributo `action`, vamos colocar `./home.html`, para que assim, o usuário seja direcionado para a página `home.html` ao concluir o preenchimento do formulário. Ficando dessa forma:
```html
```
Em seguida, dentro de `form` irá conter as demais tags, onde cada uma terá sua função, hoje, vamos conhecer um pouco sobre o `input`, sendo ele, uma das principais tags quando estamos trabalhando com formulários.
[  ](https://www.treinaweb.com.br/lp/aula-gratis/)
### Input
O `input` nada mais é do que a “caixa” onde o usuário irá interagir com a página, digitando os dados que estão sendo solicitados. Uma característica muito importante dessa tag é que ela não necessita da tag de fechamento, porém, ela vem acompanhada de um atributo conhecido como `type`.
O `type` serve para definirmos como que o nosso `input` irá se comportar, temos diversas opções, veremos as mais utilizadas, sendo elas:
[  Curso HTML5 + CSS3 - Box model e Posicionamento de Elementos Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-box-model-e-posicionamento-de-elementos)
- text
- password
- email
- date
- submit
Primeiramente falaremos sobre o `type` com o valor de `text`, nele podemos inserir letras e números, uma característica do `type` é que, quando não definimos qual tipo ele será, por padrão, ele assume o tipo `text`. No código, fica dessa forma:
```html
```
Ainda assim, temos em sequência, o `type` com o valor de `password`, quando declaramos esse valor para `type`, ele irá se comportar como um campo responsável para ser inserido senhas, aceitando também letras e números. Por ele ser do tipo `password`, ele não irá permitir que visualize o que está sendo digitado, ficando apenas caracteres de bolinhas. No código irá ficar assim:
```html
```
No navegador veremos dessa forma:
Agora, temos o `type` com o valor de `email`, bom, como o próprio nome diz, aqui é onde iremos inserir nosso e-mail. No código, fica dessa forma:
```html
```
Uma característica muito importante do `type` com o valor de `email`, é que ele por padrão, já possui uma validação de e-mail, não permitindo que o usuário digite seu e-mail sem o @.
Já o `type` com o valor de `date`, serve para inserir datas, podendo colocar dia, mês e o ano. Ficando assim:
```html
```
Por fim, temos o `type` com o valor de `submit`, a função do `submit` é enviar os dados do formulário para a página onde definimos no atributo `action`. Ele vem acompanhado do atributo `value`, e nele colocamos o nome que fizer mais sentido, por exemplo, “enviar”, já que ele se comporta como um botão.
```html
```
### Exemplo de formulário
Só para exemplificar, vamos observar um formulário completo para que o entendimento fique melhor.
Antes de mais nada, vamos criar dois documentos `html`, um com o nome de `cadastro.html` e outro com o nome de `home.html`. Após isso, dentro de `cadastro.html`, declaramos o seguinte código:
```html
Cadastro
Insira seu nome completo:
Insira sua senha:
Digite seu e-mail
Insira sua data de nascimento
```
No navegador, será apresentado dessa forma:
[  Curso HTML5 + CSS3 - Apresentação de Dados Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-e-css3-apresentacao-de-dados)
Agora, em `home.html`, iremos declarar a tag `h1` para inserirmos um título com a seguinte frase: “Parabéns, você acaba de concluir seu primeiro formulário!”. Com isso, teremos uma pequena interação com o usuário e a página web.
```html
Home
Parabéns, você acaba de concluir seu primeiro formulário!
```
No navegador, veremos dessa forma:
O que vimos aqui é um formulário onde não há um visual agradável para os usuários. Caso queira mudar isso, existe uma linguagem chamada [CSS](http://www.treinaweb.com.br/blog/o-que-e-e-como-comecar-com-html-e-css "CSS") que trabalha em conjunto ao HTML. Sua função é realizar estilizações nos documentos.
### Veja na prática como trabalhar com formulários em seus projetos
## Conclusão
No artigo de hoje, vimos que usando apenas a nossa criatividade, conseguimos criar uma interação entre o usuário e a página web fantástica!
Além do mais, para o desenvolvimento de páginas, esse recurso é essencial, pois é através dele que iremos coletar as informações necessárias do usuário.
- [ #HTML5 ](https://www.treinaweb.com.br/blog/tag/html5)
- [ #desenvolvimento web ](https://www.treinaweb.com.br/blog/tag/desenvolvimento-web)
- [ #Formulários ](https://www.treinaweb.com.br/blog/tag/formularios)
- [ #Desenvolvimento Front-End ](https://www.treinaweb.com.br/blog/tag/desenvolvimento-front-end)
Autor
## Rafael Oliveira
Estudante de programação, atualmente me especializando no Front End. Faço curso de Desenvolvimento de Sistemas na Escola Tecnica Estadual Doutora Ruth Cardoso e o meu principal objetivo é me tornar um Full Stack. Nas horas vagas costumo cozinhar, pois sou apaixonado pela área da culinária.
[Todos os artigos](https://www.treinaweb.com.br/blog/autor/rafael-oliveira)
## Continue estudando
Transforme leitura em prática com os cursos e formações da TreinaWeb.
[Ver cursos](https://www.treinaweb.com.br/cursos)
Continue lendo
## Artigos relacionados
-  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end)
6 anos atrás
## [ Trabalhando com JavaScript no navegador ](https://www.treinaweb.com.br/blog/trabalhando-com-javascript-no-navegador)
Ao utilizar JavaScript para desenvolvimento web, é necessário entender o funcionamento do DOM (Document Object Model). O DOM é o que permite o acesso aos elementos HTML/XML para manipulá-los de forma que seja interessante para os nossos objetivos como desenvolvedor.
Ler artigo
-  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end)
4 anos atrás
## [ O que é HTML? ](https://www.treinaweb.com.br/blog/o-que-e-html)
No artigo de hoje, será abordado o tema HTML, nele irá conter desde sua história, quem o criou e como deve ser montada sua estrutura.
Ler artigo
-  [ CSS ](https://www.treinaweb.com.br/blog/categoria/css)
3 anos atrás
## [ Guia da linguagem CSS ](https://www.treinaweb.com.br/blog/guia-da-linguagem-css)
Nesse guia completo veremos como funciona e quais as formas de criar estilizações com CSS, necessário para qualquer desenvolvedor front-end
Ler artigo
-  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end)
4 anos atrás
## [ Guia da linguagem HTML ](https://www.treinaweb.com.br/blog/guia-da-linguagem-html)
Esse guia é perfeito pra você que está começando ou quer entender melhor como podemos trabalhar com a linguagem HTML .
Ler artigo
-  [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software)
4 anos atrás
## [ Estrutura de pastas e arquivos com React ](https://www.treinaweb.com.br/blog/estrutura-de-pastas-e-arquivos-com-react)
Aprenda a criar uma estrutura de pastas e arquivos com React para ter uma aplicação com fácil manutenção e escalável.
Ler artigo
-  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end)
5 anos atrás
## [ Formas de se trabalhar com Bootstrap 5 ](https://www.treinaweb.com.br/blog/formas-de-se-trabalhar-com-bootstrap-5)
Existem algumas maneiras diferentes de se trabalhar com Bootstrap em nossos projetos, vamos descobrir todas as formas do uso do framework.
Ler artigo
-  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end)
3 anos atrás
## [ Criando máscara monetária com expressões regulares ](https://www.treinaweb.com.br/blog/criando-mascara-monetaria-com-expressoes-regulares)
Nesse artigo aprenderemos a criar uma máscara para inputs que irá deixar seus projetos mais profissionais utilizando as expressões regulares.
Ler artigo
-  [ React ](https://www.treinaweb.com.br/blog/categoria/react)
4 anos atrás
## [ Como instalar e executar o React ](https://www.treinaweb.com.br/blog/como-instalar-e-executar-o-react)
Veja neste artigo como instalar e executar o React, então confira neste artigo como instalar o React por CDN (Link) e CLI (Linha de comando)
Ler artigo
-  [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software)
8 anos atrás
## [ Flux - descubra o motivo do sucesso dessa arquitetura em grandes empresas ](https://www.treinaweb.com.br/blog/flux-descubra-o-motivo-do-sucesso-dessa-arquitetura-em-grandes-empresas)
Conheça a Arquitetura Flux e entenda o motivo dela estar se tornando cada vez mais requisitada no mercado de trabalho ao se desenvolver sistemas.
Ler artigo
-  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end)
6 anos atrás
## [ Trabalhando com arrays e objetos no JavaScript ](https://www.treinaweb.com.br/blog/trabalhando-com-arrays-e-objetos-no-javascript)
Confira neste artigo como trabalhar com Arrays e Objetos no JavaScript. Vamos aprender a declarar e manipular Arrays e Objetos com exemplos.
Ler artigo
-  [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end)
2 anos atrás
## [ Validação de dados em aplicações Django ](https://www.treinaweb.com.br/blog/validacao-de-dados-em-aplicacoes-django)
Aprenda como trabalhar com validação de dados em aplicações Django, utilizando validações padrões e customizadas.
Ler artigo
-  [ Entrevistas ](https://www.treinaweb.com.br/blog/categoria/entrevistas)
9 anos atrás
## [ TW Entrevista 02: Felipe Moura ](https://www.treinaweb.com.br/blog/tw-entrevista-02-felipe-moura)
Fizemos uma série de entrevistas com desenvolvedores chamada “TW Entrevista”. O entrevistado de hoje é o Felipe Moura, co-fundador da Nasc e da maior conferência de JavaScript do mundo, a BrazilJS.
Ler artigo
## Um ano de acesso total para você viver de programação.
Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho.
- **1 ano** de acesso a **todos os cursos**
- Cursos novos **toda semana**
- Suporte **direto com professores**
- Plano de carreira **personalizado**
- **Certificados digitais** inclusos
- **Aplicativos** para Android e iOS, com **acesso offline**
**Garantia incondicional de satisfação**
Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro.
### Acesso completo a todos os cursos e dezenas de Formações.
12 meses
Economize R$ 840,00 54% OFF
de 12x R$ 129,00 por apenas
12x R$ 59,00
sem juros no cartão de crédito ou R$ 599,00 à vista
Oferta termina em **04h 14min 50s**
- Acesso imediato e ilimitado durante 1 ano.
- Plano de carreira personalizado.
- Suporte direto com professores.
- E muito mais!
[Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26)
[ ](https://www.treinaweb.com.br)
Escola online de programação, tecnologia e IA.
- [ ](https://www.facebook.com/TreinaWeb/)
- [ ](https://www.instagram.com/treinaweb/)
- [ ](https://www.youtube.com/user/TreinaWeb)
- [ ](https://twitter.com/treinaweb)
- [ ](https://www.linkedin.com/company/treinaweb)
- [ ](https://github.com/treinaweb)
## Inscreva-se em nossa newsletter
Receba lançamentos, promoções e novidades.
Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se
## Cursos
- [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs)
- [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end)
- [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end)
- [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile)
- [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados)
- [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing)
- [ IA ](https://www.treinaweb.com.br/categoria/ia)
- [ E mais ](https://www.treinaweb.com.br/categoria/e-mais)
- [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos)
## Conteúdo
- [ Formações ](https://www.treinaweb.com.br/formacoes)
- [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos)
- [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto)
- [ Planos ](https://www.treinaweb.com.br#assinatura)
- [ Depoimentos ](https://www.treinaweb.com.br#depoimentos)
- [ Comunidade ](https://www.treinaweb.com.br#comunidade)
- [ Corpo docente ](https://www.treinaweb.com.br#docente)
## A empresa
- [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre)
- [ Perguntas frequentes ](https://www.treinaweb.com.br#faq)
- [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb)
- [ Cursos para empresas ](https://www.treinaweb.com.br/empresas)
- [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso)
- [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco)
- [ Artigos ](https://www.treinaweb.com.br/blog)
- [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers)
- [ Contato ](https://www.treinaweb.com.br/contato)
- [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade)
- [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso)
## Baixe nosso aplicativo
[ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile)
Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58