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.
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.
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.
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.
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.
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
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.
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
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:
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="[email protected]">
<label for="nascimento">Data de Nascimento</label>
<input name='nascimento' id='nascimento' type="text" placeholder="01/01/1934">
</form>
</body>
</html>
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="[email protected]">
<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.
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
Para acessar publicações de JavaScript, clique aqui!
Posts mais recentes de JavaScript
Posts mais recentes da Hashtag Treinamentos
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.