Dicas para formulários web

Seguem algumas dicas para se estruturar um formulário HTML funcional, especialmente na integração com back-ends em PHP.

A tag “form”

A tag form deve ter alguns atributos, como via de regra. São eles:

action
Indica para onde o formulário será submetido. A URL que vai receber os dados.
method
O método usado para enviar os dados. Os mais comuns são POST e GET. 
enctype
Se o formulário for enviar um arquivo, este atributo deve ser definido como multipart/form-data, casi contrário, o arquivo não será enviado com os dados.

Não é necessário e nem faz sentido a tag form ter um atributo name.

Os campos do formulário

Para que os campos do formulário sejam enviados para o backend, eles devem ter o atributo name. A ausência desse atributo faz com que o campo não esteja presente na requisição. Outro atributo importante é o value. Mais sobre isso a seguir.

Tipos de campos de entrada

Os campos de entrada mais comuns em formulários web são os input‘s. Eles podem ser de diversos tipos, como:

text
O mais comum, define que a entrada de texto será livre. Qualquer texto será aceito.
Em dispositivos móveis, o teclado padrão será exibido.
password
Campo para senhas. O texto digitado será ofuscado por outros caracteres para prevenir que outras pessoas vejam o que está sendo digitado.
submit
Funciona como um botão para enviar os dados para o servidor. Prefira usar uma tag como <button type="submit">Enviar<\button>.
reset
Serve para limpar o formulário, e apagar os dados preenchidos. Prefira usar uma tag como <button type="reset">Limpar<\button>.
radio
Normalmente usado em grupos para definir uma opção de um conjunto de possíveis. Apenas uma será marcada. Para funcionar, todas as opções do mesmo grupo devem ter o mesmo atributo name, porém com valores diferentes no atributo value.
checkbox
Identifica uma opção, ou várias num grupo. Similar aos inputs do tipo radio, porém permitem múltiplas seleções. Novamente, quando aplicável, deve ser agrupado pelo atributo name, mas aqui deve-se observar um detalhe: por ser possível enviar múltiplos valores, para que o back-end trate corretamente todos os valores, o name do campo deve terminar com []. Por exemplo: opcoes[]. Veja um exemplo mais completo:
<label>
	<input type="checkbox" name="opcoes[]" value="1">
	Um
</label>
<label>
	<input type="checkbox" name="opcoes[]" value="2">
	Dois
</label>
button
Exibe um botão. Por isso, é mais indicado usar a tag <button type="button">Botão</button>.
hidden
É um campo escondido cujo valor não pode ser editado pelo usuário. Usado para passar parâmetros que não necessitam da intervenção do usuário, como identificação do formulário ou tokens de autenticação.
file
Usado para enviar um arquivo.

Novos inputs com HTML5

A especificação do HTML5 trouxe novos tipos para os campos input:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Alguns destes ainda não estão bem padronizados pelos navegadores, mas outros (destacados) são bastante interessantes e devem ser utilizados sempre que possível. Fazem sentido semântico, bem como exibem controles auxiliares e validações (quando aplicável) que auxiliam o usuário a os preencherem.

Em dispositivos móveis, por exemplo, o input do tipo tel exibe um teclado numérico para facilitar a entrada de dados do usuário:

Teclados semânticos para input do tipo tel

Já num input tipo email, o teclado se ajusta, facilitando a digitação de um e-mail:

Teclados semânticos para input do tipo email

Outro exemplo notável é o tipo search. Ele pode trazer o histórico de buscas recentes no seu computador local e/ou nas páginas do seu site como autocomplete. E ainda permite limpar a busca. Veja mais informações no CSS-Tricks.

Sobre “labels”

Tags label são usadas para identificar os campos. Além disso, elas podem e devem ser usadas associadas diretamente aos controles. Isso permite clicar sobre uma label e por associação ativar ou focar o campo associado. Exemplos:


Nos exemplos acima, ao se clicar sobre a label do checkbox, ele é marcado/desmarcado automaticamente. Nenhum JavaScript necessário. Já no caso de input‘s digitáveis, o campo é focado e permite digitação.

Há duas formas de utilizar as tags label associadas aos campos.

A primeira é usando o atributo for na tag label. O atributo for é associado ao atributo id de um campo. Não confunda com o atributo name. Neste caso, é o id quem manda. Exemplo:

<label for="label_example2">Clique em mim também</label>
<input id="label_example2" type="number">

A segunda maneira é abraçar o controle que se deseja associar com a label. Este método é mais comumente usado com inputs tipo checkbox ou radio. Exemplo:

<label>
    <input type="checkbox">
    Qualquer texto dentro do label fica associado ao controle dentro da mesma label
</label>

Outros tipos de controle

Além dos input‘s, também temos outros controles, como select‘s, textarea‘s e button‘s.

Select

Controles select, também chamados de combos ou drop-down, trazem uma lista de opções, cada uma com seu valor (atributo value), para que o usuário selecione uma (ou várias).

O que vai determinar se o usuário poderá selecionar apenas uma opção, ou várias, é o atributo multiple. Ele altera completamente o visual do controle, mas seu markup é o mesmo, exceto pelo atributo multiple:



Nos exemplos acima, são usadas tags (opcionais) optgroup dentro do select para agrupar as opções (cachorros e gatos, no exemplo). optgroup‘s recebem o atributo label para definir o nome do grupo exibido:

<optgroup label="Gatos">
    <option value="Balinês">Balinês</option>
    <option value="Siamês">Siamês</option>
</optgroup>

Cada opção dentro do select (e opcionalmente dentro do optgroup) tem um atributo value. Quando a opção é selecionada, o controle (select) passa a ter aquele valor por consequência.

Textarea

O elemento textarea indica um campo de texto digitável que suporta múltiplas linhas de texto. De forma sucinta, este controle permite que se digite texto e que se possa quebrar a linha do texto usando Enter/return no teclado.

Botões

Como já mencionado, botões são semanticamente preferíveis à certos tipos de input‘s, como os de tipo button, submit e reset.

Um tipo de botão em específico que merece destaque é o submit. Este botão faz com que o form que o contém seja enviado para seu destino.

É muito importante definir o atributo type de um botão. Navegadores diferentes podem ter valores-padrão diferentes para botões sem este atributo, e os resultados ao se acionar o controle podem diferir de um navegador para outro.


Espero que este breve resumo possa auxiliar alguém.

Se você tiver alguma dica ou comentário, por favor, deixe-o abaixo.