Campos de texto e número
É o campo em que a pessoa digita. O Texto serve para quase tudo — nome, e-mail, CPF, placa — e é a máscara que muda o comportamento: você escolhe "CPF" numa lista e os pontos aparecem sozinhos enquanto a pessoa digita. Você não escreve código: escolhe a coluna, o rótulo e, se precisar, a máscara.
Quando usar
Todos os campos desta página gravam numa coluna da tabela e aparecem como uma caixa de digitação. O que muda é o que a pessoa pode escrever e como o valor aparece formatado.
| Sua situação | Componente certo |
|---|---|
| Texto curto de uma linha: nome, e-mail, código | Texto |
| Texto de vários parágrafos: observação, descrição | Textarea |
| Texto com negrito, lista e link | HTML Editor |
| Senha, com olho para mostrar e regras de força | Senha |
| Código de verificação de 4 a 8 dígitos | OTP / PIN |
| Valor em dinheiro | Moeda |
| Quantidade inteira | Número |
| Decimal com vírgula: peso, cotação, percentual | Numérico |
| Só mostrar, sem deixar editar | Display |
| Escolher um item de uma lista da tabela | DB Combo |
Colocar o campo na tela
- Abra o formulário no Studio.
- Clique com o botão direito no ponto exato onde o campo deve aparecer — dentro da linha, ao lado do campo vizinho.
- No menu que abre, escolha Texto.
- Clique no campo recém-criado para o painel da direita mostrar as opções dele.
Dizer qual informação o campo guarda
Esta é a única parte obrigatória. Sem ela o campo aparece na tela mas não guarda nada.
- No painel, abra a seção Identificação.
- Nome: escolha a coluna da tabela onde o valor será gravado — no exemplo dos prints, nome. Se o campo é só auxiliar e não corresponde a nenhuma coluna, use o lápis e digite um nome livre.
- Label: o texto que a pessoa lê acima do campo.
- Abra Comportamento e preencha o Placeholder — o texto cinza que aparece dentro do campo enquanto ele está vazio.
- Use a Dica para explicar o formato esperado sem ocupar o rótulo.
Passe o mouse na lista — ou use ↑ ↓ depois de focar um item.
Exigir e conferir o que foi digitado
- Abra a seção Validação.
- Ligue Obrigatório se a tela não pode ser salva com esse campo em branco.
- Max Length: quantos caracteres o campo aceita. Deixe igual ao tamanho da coluna na tabela.
- Formato — e-mail, CPF, telefone, CEP — é trabalho da Máscara de digitação, no passo seguinte: ela impede o erro em vez de acusá-lo depois.
- As demais regras (tipo, tamanho, valor único) vêm do modelo de dados: o app confere ao salvar e mostra a mensagem abaixo do campo.
Formatar enquanto a pessoa digita
A Máscara de digitação faz o campo se formatar sozinho: a pessoa digita só os números e os pontos, traços e parênteses entram no lugar certo.
- Abra a seção Apresentação.
- Máscara de digitação: escolha uma da lista — CPF, CNPJ, CEP, Telefone, Data, Placa.
- Ligue Remover máscara ao salvar para gravar só os números na coluna.
- Forçar digitação: MAIÚSCULAS, minúsculas ou Cada Palavra. Útil em placa e em nome próprio.
- Ícone e Lado do ícone: um desenho dentro do campo — uma lupa em busca, um envelope em e-mail.
- Largura e Largura máxima: quanto o campo ocupa dentro da coluna.
- Estilo do label: cor, tamanho, peso e itálico do texto acima do campo.
- Destaque do campo: cor de fundo, cor do texto, negrito e itálico da caixa — para chamar atenção para um valor, como o total de um pedido.
999-AAA-99, e ele funciona na tela gerada — mas o editor não sabe conferir esse formato e
para de avisar quando ele está errado. Prefira sempre um item da lista.Testar antes de entregar
Salve a tela e publique no Teste online. Confira nesta ordem:
| O que fazer | O que tem que acontecer |
|---|---|
| Abrir a tela | O campo aparece com o rótulo e o texto cinza. |
| Digitar e salvar | O valor foi gravado na coluna escolhida. |
| Reabrir o registro salvo | O campo volta preenchido. |
| Salvar com o campo vazio | A tela não salva e a mensagem de erro aparece abaixo do campo. |
| Digitar um CPF | Os pontos e o traço aparecem sozinhos. |
| Conferir na tabela | Se "Remover máscara ao salvar" está ligado, a coluna tem só números. |
Problemas comuns
Digito, salvo, e o valor some ao reabrir
O Nome aponta para uma coluna que não existe na tabela — quase sempre porque foi digitado à mão em vez de escolhido na lista. Abra Identificação, apague o Nome e escolha a coluna na lista.
O valor grava com pontos e traços e o resto do sistema não reconhece
A máscara está ligada e Remover máscara ao salvar está desligado. Ligue em Apresentação.
A mensagem de erro aparece em inglês
O campo Mensagem de erro está vazio, e a tela usa o texto do navegador. Preencha Mensagem de erro em Validação.
O texto é cortado ao salvar
A coluna da tabela é menor do que o Max Length do campo. Deixe o Max Length igual ao tamanho da coluna, ou aumente a coluna no Modelo de dados.
Preciso de senha e o campo não esconde o que digito
Este é o campo de Texto. Troque para o componente Senha, que já vem com o olho e com as regras de força. Pelo cabeçalho do painel dá para trocar o tipo sem perder o que já foi configurado.
Referência: painel × código
Para quem também mexe no Blade, este é o de-para entre o painel e os atributos gerados.
| No painel | No código | Padrão |
|---|---|---|
| Nome | name | — |
| Label | label | — |
| Placeholder | placeholder | — |
| Valor padrão | default | — |
| Somente leitura | readonly | desligado |
| Dica | hint | — |
| Obrigatório | required | desligado |
| Max Length | maxlength | — |
| Máscara de digitação | mask | — |
| Remover máscara ao salvar | strip-mask | desligado |
| Forçar digitação | force-case | — |
| Ícone | icon | — |
| Cor do ícone | icon-color | — |
| Lado do ícone | icon-side | left |
| Largura | width | a coluna inteira |
| Largura máxima | max-width | — |
| Espaço do label | label-gap | 5px (do tema) |
| Cor do label (Estilo do label) | label-color | a do tema |
| Tamanho do label | label-size | 11px |
| Peso do label | label-weight | negrito |
| Label em itálico | label-italic | desligado |
| Cor de fundo (Destaque do campo) | input-bg | a do tema |
| Cor do texto | input-color | a do tema |
| Peso do texto | input-weight | normal |
| Texto em itálico | input-italic | desligado |
| Botão mostrar/esconder | toggle-password | desligado |
| Ao mudar | mad:change | — |