Usar formulários em páginas da internet é uma funcionalidade muito aplicada, principalmente quando pensamos na interação entre os usuários e o web site. Os formulários enviam dados para um servidor e também podem ser usados para alguma funcionalidade da página.
Quando você interage de alguma forma com uma página, seja fazendo um login ou respondendo uma pesquisa ou questionário, você está experimentando uma interação através de um formulário HTML.
Se você usar apenas HTML, você vai conseguir criar um formulário, mas integrando com uma linguagem de programação como CSS ou JavaScript, você consegue estilizar esse formulário e tornar a sua exibição mais amigável.
O que será abordado neste artigo, vai permitir que você compreenda um pouco mais sobre essa ferramenta, a importância da sua utilização e como tornar esse formulário eficiente, amigável e útil. Ressaltamos que o uso da ferramenta de formulários não é uma funcionalidade básica, por isso é importante conhecer primeiro outras ferramentas HTML para então partir para esse módulo.
Estrutura básica de um formulário
Um formulário HTML é composto por um pelo menos um widget. Esses widgets podem ser campos de texto de uma ou várias linhas, menus selecionáveis, checkboxes ou radio buttons. Mais frequentemente, esses elementos são apresentados junto com uma legenda que explica o seu propósito.
Para começar a trabalhar em um formulário, você precisa de um editor de texto ou ainda um editor de código HTML e um navegador. Veja antes o básico de HTML para iniciantes.
<form>
Essa é a tag usada para definir o início de um formulário. Esse elemento vai conter todos os campos do formulário, que podem ser desde inputs de texto até caixas de seleção.
É importante também definir o atributo action ou method:
Action: define a URL para onde serão enviados os dados do formulário quando este for submetido.
Falaremos com mais detalhes sobre esses atributos mais a frente. Escolha sempre o método apropriado e dê prioridade para o uso POST, que tem mais segurança no tráfego dos dados.
<input>
Ao adicionar os elementos de entrada <input> você vai capturar dados do usuário como campos de texto, caixas de seleção, botões de rádio e outras funções. Esse é a parte principal de um formulário, pois é ele que permite que o usuário insira os dados que serão enviados e posteriormente manipulados.
| Nome do atributo | Descrição do atributo |
|---|---|
| type | Define qual o tipo de elemento de entrada. |
| value | Define o valor para o elemento. |
| name | Especifica o nome daquele elemento e pode ser útil para identificar o dado enviado pelo usuário. |
| data | Controle para inserir uma data (ano, mês e dia) |
| required | Especifica que o usuário deve preencher o campo com um valor (campo obrigatório). |
| radio | Botão de escolha/seleção. |
| Editar um endereço de e-mail. | |
| file | Permite que o usuário selecione e envie um arquivo. |
Conheça ainda a lista completa de atributos para o elemento input, para criar formulários mais interativos e com mais semântica.
<textarea>
Esse elemento fornece um controle de edição para uma caixa de texto, o que é útil, já que permite que os usuários entrem com um texto mais extenso em formato livre, como um comentário ou um formulário de feedback. Esse elemento aceita ainda alguns atributos como o autocomplete, disabeld, autofocus, required e outros.
<button>
Essa tag é usada para incluir um botão de envio, usado normalmente no fim dos formulários para que o usuário possa enviar os dados previamente coletados. É um botão clicável. O valores possíveis são:
- submit: botão para enviar os dados do formulário para o servidor
- reset: restaura os controles para os valores iniciais.
- button: não possui um comportamento padrão, podendo ser definido os scripts pela pessoa que está a desenvolver o site.
Exemplo mais comum: <input type="submit">
Tipos de entrada
O atributo type define o tipo de elemento de entrada <input> a ser preenchido pelo usuário. É ele que vai indicar o tipo de dado permitido, se um número, uma data, um e-mail. Conheça mais elementos e tags base do HTML. Os navegadores vão selecionar o widget e o comportamento apropriado para cada tipo.
Veja alguns exemplos de type:
Text
type="text" é o campo usado para capturar uma única linha de texto. Muito usado para coletar dados como nome, sobrenome, endereço, cidade...
type="email" esse campo só pode ser enviado se estiver vazio ou se possuir um único endereço de e-mail válido. Se a pessoa digitar dois endereços de e-mail não vai conseguir submeter o formulário.
Password
type="password" oculta os caracteres digitados pelo usuário. Você pode associar com o atributo maxlength para especificar o cumprimento máximo da senha a ser inserida.
Radio
type="radio" oferece a opção de selecionar apenas uma opção dentro de uma lista. Deve usar o atributo value para determinar o valor a ser enviado por esse item.
Checkbox
type="checkbox" oferece ao usuário a opção de selecionar mais de uma escolha dentro de um conjunto de opções. Assim como no tipo Radio, você deve usar o atributo value para definir o valor a ser enviado por esse item.
Atributos importantes
Em uma tag <form> é preciso definir os seguintes atributos: action ou method. O primeiro é essencial para definir o destino dos dados, que geralmente é um script no servidor, e o segundo define o método de envio dos dados. Entenda melhor cada um desses atributos a seguir.
Action
Ao definir o atributo action na tag <form> você estará especificando o destino dos dados desse formulário. Esse atributo define, através de uma URL, o local para ao qual os dados recolhidos em um formulário serão enviados. Na maioria dos casos, a finalidade principal de um formulário é enviar dados para um servidor.
O servidor processa os dados e envia então uma resposta para o usuário. Pode parecer simples, mas isso envolve algumas questões bem importantes. A primeira delas é que o valor do atributo action precisa ser uma URL válida.
Você pode especificar uma URL que use HTTP seguro, em que os dados serão criptografados, mas lembre-se que se especificar uma URL não segura os navegadores vão exibir um alerta de segurança para o usuário.
Method
Este atributo é o que vai definir o método em que esses dados serão enviados. Os dados coletados em um formulário HTML pode ser enviado através de dois métodos, GET ou POST.
O método GET é o método padrão de envio, mas não deve ser usado para coletar dados sensíveis. O navegador pode pedir ao servidor para enviar de volta um recurso específico usando esse método: "Hey servidor, eu quero obter este recurso.". Neste caso, o navegador envia um objeto sem conteúdo.
Já o método POST é um pouco diferente. Aqui o navegador envia para o servidor um pedido de resposta que leva em conta o que foi preenchido pelo usuário. Algo tipo: "Hey servidor, eu quero que você olhe esses dados e me envie de volta os resultados." Sempre que for enviar dados sensíveis ou um conteúdo grande, dê prioridade para o uso do método POST.
Name
O atributo name é o nome do controle, que é enviado junto com os dados do formulário. Esse campo é importante para que você consiga identificar o campo enviado pelo usuário. Por isso, descreva um nome que te leve a identificar rapidamente aquele dado.
Placeholder
Esse atributo é usado para dar uma dica ao usuário do que ele deve inserir no campo, por exemplo: "Digite aqui seu endereço completo com CEP". É aplicável apenas quando o type é text, search, tel, url ou email.
Usar esse atributo fará quem que o usuário compreenda melhor qual informação ele precisa inserir naquele campo específico do formulário.
Estilização de formulários com CSS
Criar um formulário apenas em HTML vai atingir o objetivo? Sim. Esse formulário vai ser bonito? Não. Isso porque o HTML não permite adicionar campos de personalização da aparência. Para isso, use o CSS para personalizar cores, fontes, bordas, espaçamentos.
Com o CSS você também pode criar seletores específicos para cada elemento do formulário e ainda definir as propriedades desejadas para cada seletor.
O CSS é uma linguagem de programação, diferente do HTML que é uma linguagem de marcação. Então para partir para esse ponto, é preciso ter algum conhecimento prévio de programação básica.
Os elementos HTML são organizados em uma ordem, e você vai usar uma classe CSS para selecionar e alterar a aparência de cada elemento. Além de estilizar a aparência de cada um dos componentes do formulário HTML, é possível alterar outros elementos, como erros, avisos e campos de validação.
Para aprender mais sobre como otimizar e estilizar o seu formulário HTML com o CSS, agende uma aula particular de programação com um Superprof.
Validação de formulários (básica e HTML5)
O HTML5 trouxe algumas novidades e uma dessas novidades é a possibilidade de validar formulários no client-side, sem a necessidade de utilizar o Javascript para isso. Isso permite que o desenvolvedor ganhe bastante tempo.
A validação de um formulário garante que os usuários preencham todos os dados no formato correto, garantindo que depois esses dados funcionem nos aplicativos.
São aquelas famosas mensagens de alerta apresentadas quando preenchemos algum dados errado em algum formulário. Por exemplo: "Por favor, insira um endereço de e-mail válido" quando a sua entrada for algo diferente do formato padrão de um e-mail (email@email.com).
A vantagem do HTML 5 é que ele já permite essa validação sem necessidade de usar outra linguagem de programação. Isso é feito através do uso de atributos de validação nos elementos do formulário, permitindo especificar as regras para a entrada de dados e o padrão que aquele campo deve corresponder (se um número, um texto com no mínimo X caracteres, um endereço de e-mail...). Quando algum desses elementos for inválido, o navegador bloqueará o envio do formulário e exibirá uma mensagem de erro.
Essa validação no HTML5 só é possível devido a novos atributos da tag <input>, são eles: type, pattern e require.
Type: indica como os dados serão tratados.
Pattern: usa de expressões regulares para definir como o campo deve ser preenchido.
Require: indica a obrigatoriedade do preenchimento do campo.
Se você ainda tem dúvidas sobre formulários HTML e todo o seu potencial de uso, que tal agendar uma aula particular de programação com um dos nossos professores. A Superprof pode te ajudar na busca pelo professor ideal para o seu objetivo.
Nota de rodapé:
- GET: método padrão para envio de dados não sensíveis. Anexa os dados do formulário URL em pares e você consegue ver no navegador na barra de endereços. ↩︎
- POST: método mais adequado para envio de dados sensíveis, pois envia os dados como parte do corpo da solicitação HRRP. Não há limites para a extensão dos dados. ↩︎
Gostou desse artigo? Deixe uma nota!
Loading...
