Caixas de texto

Com uma caixa de texto, os usuários podem exibir, inserir ou editar um texto ou valor numérico.

Uma caixa de texto típica.

Será este o controlo correto?

Para decidir, considere estas questões:

• É prático enumerar todos os valores válidos de forma eficiente? Em caso afirmativo, considere uma lista de seleção única, exibição de lista, lista suspensa, lista suspensa editável ou deslizante.
• Os dados válidos são completamente irrestritos? Ou os dados válidos são limitados apenas pelo formato (comprimento restrito ou tipos de caracteres)? Em caso afirmativo, use uma caixa de texto.
• O valor representa um tipo de dados que tem um controle comum especializado? Os exemplos incluem data, hora ou endereço IPv4 ou IPv6. Em caso afirmativo, use o controle apropriado, como um controle de data em vez de uma caixa de texto.
• Se os dados forem numéricos:
  • Os usuários percebem a configuração como uma quantidade relativa? Em caso afirmativo, use um controle deslizante.
  • O usuário se beneficiaria do feedback instantâneo sobre o efeito das mudanças de configuração? Em caso afirmativo, use um controle deslizante, possivelmente junto com uma caixa de texto. Por exemplo, os usuários podem escolher facilmente uma cor usando um controle deslizante porque podem ver imediatamente o efeito das alterações nos valores de matiz, saturação ou luminosidade.

Conceitos de design

Embora as caixas de texto tenham a vantagem de serem muito flexíveis, têm a desvantagem de ter restrições mínimas. As únicas restrições em uma caixa de texto editável são:

• Opcionalmente, você pode definir o número máximo de caracteres.
• Opcionalmente, você pode restringir a entrada apenas a caracteres numéricos (0, 9).
• Se você usar um controle de rotação , poderá limitar as opções de controle de rotação a valores válidos.

Além de seu comprimento e da presença opcional de um controle de rotação, as caixas de texto não têm nenhuma pista visual que sugira os valores válidos ou seu formato. Isto significa confiar nos rótulos para transmitir esta informação aos utilizadores. Se os usuários inserirem texto que não é válido, você deve manipular o erro com uma mensagem de erro.

Como regra geral, você deve usar o controle mais restrito que você pode. Use controles sem restrições, como caixas de texto, como último recurso. Dito isto, quando estiver a considerar restrições, tenha em mente as necessidades dos utilizadores globais. Por exemplo, um controle restrito a CEPs dos Estados Unidos não é globalizado, mas uma caixa de texto sem restrições que aceita qualquer formato de código postal é.

Padrões de utilização

Uma caixa de texto é um controle flexível com vários usos possíveis.

Rótulo	Valor
Entrada de dados Uma caixa de texto de linha única e sem restrições usada para inserir ou editar cadeias de caracteres curtas.	Uma caixa de texto de linha única, sem restrições.
Entrada de dados formatados Um conjunto de caixas de texto curtas, de tamanho fixo e de linha única usadas para inserir dados com um formato específico.	Uma caixa de texto usada para entrada de dados formatados. Nota: O recurso de saída automática avança automaticamente o foco de entrada de uma caixa de texto para a próxima. Uma desvantagem dessa abordagem é que os dados não podem ser copiados ou colados como uma única unidade.
Entrada assistida de dados Uma caixa de texto de linha única e sem restrições usada para inserir ou editar cadeias de caracteres, combinada com um botão de comando que ajuda os usuários a selecionar valores válidos.	Neste exemplo, o comando Procurar ajuda os usuários a selecionar valores válidos.
Entrada textual Uma caixa de texto com várias linhas e sem restrições usada para inserir ou editar cadeias de caracteres longas.	Uma caixa de texto sem restrições de várias linhas.
Entrada numérica Uma caixa de texto de linha única, somente numérica, usada para inserir ou editar números, com um controle de rotação opcional para facilitar a entrada baseada no mouse.	de tempo de espera Uma caixa de texto usada para entrada numérica. A combinação de uma caixa de texto e seu controle de rotação associado é chamada de caixa giratória .
de introdução de palavra-passe e PIN Uma caixa de texto de linha única e sem restrições usada para inserir senhas e PINs com segurança.	Uma caixa de texto usada para inserir senhas.
Saída de dados Uma caixa de texto de linha única, somente leitura, sempre exibida sem borda, usada para exibir cadeias de caracteres curtas.	Ao contrário do texto estático, os dados exibidos usando uma caixa de texto podem ser rolados (útil se os dados forem mais amplos do que o controle), selecionados e copiados. Uma caixa de texto de linha única, somente leitura, usada para exibir dados.
Saída textual Uma caixa de texto com várias linhas, somente leitura, usada para exibir cadeias de caracteres longas.	Uma caixa de texto somente leitura usada para exibir dados.

