# Crie um formulário eficiente e fácil de usar

### Selecione os componentes de entrada adequados

O design UX dos componentes de entrada em um formulário é crucial para a eficiência do formulário. Componentes escolhidos corretamente podem economizar esforço dos usuários e levar a melhores resultados. PocketBlocks oferece uma variedade de componentes de entrada, incluindo entrada de texto, entrada de número, lista de opções e botões de opção, cada um dos quais funciona para diferentes cenários.

Por exemplo, quando a entrada é gerada a partir de dados, use a lista de opções para permitir que os usuários preencham a entrada rapidamente.

<figure><img src="/files/W1FaOr9duSZJMIgQ65Qq" alt=""><figcaption></figcaption></figure>

Outros componentes de entrada, como rádio, são realmente úteis quando os usuários precisam escolher diretamente entre duas opções, por exemplo, para indicar se gostariam de se inscrever em uma atividade específica, como uma conferência.

<figure><img src="/files/NAj5aMxK5vigjiHk20ts" alt=""><figcaption></figcaption></figure>

A entrada de números também é um tipo de componente comumente usado – por exemplo, em um sistema de gerenciamento de pedidos.

<figure><img src="/files/D5OR6hHc7wstoBV6gmAM" alt=""><figcaption></figcaption></figure>

### Mantenha o layout limpo e consistente

Mantenha todos os comprimentos dos campos de entrada iguais para tornar o formulário visualmente organizado e coloque todos os campos de entrada em uma única coluna para obter melhor legibilidade.

<figure><img src="/files/S1mFLHb3nDcSDyGHZIPC" alt=""><figcaption></figcaption></figure>

### Agrupe o conteúdo com o divisor PocketBlocks

Use o componente PocketBlocks **Divisor** para agrupar campos de entrada relevantes para ajudar os usuários a processar informações de maneira organizada.

<figure><img src="/files/BB4VogY6elKFOtfeefXp" alt=""><figcaption></figcaption></figure>

### Adicionar feedback do usuário

O componente Formulário é frequentemente usado para operações CRUD, que às vezes podem ser arriscadas devido a erros humanos. Para evitar operações CRUD prejudiciais, você pode adicionar um modal de confirmação antes que os usuários enviem o formulário.

<figure><img src="/files/EURRVatb61OOP6bPc11Z" alt=""><figcaption></figcaption></figure>

Da mesma forma, uma notificação após o envio dos usuários fornece feedback oportuno. Você pode adicionar uma notificação global ao botão Enviar. No PocketBlocks, você pode adicionar notificações globais de três maneiras. Veja [notificação global](/portugues-brasil/construcao-de-aplicativos/design-app-ui/style-theme-and-usability.md#global-notifications) para saber mais.

### Limpe os campos de entrada no envio

Limpar os campos de entrada em um formulário após o envio ajuda os usuários a prosseguir com os envios subsequentes. Você pode definir na guia **Propriedades** e alternar **Redefinir após envio bem-sucedido**.

<figure><img src="/files/PqqykbUmttFqNNrMNGXI" alt=""><figcaption></figcaption></figure>

No entanto, às vezes é melhor deixar o formulário desmarcado — por exemplo, quando muitos dos valores permanecem os mesmos em envios subsequentes ou quando o usuário edita continuamente os dados. Nesses casos, você pode inserir um botão com um manipulador de eventos para limpar cada entrada ao clicar.

<figure><img src="/files/Ntn0SeydUeWkmCEcrw2y" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://pocketblocks.pedroza.dev/portugues-brasil/construcao-de-aplicativos/design-app-ui/design-an-efficient-and-user-friendly-form.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
