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 certo?

Para decidir, considere estas perguntas:

• É prático enumerar todos os valores válidos com eficiência? Nesse caso, considere um lista de seleção única, de exibição de lista, lista suspensa, lista suspensa editável ou de controle deslizante.
• Os dados válidos são completamente não treinados? Ou os dados válidos são restritos apenas por 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? Em caso afirmativo, use um controle deslizante.
  • O usuário se beneficiaria de comentários instantâneos sobre o efeito da configuração de alterações? 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 somente 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 pistas visuais que sugiram 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 pode. Use controles não treinados como caixas de texto como último recurso. Dito isto, quando você estiver considerando restrições, tenha em mente as necessidades dos usuários globais. Por exemplo, um controle restrito aos CEP 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 uso

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

Etiqueta	Valor
de entrada de dados do Uma caixa de texto sem restrições de linha única usada para inserir ou editar cadeias de caracteres curtas.	Uma caixa de texto sem restrições de linha única.
de 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. Observação: o recurso de 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.
de entrada de dados assistidos 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.
de 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.
de 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.
senha e de entrada 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.
de 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 somente leitura de linha única usada para exibir dados.
de 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.

• Usar 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 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ê pode 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 horizontais em caixas de texto de várias linhas. Em vez disso, use rolagem vertical e encapsulamento 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 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 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:

  de entrada numérica

  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 no 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), 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 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 é alinhado à direita para facilitar a comparação de valores.

  Incorreto:

  

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

• Sempre alinhar 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 caixas de seleção ou botões de opção para uma seleção de usuário explícita.

  Incorreto:

  

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

  Correto:

  

  Neste exemplo, uma caixa de seleção 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 plano 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 somente leitura de linha única. A borda é uma pista visual de que o texto é editável.
• Não desabilite 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 excederem o tamanho de seus limites.
• Não defina uma parada de tabulação na caixa de texto somente leitura de linha única, 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 forem 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 sejam capazes de corrigir erros facilmente. Isso permite que os usuários corrijam erros sem recomeçar. Por exemplo, você deve limpar senhas incorretas e PINs porque os usuários não podem corrigi-las facilmente.

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

Solicita

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 quando os usuários digitam algo na caixa de texto ou ele recebe 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 para digitar algo ou clicar em botões. Por exemplo, não escreva um texto de prompt que diga Enter a filename 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 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 quando os usuários clicarem ou tabarem 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 mais longa e provável que eles inserirão ou exibirão.
• Incluir mais 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 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 de :

  • 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 caixa de seleção e for introduzida por seu 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 principal. Nesse caso, a instrução principal usa dois-pontos (a menos que seja uma pergunta) e a chave de acesso.

    Aceitável:

    de rótulo repetitivo

    Neste exemplo, o rótulo da caixa de texto é apenas uma reformulaçã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 chave de acesso, consulte Teclado.

• Use a capitalização no 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 à borda esquerda da caixa de texto e o rótulo à esquerda se alinha ao texto na caixa de texto.

  Incorreto:

  

  

  Nesses exemplos incorretos, o rótulo na parte superior alinha-se com o texto na caixa de texto e o rótulo à esquerda alinha-se 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.

  ponto-e-vírgula

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

• Para obter diretrizes sobre como indicar a entrada necessária, consulte a 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 no estilo de frase.

• 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 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 no estilo de frase.
• Não use pontuação final ou reticências.
• Se o prompt orienta 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 a opção Selecionar 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