Como Criar Formulários em Páginas Web
Aprenda a criar formulários em páginas web de forma eficiente com HTML. Descubra como configurar, personalizar e validar os dados do seu formulário na internet.
Para criar um formulário em uma página web, use a tag de formulário (<form>) do HTML para agrupar os campos. Cada campo usa elementos como input, textarea e select com um label descritivo. Defina o método (GET ou POST) e o destino (action), use atributos como required e type para validar e um botão de envio.
Caso prefira esse conteĂşdo no formato de vĂdeo-aula, assista ao vĂdeo abaixo ou acesse o nosso canal do YouTube!
Para receber por e-mail o(s) arquivo(s) utilizados na aula, preencha:
Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.
Como Criar Formulários em Páginas Web
Os formulários são elementos essenciais em praticamente todos os sites e sistemas online. Eles são a principal forma de coletar informações dos usuários, como dados de login, informações de pagamento, comentários ou feedbacks.
Nesta postagem, você aprenderá como criar formulários em páginas da internet de forma rápida e prática, construindo formulários simples e funcionais que podem ser incorporados aos seus projetos.
O que é um Formulário? Formulários em Páginas da Internet
Um formulário em uma página web é um espaço onde os usuários podem inserir dados que serão enviados ao servidor para processamento.
Esses dados podem incluir informações pessoais, preferências do usuário ou qualquer outra informação necessária para a operação de um sistema online.
Esse recurso é muito comum em diversas páginas da internet e saber como criar um bom formulário web pode afetar diretamente a experiência do usuário com a sua página e a eficiência dos processos desenvolvidos no back-end.
Iniciando o Projeto – Criando arquivo HTML no VS Code
Para desenvolvermos nosso formulário em HTML, utilizaremos o VS Code. Caso você ainda não tenha essa ferramenta instalada, confira nossa aula onde ensino como baixar e configurar as principais extensões dele: VS Code para HTML e CSS
Com o VS Code instalado, abra o programa e crie um arquivo index.html para dar inĂcio ao projeto.
Esse Ă© o nome padrĂŁo atribuĂdo Ă página principal de um projeto web, essencial para a estrutura do site.
Dentro desse arquivo, digite ! e pressione a tecla Tab. O VS Code reconhecerá que você deseja criar um arquivo HTML e construirá toda a estrutura básica para você.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
</html>Esse código é a base necessária para que o navegador interprete o documento HTML e gere uma página a partir dele.
Para visualizar a página criada, clique com o botão direito do mouse sobre o arquivo index.html e selecione a opção Open with Live Server.
Essa opção sĂł estará disponĂvel se vocĂŞ tiver instalado a extensĂŁo Live Server no seu VS Code. Com ela, podemos visualizar a página criada no navegador.
Por enquanto, não haverá nada sendo exibido porque só temos a estrutura base de um documento HTML, sem nenhum conteúdo efetivamente adicionado.
Estrutura da Página
A estrutura base de um documento HTML Ă© dividida em duas partes principais: <head> e <body>.
Dentro da <head>, sĂŁo inseridas as configurações gerais da página, como o tipo de caractere (UTF-8), a responsividade da página (largura e escala) e o tĂtulo (<title>) exibido nas guias do navegador.
Logo abaixo, temos o <body>, o corpo do documento, onde inserimos todo o conteĂşdo visĂvel da página e onde criaremos a estrutura do formulário.
Saiba mais: Aprenda HTML Semântico
Criando a Estrutura do Formulário – Formulários em Páginas da Internet
Dentro da tag <body>, teremos a estrutura visĂvel do formulário. Começaremos com um tĂtulo principal usando a tag <h1> com o texto “Meu formulário“.
As tags de heading variam de <h1> a <h6>, sendo <h1> a mais importante e <h6> a menos relevante.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Meu formulário</h1>
</body>
</html>Logo abaixo do tĂtulo, definiremos o formulário dentro de uma tag <form>. Essa tag recebe o atributo action=”index.html”, que especifica que, ao enviar o formulário, os dados serĂŁo processados pela página index.html.
O atributo action define para onde os dados do formulário serão enviados. Normalmente, isso é uma URL de um script no servidor que processa os dados enviados.
JavaScript ImpressionadorComo usar JavaScript em qualquer empresa e qualquer área, com exemplos totalmente aplicados à realidade do Mercado de Trabalho, seja para se tornar um Desenvolvedor Front End, Backend, Full Stack ou Mobile.
Começar agora
O estilo do formulário será definido diretamente dentro da tag <form> pelo atributo style, aplicando as propriedades display: flex; e flex-direction: column; para organizar os elementos verticalmente. Esse modelo de estilização é chamado de CSS Inline.
Ao aplicar o estilo de display flex, estamos tornando nosso formulário em um layout flexĂvel, que nos permite controlar a disposição dos elementos filhos contidos dentro dele, como os rĂłtulos <label> e os campos <input>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Meu formulário</h1>
<form action="index.html" style="display: flex; flex-direction: column;">
</form>
</body>
</html>Saiba mais sobre Flexbox e Flexcontainer nessa aula: Flexbox CSS – Noções Essenciais para um Layout FlexĂvel
Campos do Formulário
Os campos de entrada do formulário são definidos pela tag <input>, precedidos pelos seus respectivos rótulos na tag <label> para identificar cada campo de entrada.
Usaremos o atributo for na tag <label> para associar a label ao input correspondente atravĂ©s do id atribuĂdo a cada tag <input>, facilitando a navegação no formulário.
Cada tag <input> receberá quatro atributos: name, id, type e placeholder.
O atributo name atribui um nome ao campo de entrada, usado para identificar os dados do campo quando o formulário é enviado ao servidor.
O id é um identificador único para cada campo de entrada, usado principalmente para associar as tags <label> ao campo de entrada, melhorando a acessibilidade. O id também pode ser usado para estilização CSS ou manipulação via JavaScript.
O atributo type define o tipo de campo de entrada que será exibido, controlando como o campo será exibido e como os dados inseridos serão interpretados.
Dentro do nosso formulário, usaremos os seguintes tipos:
- text: Cria um campo de texto comum, onde o usuário pode digitar qualquer informação.
- email: Cria um campo de entrada especificamente para endereços de e-mail, que valida automaticamente se o que foi digitado tem o formato de um e-mail (nome@email.com).
Por fim, usaremos o atributo placeholder para exibir um texto de exemplo dentro do campo de entrada quando ele está vazio, que desaparece quando o usuário começa a digitar.
O placeholder serve para dar uma dica ao usuário sobre o tipo de informação que deve ser inserida.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Meu formulário</h1>
<form action="index.html" style="display: flex; flex-direction: column;">
<label for="nome">Nome</label>
<input name='nome' id='nome' type="text" placeholder="Daniel Porto">
<label for="email">Email</label>
<input name='email' id='email' type='email' placeholder="joaolira@gmail.com">
<label for="nascimento">Data de Nascimento</label>
<input name='nascimento' id='nascimento' type="text" placeholder="01/01/1934">
</form>
</body>
</html>
Botões de Ação
Para finalizar o formulário, podemos inserir dois botões, cada um com uma função especĂfica.
O botão Resetar, do tipo reset, limpa todos os campos do formulário, enquanto o botão Enviar, do tipo submit, envia os dados do formulário para a página especificada no atributo action.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Meu formulário</h1>
<form action="index.html" style="display: flex; flex-direction: column;">
<label for="nome">Nome</label>
<input name='nome' id='nome' type="text" placeholder="Daniel Porto">
<label for="email">Email</label>
<input name='email' id='email' type='email' placeholder="joaolira@gmail.com">
<label for="nascimento">Data de Nascimento</label>
<input name='nascimento' id='nascimento' type="text" placeholder="01/01/1934">
<button type="reset">Resetar</button>
<button type="submit">Enviar</button>
</form>
</body>
</html>
Com essa estrutura HTML, criamos um formulário simples, mas funcional, que captura informações básicas do usuário.
Cada tag e atributo foi escolhido para melhorar a acessibilidade, responsividade e usabilidade da página, criando uma interface simples, porém intuitiva e amigável para o usuário.
Conclusão – Como Criar Formulários em Páginas Web
Formulários em páginas da internet são uma parte fundamental de qualquer site, permitindo a interação entre o usuário e o sistema.
Com o passo a passo apresentado nesta aula, você estará apto a criar formulários funcionais e amigáveis, melhorando a experiência do usuário e garantindo que os dados sejam coletados de maneira eficiente.
Se vocĂŞ deseja aprofundar ainda mais seu aprendizado na construção de formulários web, confira nosso projeto completo sobre um formulário de Login com estrutura HTML e toda a estilização em CSS: Formulário de Login em HTML e CSS – Criando seu Projeto
Para aprender a criar páginas web interativas e tornar seus formulários e demais páginas na internet ainda mais completas e funcionais, verifique nosso curso completo: JavaScript Impressionador
Hashtag Treinamentos
Para acessar publicações de JavaScript, clique aqui!
Posts mais recentes de JavaScript
- Try Catch no JavaScript: Programação Defensiva na Prática
Aprenda a usar try catch no JavaScript e melhore a sua programação defensiva! - ExpressJS: Crie APIs de forma rápida e prática com JavaScript
O ExpressJS simplifica a criação de APIs com JavaScript e Node.js. Aprenda passo a passo a montar seu backend com rotas, testes e um exemplo prático de controle de estoque. - Método forEach no JavaScript: automatize tarefas repetitivas
Aprenda como usar o Método forEach no JavaScript para automatizar tarefas repetitivas e gerar tabelas dinâmicas de forma prática e eficiente.
Posts mais recentes da Hashtag Treinamentos
- Planilha de Controle de Notas Fiscais no Excel [Grátis]
Baixe a planilha de controle de notas fiscais no Excel grátis: calcule ISS e retenções, veja o que está em aberto e gere a cobrança de cada nota de serviço. - Qual IA usar na empresa: ChatGPT, Claude ou Perplexity?
Qual IA usar na empresa: veja as diferenças entre ChatGPT, Claude e Perplexity e quando cada um rende mais em cada área da sua equipe. - Apostilas Gratuitas em PDF: Excel, Power BI, Python e IA
Baixe apostilas gratuitas em PDF de Excel, Power BI, Python, Claude e agentes de IA, com exercĂcios e gabarito. Escolha a sua e comece hoje.
1. Como criar um formulário em HTML?
Use a tag de formulário (form) para agrupar os campos, adicione elementos como input, textarea e select com seus labels, defina o method e o action e inclua um botão de envio (button do tipo submit).
2. Como validar um formulário em HTML?
O HTML oferece validação nativa com atributos como required (obrigatório), type (email, number, url), minlength e pattern. Para regras mais complexas, complementa-se com JavaScript.
3. Qual a diferença entre GET e POST em um formulário?
No mĂ©todo GET os dados vĂŁo na URL, ideal para buscas e consultas; no POST vĂŁo no corpo da requisição, indicado para envio de dados sensĂveis ou grandes, como cadastros e logins.
4. Como deixar um campo obrigatório em um formulário?
Adicione o atributo required ao campo (por exemplo, um input de email com required). O navegador impede o envio do formulário enquanto o campo obrigatório não for preenchido corretamente.
