Windows Dev Center

Diretrizes para entrada de texto

Uma caixa de entrada de texto permite que o usuário insira e edite um texto ou valor numérico pelo teclado físico ou virtual. Utilizando quebra de texto, uma caixa de entrada de texto pode ser configurada para aceitar uma única linha ou múltiplas linhas de texto. Uma caixa de entrada de texto é composta de uma borda retangular com uma área de texto editável dentro dela. Em um dispositivo habilitado para toque, o teclado virtual aparece quando a caixa de entrada de texto recebe o foco.

Uma amostra da aparência do controle de caixa entrada de texto padrão

Exemplo

Uma captura de tela que ilustra o controle de caixa de entrada de texto padrão

Este é o controle correto?

Controles de entrada de texto permitem que os usuários insiram e editem um valor de texto ou valor numérico. Considere estas questões ao decidir se usar um controle de entrada de texto.

  • É prático enumerar todos os valores válidos de modo eficiente? Se é o caso, considere a possibilidade de utilizar um dos controles de seleção em vez disso, como uma caixa de seleção, lista suspensa, caixa de listagem, botão de opção, controle deslizante, botão de alternância, seletor de data ou seletor de hora.
  • Há um conjunto razoavelmente pequeno de valores válidos? Se é o caso, considere a possibilidade de utilizar uma lista suspensa ou uma caixa de listagem, especialmente se os valores têm mais do que alguns caracteres de comprimento.
  • Os dados válidos estão completamente sem restrições? Ou os dados válidos estão restritos somente por formato (comprimento e tipos de caractere restritos)? Se é o caso, utilize um controle de entrada de texto. Você pode limitar o número de caracteres que podem ser inseridos, e você pode escolher entre uma lista de escopos de entrada, que limitam a entrada a um formato ou conjunto de caracteres específico—por exemplo, um número, um URI (Identificador de Recursos Uniforme), ou uma moeda.
  • O valor representa um tipo de dados que possui um controle comum especializado? Se sim, use o controle apropriado em vez de um controle de entrada de texto. Por exemplo, use um DatePicker, em vez de um controle de entrada de texto, para aceitar uma entrada de data.
  • Se os dados forem numéricos:
    • O valor sendo inserido é aproximado e/ou relativo a outra quantidade na mesma página? Se é o caso, utilize um controle deslizante.
    • O usuário se beneficiaria com um feedback instantâneo sobre o efeito das alterações de configuração? Se sim, use um controle deslizante, possivelmente com um controle anexo.
    • Há bastante probabilidade do valor inserido ser ajustado após o resultado ser observado—por exemplo, volume ou brilho ser ajustado? Se é o caso, use um controle deslizante.

O que fazer e o que não fazer

  • Se não é óbvio o que o usuário deve digitar em uma caixa de entrada de texto, ou se há quaisquer restrições à entrada, então configure um rótulo, ou um texto de espaço reservado. Um rótulo fica visível, independentemente da caixa de entrada de texto ter ou não um valor. O texto de espaço reservado é exibido dentro da caixa de entrada de texto e desaparece uma vez que um valor tiver sido inserido.
  • Considere a possibilidade de dar ao controle uma amplitude adequada para a faixa de valores que podem ser inseridos. Lembre-se de que o comprimento das palavras pode variar entre idiomas, então leve em conta a localização.
  • Uma caixa de entrada de texto é normalmente de uma única linha (quebra de texto desativada). Quando os usuários precisam inserir ou editar uma cadeia longa, defina a caixa de entrada de texto como multilinha (quebra de texto ativada).
  • Geralmente, você utiliza uma caixa de entrada de texto para texto editável. Mas você pode tornar uma caixa de entrada de texto somente-leitura, de modo que seu conteúdo possa ser lido, selecionado e copiado, mas não editado.
  • Se você precisar reduzir a desorganização em uma visualização, considere a possibilidade de fazer um conjunto de caixas de entrada de texto aparecerem somente quando uma caixa de seleção de controle está selecionada. Você também pode associar o estado habilitado de uma caixa de entrada de texto a um controle como uma caixa de seleção.
  • Considere como deseja que uma caixa de entrada de texto se comporte quando contém um valor e o usuário toca nela. O comportamento padrão é adequado para editar o valor em vez de substituí-lo - o ponto de inserção é colocado entre palavras e nada é selecionado. Se substituição é o caso de uso mais comum para uma determinada caixa de entrada de texto, você pode selecionar todo o texto no campo sempre que o controle recebe foco; digitar dados substitui a seleção.
  • Se você deseja limitar a entrada para um formato ou conjunto de caracteres em particular—por exemplo, um número, um URI (Identificador de Recursos Uniforme) ou uma moeda—, defina o escopo de entrada apropriadamente. Isso determina que teclado é utilizado na tela.

