Inputs (campos de entrada)

Elementos pelos quais a pessoa fornece informação ou executa ação na interface: campo de texto, checkbox, dropdown, slider.

Hard

O que é

Inputs, ou campos de entrada, permitem que a pessoa forneça informação ao sistema. Eles vêm em várias formas, como texto, número, checkbox, radio, dropdown e slider, e a entrada pode acontecer por teclado, mouse, toque, voz ou upload de arquivo. O campo de texto é o mais comum e aparece em formulário e diálogo.

O sistema usa o input pra coletar informação, e algumas boas práticas reduzem o risco de falhar nisso: rótulo e instrução claros, contraste e alcance por teclado, esforço mínimo, com autocomplete e opção pré-preenchida, e o tipo de input adequado ao dado, como date picker pra data e slider pra número.

Os estados de input dão feedback e mostram como interagir. Tem o habilitado, que está pronto pra uso, o desabilitado, que não aceita interação, o hover, com o cursor sobre o campo, o focado, ativado por clique ou toque, o de erro, com formato ou valor inválido, e o de sucesso, validado e pronto pra envio.

Em uma frase

Pra data vamos usar date picker, e o input de email precisa de estado de erro na hora.

A pergunta que ele responde

Que tipo de campo eu uso pra cada dado pra reduzir o esforço de quem preenche?

Quando usar

Ajuda em qualquer formulário, diálogo ou tela onde a pessoa precisa fornecer informação ou fazer escolha.

Como não usar

O cuidado é não deixar input sem rótulo claro, sem estado de erro ou com o tipo errado pro dado, porque tudo isso aumenta o esforço e a taxa de falha.

Na prática

Pense no momento de desenhar um formulário. O time escolhe date picker pra data e slider pra faixa numérica, e dá o feedback de erro na hora, em vez de só lá no envio.

Não confunda com

Vale separar input de botão. O input recebe ou seleciona informação, seja texto ou escolha, enquanto o botão dispara a ação. O campo e o gatilho têm papéis diferentes dentro do formulário.

D

Em inglês

Inputs

Pronúncia

ín-puts

Também chamado de

inputs, campos de entrada, campos de formulário

Origem

n/a

Fonte

Saiba mais

Nielsen Norman Group, artigo sobre form design