Orientações

Geral

• Ao desativar uma caixa de texto, desative também todos os rótulos associados, rótulos de instruções, controles de rotação e botões de comando.

• Use o preenchimento automático para ajudar os usuários a inserir dados que provavelmente serão usados repetidamente. Os exemplos incluem nomes de usuário, endereços e nomes de arquivo. No entanto, não use o preenchimento automático para caixas de texto que possam conter informações confidenciais, como senhas, PINs, números de cartão de crédito ou informações médicas.

• Não faça os usuários rolarem desnecessariamente. Se você espera que os dados sejam maiores do que a caixa de texto e você pode facilmente torná-la maior sem prejudicar o layout, dimensione a caixa para eliminar a necessidade de rolagem.

  Incorreto:

  

  Neste exemplo, a caixa de texto deve ser muito mais longa para lidar com seus dados.

• Barras de rolagem:

  • Não coloque barras de rolagem horizontais em caixas de texto de várias linhas. Em vez disso, use a rolagem vertical e a quebra automática de linha.
  • Não coloque barras de rolagem em caixas de texto de linha única.

• Para entrada numérica, você pode usar um controle de rotação. Para entrada de texto, use uma lista suspensa ou uma lista suspensa editável.

• Não use o recurso de saída automática, exceto para entrada de dados formatados. A mudança automática de foco pode surpreender os utilizadores.

Caixas de texto editáveis

• Limite o comprimento do texto de entrada quando puder. Por exemplo, se a entrada válida for um número entre 0 e 999, use uma caixa de texto numérica limitada a três caracteres. Todas as partes das caixas de texto que usam a entrada de dados formatados devem ter um comprimento curto e fixo.

• Seja flexível com formatos de dados. Se é provável que os usuários insiram texto usando uma grande variedade de formatos, tente lidar com todos os mais comuns. Por exemplo, muitos nomes, números e identificadores podem ser inseridos com espaços opcionais e pontuação, e a maiúscula geralmente não importa.

• Se você não puder lidar com os formatos prováveis, exija um formato específico usando a entrada de dados formatados ou indique os formatos válidos no rótulo.

  Aceitável:

  

  Neste exemplo, uma caixa de texto requer entrada em um formato específico.

  Melhor:

  

  Neste exemplo, o padrão de entrada de dados formatados é usado para exigir um formato específico.

  Melhor:

  

  Neste exemplo, uma caixa de texto lida com todos os formatos prováveis.

• Considere a flexibilidade de formato ao escolher o comprimento máximo de entrada. Por exemplo, um número de cartão de crédito válido pode usar até 19 caracteres, portanto, limitar o comprimento a qualquer coisa mais curta tornaria difícil inserir números usando os formatos mais longos.

• Não use o padrão de entrada de dados formatados se os usuários tiverem maior probabilidade de colar dados longos e complexos. Em vez disso, reserve o padrão de entrada de dados formatados para situações em que os usuários são mais propensos a digitar os dados.

  

  Neste exemplo, o padrão de entrada de dados formatados não é usado, para que os usuários possam colar endereços IPv6.

