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.

Esse é o controle correto?

Para decidir, considere estas perguntas:

• É prático enumerar todos os valores válidos com eficiência? Nesse caso, considere uma lista de seleção única, exibição de lista, lista suspensa, lista suspensa editável ou controle deslizante .
• Os dados válidos estão completamente irrestritos? Ou os dados válidos são restritos apenas pelo formato (tamanho restrito ou tipos de caractere)? Nesse caso, 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. Nesse caso, 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? Se sim, use um controle deslizante.
  • O usuário se beneficiaria com um feedback instantâneo sobre o efeito das alterações de configuração? Nesse caso, 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 o benefício de serem muito flexíveis, elas 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. Isso significa depender de rótulos para transmitir essas informações aos usuários. Se os usuários inserirem um texto que não seja válido, você deverá lidar com o erro com uma mensagem de erro.

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

Padrões de uso

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

Rótulo	Valor
Entrada de dados Uma caixa de texto sem restrições de linha única usada para inserir ou editar cadeias de caracteres curtas.	Uma caixa de texto de linha única e irrestrita.
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 formatada. 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 de dados assistida Uma caixa de texto sem restrições de linha única 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 sem restrições de várias linhas 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 em mouse.	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 de rotação.
Entrada de senha e PIN Uma caixa de texto sem restrições de linha única 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 uma 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 (úteis se os dados forem mais largos que o controle), selecionados e copiados. Uma caixa de texto de linha única e somente leitura usada para exibir dados.
Saída textual Uma caixa de texto de várias linhas somente leitura usada para exibir cadeias de caracteres longas.	Uma caixa de texto somente leitura usada para exibir dados.

Diretrizes

Geral

• Ao desabilitar uma caixa de texto, desabilite também quaisquer rótulos associados, rótulos de instrução, 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 que a caixa de texto e você possa facilmente aumentar a caixa de texto sem prejudicar o layout, dimensione a caixa para eliminar a necessidade de rolagem.

  Incorreto:

  

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

• Barras de rolagem:

  • Não coloque barras de rolagem horizontal em caixas de texto de várias linhas. Em vez disso, use rolagem vertical e disposição 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 textual, 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 formatada. A mudança automática de foco pode surpreender os usuários.

Caixas de texto editáveis

• Limite o comprimento do texto de entrada quando possível. 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 formatada devem ter um comprimento curto e fixo.

• Seja flexível com formatos de dados. Se os usuários provavelmente inserirem texto usando uma ampla 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 capitalização geralmente não importa.

• Se você não conseguir lidar com os formatos prováveis, exija um formato específico usando a entrada de dados formatada 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 formatado é usado para exigir um formato específico.

  Melhor:

  

  Neste exemplo, uma caixa de texto manipula 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 dificultaria a inserção de números usando os formatos mais longos.

• Não use o padrão de entrada de dados formatado se os usuários tiverem maior probabilidade de colar em dados longos e complexos. Em vez disso, reserve o padrão de entrada de dados formatado para situações em que os usuários têm maior probabilidade de digitar os dados.

  

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

• Se os usuários forem mais propensos a recuar o valor inteiro, selecione todo o texto em foco de entrada. Se os usuários forem mais propensos a editar, coloque o cursor no final do texto.

  

  Neste exemplo, os usuários são mais propensos a substituir do que editar, portanto, todo o valor é selecionado no foco de entrada.

  

  Neste exemplo, os usuários são mais propensos a adicionar palavras-chave do que substituir o texto, portanto, o cursor é colocado no final do texto.

• Sempre use uma caixa de texto de várias linhas se caracteres de nova linha forem entradas válidas.

• 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), percentuais 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 abaixo de 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.

• Texto numérico de alinhamento à direita sempre que:

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

  Correto:

  

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

  Incorreto:

  

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

• Sempre alinhe os valores monetários à direita.

• Não atribua significados especiais a valores numéricos específicos, mesmo que esses significados especiais sejam usados internamente pelo aplicativo. Em vez disso, use marcar caixas 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 marcar torna a opção explícita.

Entrada de senha e PIN

• Sempre use o controle comum de senha em vez de criar o seu próprio. Senhas e PINs exigem tratamento especial para serem tratados com segurança.

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

Saída textual

• Considere usar a cor branca do sistema de fundo para texto grande e somente leitura de várias linhas. Uma tela de fundo branca facilita a leitura do texto. Muito texto em um plano de 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 de linha única e somente leitura. A borda é uma pista visual de que o texto é editável.
• Não desabilite caixas de texto de linha única e somente leitura. 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 excederem o tamanho de seus limites.
• Não defina uma parada de tabulação na caixa de texto de linha única, somente leitura, a menos que o usuário 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 para aceitar apenas a entrada válida, 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 seja válido, ignore o caractere e exiba um balão 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 estiverem inconsistentes com outros controles na janela, envie uma mensagem de erro quando toda a entrada for 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 recomeçar. Por exemplo, você deve limpar senhas e PINs incorretas porque os usuários não podem corrigi-las facilmente.

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

Solicitações

Um prompt é um rótulo ou uma 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 depois que os usuários digitam algo na caixa de texto ou ele obtém o foco de entrada.

Um prompt típico.

Use um prompt quando:

• O espaço na tela é tão premium 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 usuário precisa ver ao usar 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 o texto do prompt que diz Inserir um nome de arquivo e clique em Enviar.

Ao usar prompts:

• Desenhe o texto do prompt em cinza itálico e o texto de entrada real em preto normal. O texto do prompt não deve ser confundido com texto real.
• Mantenha o texto do prompt conciso. Você pode usar fragmentos em vez de frases completas.
• Use a capitalização com 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 depois que os usuários clicarem ou clicarem na caixa de texto.
  • Exceção: Se a caixa de texto tiver o 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 provável mais longa que eles inserirão ou exibirão.
• Inclua 30% adicional (até 200% para texto mais curto) para qualquer texto (mas não números) que será localizado.
• Se a entrada esperada não tiver nenhum tamanho específico, escolha uma largura consistente com as outras caixas de texto ou controles na janela.
• Dimensione 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 está em um premium.

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

  • Se uma caixa de texto for subordinada a um botão de opção ou marcar caixa e for introduzida pelo rótulo que termina com dois-pontos, não coloque um rótulo adicional na caixa de texto.

  • Omita rótulos de controle que declaram novamente a instrução main. Nesse caso, a instrução main usa 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 reformulação da instrução main.

    Melhor:

    

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

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

• Use a capitalização com estilo de frase.

• Posicione o rótulo à esquerda ou acima da caixa de texto e alinhe o rótulo 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á declarar 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, pois 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.

Rótulos de instrução

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

• Use a capitalização com estilo de frase.

• Informações adicionais ú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.

Rótulos de prompt

• Mantenha o texto do prompt conciso. Você pode usar fragmentos em vez de frases completas.
• Use a capitalização com estilo de frase.
• Não use pontuação final ou reticências.
• Se o prompt instruir os usuários a 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 fazer referência a caixas de texto:

• Use o tipo 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 em 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 capitalização, e inclua a caixa de palavras. Não inclua o sublinhado ou dois-pontos da chave de acesso. Não se refira a uma caixa de texto como uma caixa de texto ou um campo.

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

  Exemplo: digite sua senha na caixa Senha e clique em OK.

• Se a caixa de texto exigir um formato específico, documente apenas o formato aceitável mais usado. Permitir que os usuários descubram 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 parte usando o formato 1234-56-7890.

  Incorreto:

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

  1234567890

  1234-56-7890

  1234 56 7890