Caixas de entrada de linha única

  • Utilize diversas caixas de entrada de linha única para capturar muitos pequenos fragmentos de informação de texto. Se as caixas de texto são relacionadas quanto à sua natureza, você deve agrupá-las.

  • Torne suas caixas de texto de linha única um pouco mais largas do que a entrada mais comprida antecipada. Se isso deixar o controle muito largo, separe-o em dois controles; por exemplo, você pode dividir uma entrada de endereço simples em "Linha 1 do endereço" e "Linha 2 do endereço".
  • Defina um comprimento máximo. Se a fonte de dados de backup não permitir uma cadeia de entrada longa, limite a entrada e use um pop-up de validação para que os usuários saibam quando chegaram ao limite.
  • Use controles de entrada de texto de linha única para coletar pequenos textos dos usuários.

    O exemplo a seguir mostra uma caixa de texto de linha única para capturar uma resposta a uma pergunta de segurança. A resposta deve ser curta, e uma caixa de texto de linha única é apropriada aqui. Como as informações coletadas não correspondem a nenhum dos tipos de entrada especializados reconhecidos pelo Windows, o tipo genérico "Texto" é apropriado.

    Entrada de dados básicos

  • Use um conjunto de controles de entrada de texto curtos, de tamanho fixo e de linha única para inserir dados com um formato específico.

    Entrada de dados formatados

  • Use um controle de entrada de texto irrestrito e de linha única para inserir ou editar cadeias, combinado com um botão de comando que ajuda os usuários a selecionarem valores válidos.

    Entrada de dados assistidos

  • Use um controle de entrada de número de linha única para inserir ou editar números.
  • Use um controle de entrada de senha de linha única para inserir senhas e PINs com segurança.

    Entrada de senha e PIN
  • Use o controle de entrada de email de linha única para inserir um endereço de email.

    Entrada de email

    Quando você usa um controle de entrada de email, você obtém o seguinte gratuitamente:

    • Quando os usuários navegam para a caixa de texto, o teclado virtual é exibido com um layout de teclas específico para email.
    • Quando os usuários especificam um formato de email inválido, uma caixa de diálogo é exibida para que eles saibam disso. Entrada de email
  • Use o controle de entrada de URL para inserir endereços da Web.
  • Use o controle de entrada de número de telefone para inserir números de telefone.
  • Não use uma área de texto com uma altura de linha 1 para criar uma caixa de texto de linha única. Em vez disso, use a caixa de texto.
  • Não use o texto de espaço reservado para preencher previamente o controle de texto. Caixas de texto limpam o texto de espaço reservado quando os usuários utilizam o controle. Use o atributo "value".
  • Não use uma caixa de texto como caixa de pesquisa. É prática comum em páginas web utilizar um elemento de entrada para criar uma caixa de pesquisa. No entanto, você cria uma experiência muito melhor e mais consistente usando o botão Pesquisar. O botão Pesquisar oferece uma experiência de pesquisa consistente ao qual seu aplicativo pode se conectar. Para saber mais, veja Adicionando pesquisa.
  • Não ponha outro controle logo ao lado de uma caixa de entrada de senha. A caixa de entrada de senha tem um botão de exibição da senha para que os usuários verifiquem a senha que digitaram. Outro controle bem ao lado dele pode fazer com que os usuários exibam acidentalmente suas senhas quando tentarem interagir com o outro controle. Para evitar isso, insira um espaçamento entre a caixa de entrada da senha e o outro controle ou coloque o outro controle na próxima linha.

Controles de entrada de texto multilinha

  • Quando você cria uma caixa de texto rich text, forneça botões de estilo e implemente as ações comandadas por eles. (aplicativos da Windows Store utilizando JavaScript não fornecem automaticamente esses controles para você. )
  • Use uma fonte que represente a aparência de seu aplicativo.
  • Faça com que a altura do controle de texto seja suficiente para acomodar entradas típicas.
  • Ao capturar longos trechos de texto onde os usuários devem manter sua contagem de palavras ou contagem de caracteres abaixo de um máximo, use uma caixa de texto sem formatação e forneça um contador de movimento ativo para mostrar ao usuário quantos caracteres ou palavras ele deixou antes de atingir o limite. Você precisará criar o contador sozinho; coloque-o perto da caixa de texto e atualize-o dinamicamente à medida que o usuário inserir cada caractere ou palavra.

    Um longo trecho de texto

  • Não deixe que seus controles de entrada de texto aumentem de tamanho enquanto os usuários digitam.
  • Não use uma caixa de texto multilinha quando os usuários só precisarem de uma linha única.
  • Não use um controle rich text se for adequado texto sem formatação.

Diretrizes de uso adicional

Utilize uma caixa de entrada de texto para permitir que o usuário insira um valor de texto ou edite um valor já inserido. Se a entrada precisar ser restrita, isso é possível também. Você pode limitar o número de caracteres que podem ser inseridos, e pode escolher a partir de uma lista de escopos de entrada, que limitam a entrada a um formato ou conjunto de caracteres particular—por exemplo, um número, um URI (Identificador de Recursos Uniforme) ou uma moeda.

Escolhendo o controle de entrada de texto multilinha adequado

Os usuários devem usar um controle de texto multilinha quando precisarem inserir ou editar cadeias longas. Há dois tipos de controles de entrada de texto multilinha: o controle de entrada de texto multilinha simples e o controle de entrada de texto multilinha rich text.

  • Se a finalidade principal da caixa de texto multilinha for criar documentos (como entradas de blog ou o conteúdo de uma mensagem de email), e esses documentos exigirem rich text, utilize uma caixa RTF.
  • Se você quiser que os usuários consigam formatar seu texto, use uma caixa RTF.
  • Ao capturar texto que só será consumido, e não exibido mais tarde aos usuários, use um controle de entrada de texto sem formatação. Por exemplo, suponha que você tenha uma pesquisa; o usuário responde a pesquisa e os dados são enviados para algum servidor, mas o usuário não a vê mais. Geralmente não é necessário permitir que os usuários projetem esse texto.
  • Para todos os outros cenários, use um controle de entrada de texto sem formatação.

Tópicos relacionados

Para designers
Diretrizes de verificação ortográfica
Adicionando pesquisa
Para desenvolvedores (XAML)
TextBox class
Para desenvolvedores (HTML)
input type=text element | input type=text object
textArea element
contenteditable

 

 

Mostrar:
© 2015 Microsoft