Conheça o app Formulários!

Este curso divide os formulários HTML em partes fáceis de entender. Nos próximos módulos, você aprenderá como funciona um formulário HTML e como usá-lo efetivamente em seus projetos. Use o painel de menu ao lado do logotipo do Learn Forms para navegar pelos módulos.

Você aprenderá a criar um formulário HTML básico, aprenderá sobre elementos de formulários HTML, estilizar formulários, ajudar usuários a inserir dados novamente, garantir que o formulário seja acessível e seguro, como testar seus formulários e sobre tipos específicos de formulários.

Cada módulo é cheio de demonstrações interativas e autoavaliações para você testar seu conhecimento.

Este curso é adequado para desenvolvedores de HTML iniciantes e avançados. Os primeiros módulos ajudam você a começar a criar formulários HTML, os outros fornecem mais detalhes. Você pode percorrer a série do início ao fim para ter uma compreensão geral dos formulários HTML ou escolher um módulo específico sobre o qual queira aprender mais.

Pré-requisitos

Antes de iniciar este curso, você precisa conhecer HTML. Para iniciantes em desenvolvimento da Web, confira o curso de introdução ao HTML do MDN para saber tudo sobre como criar marcações.

Demonstrações

Para a maioria das demonstrações, usamos o CodePen.

Você pode se perguntar de onde vêm os estilos nas demonstrações. Usamos uma folha de estilo geral incluída em todas as demonstrações, de modo que somente os estilos relevantes são mostrados nela. No CodePen, é possível selecionar os arquivos CSS incluídos nas configurações.

Controles e campos de formulários

Um controle de formulário é um elemento que permite a interação do usuário e a entrada ou seleção de dados: um <input>, <select>, <textarea> ou <button>.

Às vezes, o campo do formulário é usado para se referir a controles de formulário, em elementos específicos para entrada de texto: <input> e <textarea>.

Confira o que você aprenderá

Usar formulários para receber dados dos usuários

Aprenda as noções básicas de uso de formulários na Web com esta introdução ao elemento de formulário.

Ajudar os usuários a inserir dados em formulários

Uma visão geral dos vários elementos de formulário que você pode escolher para criar um formulário.

Ajudar os usuários a evitar a reinserção de dados em formulários

Facilitar o preenchimento de formulários para os usuários.

Ajudar os usuários a inserir os dados certos nos formulários

Saiba como validar seus formulários no front-end.

Testar seus formulários

Saiba como testar e analisar seus formulários.

Conceitos básicos de design

Saiba como criar formulários fáceis de usar.

Acessibilidade

Como criar formulários inclusivos

Internacionalização e localização

Esteja preparado para formatos de dados internacionais e saiba como planejar seu formulário para localização.

Segurança e privacidade

Saiba como proteger seus formulários e manter a privacidade dos dados dos usuários.

Preenchimento automático

Saiba tudo sobre o preenchimento automático e o atributo de preenchimento automático.

Como testar a usabilidade de formulários

Descubra como fazer testes de usabilidade e garanta que seu formulário funcione bem para todos os usuários.

Teste de formulários em vários dispositivos e plataformas

Seu formulário precisa funcionar em diferentes dispositivos, navegadores, plataformas e contextos.

Coleta de dados

Saiba como medir e analisar seu formulário.

O elemento do formulário em detalhes

Saiba em detalhes tudo sobre o elemento de formulário, quando usar um formulário e como ele funciona.

Detalhes dos campos do formulário

Saiba mais sobre os diferentes campos de formulário que podem ser usados e como escolher o elemento certo.

Detalhes dos atributos do formulário

Saiba tudo sobre atributos de formulário: como modificar o layout de teclados na tela, ativar a validação integrada e muito mais.

Como definir o estilo de formulários

Estilizar formulários usando CSS, garantindo que eles permaneçam utilizáveis e legíveis para todos.

Estilizar controles de formulários

Saiba como implementar controles de formulário com CSS.

JavaScript

Descubra como usar o JavaScript para aprimorar seus formulários.

Formulários de pagamento

Melhore as taxas de conversão criando formas de pagamento melhores.

Formulários de endereço

Ajude os usuários a preencher formulários de endereço de forma rápida e fácil.

Conclusão e próximas etapas

Outros recursos para ajudar você nas próximas etapas.

Então, você está pronto para aprender sobre formulários? Vamos começar.