• Se for mais provável que os usuários reinsiram o valor inteiro, selecione todo o texto no foco de entrada. Se os usuários estiverem mais propensos a editar, coloque o cursor no final do texto.

  

  Neste exemplo, é mais provável que os usuários substituam do que editem, portanto, todo o valor é selecionado no foco de entrada.

  

  Neste exemplo, é mais provável que os usuários adicionem palavras-chave do que substituam o texto, de modo que o cursor é colocado no final do texto.

• Sempre use uma caixa de texto de várias linhas se os caracteres de nova linha forem uma entrada válida.

• Quando a caixa de texto for para um arquivo ou caminho, sempre forneça um botão Procurar.

Caixas de texto numéricas

• Escolha a unidade mais conveniente e rotule as unidades. Por exemplo, considere usar mililitros em vez de litros (ou vice-versa), porcentagens em vez de valores diretos (ou vice-versa), e assim por diante.

  Correto:

  

  Neste exemplo, a unidade é rotulada, mas exige que os usuários insiram números decimais.

  Melhor:

  

  Neste exemplo, a caixa de texto usa uma unidade mais conveniente.

• Use um controle de rotação sempre que for útil. No entanto, às vezes os controles de rotação não são práticos, como quando os usuários precisam inserir muitos números grandes. Use controles de rotação quando:

  • É provável que a entrada seja um número pequeno, normalmente inferior a 100.
  • É provável que os usuários façam uma pequena alteração em um número existente.
  • Os usuários são mais propensos a usar o mouse do que o teclado.

• Alinhar texto numérico à direita sempre que:

  • Há mais de uma caixa de texto numérica.
  • As caixas de texto estão alinhadas verticalmente.
  • É provável que os usuários adicionem ou comparem os valores.

  Correto:

  

  Neste exemplo, o texto numérico é alinhado à direita para facilitar a comparação de valores.

  Incorreto:

  

  Neste exemplo, o texto numérico está alinhado incorretamente à esquerda.

• Alinhe sempre os valores monetários corretamente.

• Não atribua significados especiais a valores numéricos específicos, mesmo que esses significados especiais sejam usados internamente pelo seu aplicativo. Em vez disso, use caixas de seleção ou botões de opção para uma seleção explícita do usuário.

  Incorreto:

  

  Neste exemplo, o valor -1 tem um significado especial.

  Correto:

  

  Neste exemplo, uma caixa de seleção torna a opção explícita.

Introdução de palavra-passe e PIN

• Use sempre o controle comum de senha em vez de criar o seu próprio. As palavras-passe e os PINs requerem um tratamento especial para serem tratados de forma segura.

Para obter mais diretrizes e exemplos, consulte Balões.

Produção textual

• Considere usar a cor branca do sistema de fundo para texto grande e somente leitura de várias linhas. Um fundo branco torna o texto mais fácil de ler. Muito texto em um fundo cinza desencoraja a leitura.

Para obter mais informações sobre cores de plano de fundo, consulte fontes.

Saída de dados

• Não use uma borda para caixas de texto somente leitura de linha única. A borda é uma pista visual de que o texto é editável.
• Não desative caixas de texto somente leitura de linha única. Isso impede que os usuários selecionem e copiem o texto para a área de transferência. Ele também impede que os usuários rolem os dados se eles excederem o tamanho de seus limites.
• Não defina uma parada de tabulação em uma única linha de caixa de texto somente leitura, a menos que o usuário provavelmente precise rolar ou copiar o texto.

Validação de entrada e tratamento de erros

Como as caixas de texto geralmente não são restritas a aceitar apenas entradas válidas, talvez seja necessário validar a entrada e lidar com quaisquer problemas. Valide os vários tipos de problemas de entrada da seguinte maneira:

• Se o usuário inserir um caractere que não é válido, ignore o caractere e exiba um balão de de problema de entrada que explique os caracteres válidos.

  

  Neste exemplo, um balão relata um caractere de entrada incorreto.

• Se os dados de entrada tiverem um valor ou formato que não seja válido, exiba um balão de problema de entrada quando a caixa de texto perder o foco de entrada.

