Campo Texto

INTRODUÇÃO:

Um campo de texto em um formulário web é um elemento no qual os usuários podem inserir texto livremente. É geralmente representado por uma caixa na interface onde os usuários podem digitar informações, como texto curto ou longo, números, endereços de e-mail, entre outros. Para texto muito longos existe outro elemento mais apropriado, chamado Área de texto.

PROPRIEDADES:

• Obrigatório:

  • Campo do tipo caixa de seleção que pode ser marcada (ativada) ou desmarcada (desativada). Quando marcada, fará com que o usuário do fluxo seja obrigado a alimentar dados neste campo, não sendo possível prosseguir para próxima tarefa sem preenchê-lo.

• Rótulo:

  • Nome ser exibido acima do campo para identificá-lo visualmente no formulário.

• Texto De Ajuda:

  • Texto onde pode ser documentada alguma informação que possa auxiliar o usuário no preenchimento do campo (visível ao passar o mouse sobre o ícone de interrogação “?”).

• Texto Explicativo Do Campo:

  • Valor inicial a ser exibido dentro do campo, como ilustração do valor esperado, utilizado para auxiliar o usuário no preenchimento. Também conhecido com “placeholder”.

• Nome:

  • Campo onde deve ser informado um valor único(a nível de formulário) em formato alfa numérico, que será usado como uma “variável” para armazenar e recuperar o valor informado pelo usuário.

• Valor:

  • Aqui poderá ser atribuído um valor inicial ao campo, utilizando um formato livre, tal como um numero inteiro ou decimal ou texto.

    Exemplos:

    CODE

    usuario.email@provedor.com.br

    CODE

    Uma_Senha_Qualquer

    CODE

    1.25 um numero mescaldo com texto

    Ao utilizar o valor do exemplo acima, o campo já será exibido inicialmente com este valor.

• Tipo (Type):

  • Campo Texto:

    • Faz com que o valor digitado seja visível no campo durante o preenchimento. Este é o comportamento padrão de um campo texto comum.

  • Password (Campo do tipo senha):

    • Ao selecionar esta opção fará com que a medida que o usuário vá preenchendo o campo, os valores digitados sejam mascarados, impedindo a visualização do valor digitado. Útil para campo onde é necessário informar uma senha.

• Comprimento Máximo:

  • Campo do tipo numero, onde é possível limitar a quantidade máxima de caracteres que o usuario pode informar no campo, como por exemplo, o tamanho máximo de SMS que é de 160 caracteres.

    CODE

    160

• Somente Leitura:

  • Quando habilitada, esta opção faz com que o preenchimento do campo seja bloqueado para o usuário no formulário, fazendo com que o campo sirva somente para exibição de informação, mas seu preenchimento ficará desabilitado.

• Mascara:

  • Uma máscara é uma forma de formatar automaticamente o texto conforme o usuário o digita. Ela é útil para garantir que as informações inseridas sigam um formato específico, como números de telefone, CPF, datas, etc. A máscara geralmente adiciona caracteres especiais (como parênteses, traços, pontos, etc.) ao texto conforme o usuário insere os dados.

  • Use o seguinte padrão para construção da sua mascara:

    • 0 -> Dígitos de 0 a 9
    • S -> Letras
    • A -> Dígitos ou Letras

  • Aqui está um exemplo de como criar uma máscara para um número de telefone celular no formato (DDD) XXXXX-XXXX:

    CODE

    (000) 00000-0000  

    Desta forma, a medida que o usuário digita os números, o campo vai ser automaticamente formatado com os parênteses para o três números do DDD e em seguida um espaço e separador hifen para os 4 últimos dígitos. Ex: (037) 99959-6232

  • Exemplo de uma mascara para formatar um CPF XXX.XXX.XXX-XX:

    CODE

    000.000.000-00  

  • Exemplo de uma placa de veículo:

    CODE

    SSS-0000 

    Formata uma sequência de 3 letras e 4 números no formato de uma placa de veículo.

  • Exemplo de valores monetários (Moeda): Faça a mascara para aceitar o maior valor que esperado para este campo no seu processo.

    • Exemplo: Supondo que o maior valor esperado aqui seja de R$ 999.999,99 novecentos e nove e nove mil e novecentos e nove reais e noventa e nove centavos (Menor que 1 milhão):

      CODE

      000.000,00  

      Marque a opção Mascara Reversa
      Desta forma seu campo irá formatar valores entre: R$ 0,01 ate R$ 999.999,99.

• Mascara Reversa:

  • A máscara reversa faz com que a formatação do campo seja feita instantaneamente, da direita pra esquerda em vez de serem preenchidos na posição exata como em uma máscara convencional. Isso pode facilitar a entrada de dados para o usuário, pois eles veem instantaneamente onde seus dados serão colocados. Exemplo comum são as máquinas de cartão de credito que aplicam este tipo de formatação no valor da compra.

• Apagar se incompleta:

  • Se habilitado irá limpar os dados preenchidos, caso não satisfaçam o formato exigido pela máscara.

• Salvar com Máscara:

  • Se habilitado fara com que os dados sejam salvos no banco de dados com os caracteres de formatação da máscara, como por exemplo, pontos, virgulas, hífen etc.

• Condição:

  • Campo do tipo caixa de seleção que pode ser marcada (ativada) ou desmarcada (desativada). Quando marcada, fará com que o campo somente seja exibido se o resultado do teste condicional for TRUE.

    Expressão Condicional:

    • Campo do tipo texto onde deve ser criada a expressão condicional. E possível utilizar valores (campos ou variáveis) do mesmo formulário ou de outros formulários (tarefas anteriores já executadas).

    Exemplo de uma expressão condicional (Use aspas simples):

    CODE

    ${nomeCampo} == 'minasgerais'

  Onde nomeCampo é nome de qualquer campo do mesmo formulário.

info

Caso desejar utilizar, no teste condicional, um campo de outra tarefa (formulário diferente), será necessário utilizar um campo oculto, e nele “setar” o valor desejado, por meio dos eventos da tarefa.