# Formulários

As regras que valem para o formulário inteiro, antes de qualquer campo: perguntar pouco, uma coluna, o rótulo à vista e o erro embaixo do campo.

## As regras do formulário inteiro

-   **Pergunte só o necessário.** Cada campo a mais é trabalho para a pessoa. Se dá para descobrir sozinho, não pergunte.
-   **Uma coluna.** Campos um embaixo do outro, na ordem em que a pessoa pensa. Lado a lado só quando são uma coisa só (hora e minuto).
-   **Rótulo sempre visível**, em cima do campo. O texto de exemplo nunca toma o lugar dele.
-   **Tudo é obrigatório**, a não ser o que diz "(opcional)". Marcar o opcional é mais curto do que espalhar asteriscos.
-   **Quanto mais perto, mais junto.** Dentro de um campo, `space-1`; entre as opções de um grupo, `space-2`; entre um campo e o próximo, `space-5`.
-   **O erro vai embaixo do campo**, com ícone e palavra, e um resumo no topo quando há mais de um. Embaixo, ele não quebra um formulário de duas colunas.
-   **O servidor valida sempre.** O erro volta com os valores preenchidos; nada do que a pessoa escreveu se perde.
-   **Um botão principal no fim**, dizendo o que acontece: "Salvar lembrete". O retorno aparece no próprio formulário.

## Um formulário inteiro

Nome do lembreteAparece na notificaçãoEscreva um nome

Quando lembrar?

Nota (opcional)

Formato da hora:

Tente salvar com o nome em branco: o erro aparece embaixo do campo, e o foco vai até ele. Com o nome, o retorno aparece no próprio formulário.

## Texto de exemplo (placeholder)

-   Permitido como exemplo extra, curto, embaixo de um rótulo que continua lá: "ex.: Regar as plantas", "Buscar tarefas".
-   Nunca no lugar do rótulo nem da dica: ele some quando a pessoa digita, e o que estava escrito some junto.
-   Nunca com informação necessária (formato obrigatório, limite): isso vai na dica, que fica.
-   Na cor do texto suave, que passa o contraste de 4,5.

## Bons e maus padrões

Faça assim

Assunto

O rótulo fica à vista, e o exemplo só ajuda.

Não faça

O exemplo no lugar do rótulo, e com uma regra dentro: tudo some quando a pessoa digita.

Faça assim

Nota (opcional)

Só o opcional é marcado, por extenso.

Não faça

Nome \*

Asterisco em tudo, com a legenda lá embaixo.

Faça assim

NomeEscreva um nome

O erro embaixo do campo, com ícone e palavra.

Não faça

Campo inválidoNome

O erro em cima, vago, e só pela cor.

## Como escrever

-   Rótulo: substantivo curto ou pergunta direta ("Nome do lembrete", "Quando lembrar?"). Sem dois-pontos no fim.
-   Dica: só se ajudar a acertar de primeira. Se todo campo tem dica, nenhuma é lida.
-   Erro: o que fazer, não o que está errado ("Escreva um nome", não "Campo inválido").

## Componentes

-   [Field, TextInput, TimeInput, Select, Checkbox, Radios, Switch](../formulario.html): as peças.
-   [ErrorMessage e ErrorSummary](../feedback.html): os erros.
-   [Retorno no lugar](/pt/design/retorno/): o que acontece depois do Salvar.