• Se os dados de entrada forem inconsistentes com outros controles na janela, envie uma mensagem de erro quando toda a entrada estiver concluída, como quando os usuários clicarem em OK para uma caixa de diálogo modal.

Não limpe dados de entrada inválidos, a menos que os usuários não consigam corrigir erros facilmente. Isso permite que os usuários corrijam erros sem começar de novo. Por exemplo, você deve limpar senhas e PINs incorretos porque os usuários não podem corrigi-los facilmente.

Para obter mais diretrizes e exemplos, consulte de mensagens de erro e balões de .

Avisos

Um prompt é um rótulo ou instrução curta colocada dentro de uma caixa de texto como seu valor padrão. Ao contrário do texto estático, os prompts desaparecem da tela quando os usuários digitam algo na caixa de texto ou recebe o foco de entrada.

de pesquisa

Um prompt típico.

Use um prompt quando:

• O espaço na tela é tão grande que usar um rótulo ou instrução é indesejável, como em uma barra de ferramentas.
• O prompt é principalmente para identificar a finalidade da caixa de texto de forma compacta. Não deve ser uma informação crucial que o utilizador precisa de ver ao utilizar a caixa de texto.

Não use prompts apenas para direcionar os usuários a digitar algo ou clicar em botões. Por exemplo, não escreva um texto de prompt que diga Digite um nome de arquivo e clique em Enviar.

Ao usar prompts:

• Desenhe o texto do prompt em itálico cinza e o texto de entrada real em preto normal. O texto imediato não deve ser confundido com o texto real.
• Mantenha o texto do prompt conciso. Você pode usar fragmentos em vez de frases completas.
• Use maiúsculas no estilo de frase.
• Não use pontuação final ou reticências.
• O texto do prompt não deve ser editável e deve desaparecer assim que os usuários clicarem ou entrarem na caixa de texto.
  • Exceção: Se a caixa de texto tiver foco de entrada padrão, o prompt será exibido e desaparecerá quando o usuário começar a digitar.
• O texto do prompt será restaurado se a caixa de texto ainda estiver vazia quando perder o foco de entrada.

Dimensionamento e espaçamento recomendados

Dimensionamento e espaçamento recomendados para caixas de texto.

A largura de uma caixa de texto é uma pista visual do tamanho de entrada esperado. Ao dimensionar caixas de texto:

• Escolha uma largura apropriada para os dados válidos mais longos. Na maioria das situações, os usuários não devem ter que rolar a cadeia de caracteres mais longa que provavelmente digitarão ou visualizarão.
• Inclua um adicional de 30% (até 200% para texto mais curto) para qualquer texto (mas não números) que será localizado.
• Se a entrada esperada não tiver um tamanho específico, escolha uma largura que seja consistente com as outras caixas de texto ou controles na janela.
• Dimensionar caixas de texto de várias linhas para exibir um número integral de linhas de texto.

Rótulos

Rótulos de caixa de texto

• Todas as caixas de texto precisam de rótulos. Escreva o rótulo como uma palavra ou frase, não como uma frase, terminando com dois pontos e usando texto estático.

  Exceções:

  • Caixas de texto com prompts localizados onde o espaço é escasso.

  • Para rotulagem, um grupo de caixas de texto usado para de entrada de dados formatados deve ser tratado como uma única caixa de texto.

  • Se uma caixa de texto estiver subordinada a um botão de opção ou caixa de seleção e for introduzida por seu rótulo terminando com dois pontos, não coloque um rótulo adicional na caixa de texto.

  • Omita rótulos de controle que reafirmam a instrução principal. Neste caso, a instrução principal leva os dois pontos (a menos que seja uma pergunta) e a chave de acesso.

    Aceitável:

    

    Neste exemplo, o rótulo da caixa de texto é apenas uma reafirmação da instrução principal.

    Melhor:

    

    Neste exemplo, o rótulo redundante é removido, portanto, a instrução principal usa os dois pontos e a chave de acesso.

