Bem-Vindo ao Meu Site

Formulários em HTML

4 min read , November 18, 2021

Formulários HTML são componentes de páginas Web que permitem que o visitante de uma página web deixe informações que podem ser usadas pelo site, através de controles como campos de texto, campos de opção, listas de seleção, entre outros.

Formulários HTML podem ser usados para:

• Obter a conta e a senha de um usuário, para oferecer acesso a recursos;
• Obter dados do usuário para processamento backend;
• Obter dados para aplicações frontend.

Para o caso de processamento Backend, os dados do formulário precisam ser enviados para um servidor Web.

Dados do formulário sendo enviados para um servidor web.

O servidor Web precisa ter um script pronto para receber os dados do formulário. Este script pode ser usado para armazenar os dados em um banco de dados, no servidor ou em um servidor auxilia, ou enviar estes dados para um email. Realizada a parte do servidor, é enviado ao usuário uma página de resposta.

Elementos para Criação de Formulários

Para criar um formulário usamos o elemento <form>. O elemento <form> em si não “faz nada”, é apenas usado para declarar o início e o fim de um formulário. Para aceitar a entrada de dados é necessário usar o elemento <input>.

O atributo type do elemento <input> define o tipo de entrada de informação que será criado. O elemento <input> é um elemento de substituição, ou seja, ele não possui uma tag de fechamento. Quando o elemento <input> é processado, ele é substituído pelo componente visual correspondente ao tipo de elemento de entrada definido.

Para identificar o <input> é necessário usar o elemento <label>. O elemento <label> pode ser declarado antes do <input> , depois do <input> ou conter o <input>. Quando declarado antes ou depois, o atributo for , relaciona o <label> com <input> por intermédio do atributo id. Esta forma de relação é denominada explícita. Caso o <label> contenha o <label> , esta relação é chamada de implícita.

O exemplo abaixo mostra um formulário para entrada de usuário e senha. Este formulário não funciona plenamente, pois não foi definida nenhuma forma de envio dos dados.

Exemplo de formulário para Login.

Componentes de um formulário

Um formulário é composto por um ou mais dos componentes abaixo:

• Campos de Texto;
• Caixas de Opção;
• Campos de Opção
• Campos de Seleção;
• e Botões.

Elementos do tipo caixa de seleção e opção

Alguns tipos de elemento <input>, como <email>e <url> possuem recursos básicos de validação de dados. Esta validação é feita pelo próprio navegador e pode variar de navegador para navegador.

Teste o exemplo abaixo:

Elementos com Validação de Dados

Elementos do tipo caixa de seleção e opção

Os elementos <input> do tipo radio e checkbox permitem a seleção de um elemento entre vários (radio) ou de vários elementos(checkbox). Para que estes elementos estejam relacionados, é necessário que possuam o mesmo valor para o atributo name.

O Atributo Name

O atributo name define o nome do controle de formulário e é particularmente importante para os elementos do tipo radio e checkbox pois permite que os elementos funcionem como um grupo.

Elemento Button

O elemento <button> deve ser usado sempre que se deseja criar um botão que realize alguma ação quando clicado ou ativado.

Elementos <button> são de 3 tipos:

• submit: Envia os dados para o servidor;
• reset: Limpa todos os dados do formulário correspondente;
• button: Não possui um comportamento padrão, permitindo ao programador criar o comportamento que deseja.

Botões

Elemento Select

Seletores ou campos do tipo seleção permitem ao usuário selecionar uma ou mais opções. Para criar seletores é usado o elemento <select> e o elemento <option>. O elemento <option> representa as opções que o usuário pode escolher.

Atributos Importantes

O atributo select do elemento <option> define qual das opções é a padrão, caso exista.

O atributo <optgroup> permite agrupar opções em categorias.

Exemplo de Campo de Seleção

Geradores de Formulários HTML

Não é difícil encontrar ferramentas online para criação de formulários HTML. Normalmente estes geradores são mantidos por intermédio de propagandas.

Geradores de formulários HTML são diferentes de ferramentas online de formulários como o Google Forms e o Jeforms.

As ferramentas online de formulários buscam simplificar não só o processo de criação de formulários, mas também a coleta dos dados. Algumas ferramentas também oferecem recursos para criação de formulários com estruturas de decisão, onde a resposta do usuário pode influenciar nas próximas perguntas que serão exibidas pelo formulário.

Exemplos de Geradores de Formulários HTML

BeautifyTools

Extenso conjunto de ferramentas e geradores para desenvolvimento web.

Exemplos de Ferramentas Online de Gestão de Formulários

Google Forms

Ferramenta online e gratuita para criação de formulários.

Microsoft Forms

Ferramenta concorrente do Google Forms, da Microsoft.

Typeform

Uma das mais completas soluções de formulário online. Permite criar formulários gratuitos, porém, limitados.

Referências

Seção da documentação oficial da linguagem HTML relativa a forms.