• Atribua uma chave de acesso exclusiva. Para obter diretrizes de atribuição de teclas de acesso, consulte Keyboard.

• Use maiúsculas no estilo de frase.

• Posicione o rótulo à esquerda ou acima da caixa de texto e alinhe-o com a borda esquerda da caixa de texto. Se o rótulo estiver à esquerda, alinhe verticalmente o texto do rótulo com o texto da caixa de texto.

  Correto:

  

  

  Nesses exemplos, o rótulo na parte superior se alinha com a borda esquerda da caixa de texto e o rótulo à esquerda se alinha com o texto na caixa de texto.

  Incorreto:

  

  

  Nesses exemplos incorretos, o rótulo na parte superior se alinha com o texto na caixa de texto e o rótulo à esquerda se alinha com a parte superior da caixa de texto.

• Você pode especificar unidades (por exemplo, segundos ou conexões) entre parênteses após o rótulo.

• Se uma caixa de texto aceitar um número máximo arbitrariamente pequeno de caracteres, você poderá indicar a entrada máxima no rótulo. A largura da caixa de texto também deve sugerir o tamanho máximo.

  

  Neste exemplo, o rótulo fornece o número máximo de caracteres.

• Não torne o conteúdo da caixa de texto (ou seu rótulo de unidades) parte de uma frase, porque isso não é localizável.

• Se a caixa de texto puder ser usada para inserir vários itens, deixe claro como separar os itens no rótulo.

  

  Neste exemplo, o separador de item é dado no rótulo.

• Para obter diretrizes sobre como indicar a entrada necessária, consulte Entrada necessária em caixas de diálogo.

Etiquetas de instruções

• Se você precisar adicionar texto instrutivo sobre uma caixa de texto, adicione-o acima do rótulo. Use frases completas com pontuação final.

• Use maiúsculas no estilo de frase.

• As informações adicionais que são úteis, mas não necessárias, devem ser mantidas curtas. Coloque essas informações entre parênteses entre o rótulo e os dois pontos ou sem parênteses abaixo da caixa de texto.

  

  Neste exemplo, informações adicionais são colocadas abaixo da caixa de texto.

Avisar rótulos

• Mantenha o texto do prompt conciso. Você pode usar fragmentos em vez de frases completas.
• Use maiúsculas no estilo de frase.
• Não use pontuação final ou reticências.
• Se o prompt direcionar os usuários para inserir informações que serão acionadas por um botão ao lado da caixa de texto, basta colocar o botão ao lado da caixa de texto. Não use o prompt para direcionar os usuários a clicar no botão (por exemplo, não escreva o texto do prompt que diz: Arraste um arquivo e clique em Enviar).

Documentação

Ao referir-se a caixas de texto:

• Use type para se referir às interações do usuário que exigem digitação ou colagem; caso contrário, use enter se os usuários puderem colocar informações na caixa de texto usando outros meios, como selecionar o valor de uma lista ou usar um botão Procurar.

• Use select para fazer referência a uma entrada em uma caixa de texto somente leitura.

• Use o texto exato do rótulo, incluindo sua maiúscula, e inclua a caixa de palavras. Não inclua o sublinhado da chave de acesso nem dois pontos. Não se refira a uma caixa de texto como uma caixa de texto ou um campo.

• Sempre que possível, formate o rótulo usando texto em negrito. Caso contrário, coloque o rótulo entre aspas apenas se necessário para evitar confusão.

  Exemplo: Escreva a sua palavra-passe na caixa Palavra-passe do e, em seguida, clique em OK.

• Se a caixa de texto exigir um formato específico, documente apenas o formato aceitável mais usado. Permita que os usuários descubram quaisquer outros formatos por conta própria. Você deseja ser flexível com formatos de dados, mas isso não deve resultar em documentação complexa.

  Correto:

  Insira o número de série da peça usando o formato 1234-56-7890.

  Incorreto:

  Insira o número de série da peça usando qualquer um dos seguintes formatos:

  1234567890

  1234-56-7890

  1234 56 7890