Entrada de texto
Collapse the table of content
Expand the table of content

Directrices sobre la entrada de texto

Los cuadros de entrada de texto permiten al usuario escribir y editar caracteres con un teclado físico o en la pantalla. Habilitar el ajuste de texto permite que un cuadro de entrada acepte varias líneas de texto.

Ejemplo

Se muestra un cuadro de texto estándar en cuatro estados distintos: texto en una sola línea, selección de texto, deshabilitado y texto en varias líneas.

Ejemplos de cuadros de entrada de texto

¿Es este el control adecuado?

Estas preguntas ayudan a determinar si para escribir texto es mejor un cuadro de texto estándar o algún otro control.

  • ¿Es práctico enumerar eficientemente todos los valores válidos? De ser así, deberías usar uno de los controles de selección, como una casilla, lista desplegable, cuadro de lista, botón de radio, control deslizante, modificador para alternar, selector de fecha o selector de hora.
  • ¿Existe un conjunto reducido de valores válidos? En ese caso, deberías usar una lista desplegable o un cuadro de lista, en especial si la longitud de los valores supera los pocos caracteres.
  • ¿No tienen ningún tipo de restricción los datos válidos, o están restringidos únicamente en cuanto al formato (restricción de longitud o tipos de caracteres? De ser así, usa un control de entrada de texto. Puedes limitar el número de caracteres que se pueden escribir y elegir en una lista un ámbito de entrada, que limita la entrada a un conjunto de caracteres o a un formato determinado, como, por ejemplo, un número, un identificador uniforme de recursos (URI) o una moneda.
  • ¿El valor representa un tipo de datos que tiene un control común especializado? Si es así, usa el control adecuado en lugar de un control de entrada de texto. Por ejemplo, usa un DatePicker en lugar de un control de entrada de texto para aceptar una entrada de fecha.
  • Si los datos son estrictamente numéricos:
    • ¿El valor introducido es aproximado y/o relativo a otra cantidad mostrada en la misma página? De ser así, usa un control deslizante.
    • ¿Sería bueno que el usuario recibiera una respuesta instantánea del efecto de los cambios en la configuración? Si es así, usa un control deslizante, posiblemente con un control adjunto.
    • ¿Es probable que el valor introducido se ajuste tras observar el resultado (como, por ejemplo, el volumen o el brillo de pantalla)? De ser así, usa un control deslizante.

Recomendaciones

  • Usa una etiqueta o un texto de marcador de posición si el propósito del cuadro de texto no está claro. Una etiqueta es visible, tenga o no un valor el cuadro de entrada de texto. El texto de marcador de posición se muestra dentro del cuadro de entrada y desaparece una vez que se ha escrito un valor.
  • Dota al cuadro de texto de un ancho apropiado para los valores que se pueden escribir. La longitud de las palabras varía según el lenguaje, así que tenlo en cuenta si quieres que tu aplicación sea internacional.
  • Por lo general, un cuadro de entrada de texto tiene una sola línea (ajuste de texto = desactivado). Si los usuarios tienen que escribir o editar una cadena larga, debes establecer un cuadro de entrada de texto de varias líneas (ajuste de texto = activado).
  • Por lo general, un cuadro de entrada de texto se usa para texto editable. Sin embargo, puedes hacer que sea de solo lectura, de modo que sea posible leer, seleccionar y copiar su contenido, pero no modificarlo.
  • Si quieres reducir el número de elementos de una vista que se encuentra atestada, podrías hacer que se muestre un conjunto de cuadros de entrada de texto solo cuando se marque una casilla de control. También puedes vincular el estado habilitado de un cuadro de entrada de texto a un control, por ejemplo, de tipo casilla.
  • Piensa en cómo quieres que se comporte un cuadro de entrada de texto cuando contenga un valor y el usuario lo pulse. El comportamiento predeterminado es adecuado para editar el valor en lugar de reemplazarlo; el punto de inserción se coloca entre las palabras y no se selecciona nada. Si reemplazar es el caso más usado para un cuadro de entrada de texto, puedes seleccionar todo el texto del campo siempre que el control reciba el foco; al escribir, se reemplazará el texto seleccionado.
  • Si quieres limitar la entrada a un conjunto de caracteres o formato determinado, como, por ejemplo, un número, un URI o una moneda, establece el ámbito de entrada de forma adecuada. De este modo se determina qué teclado en pantalla se utiliza.

Cuadros de entrada de texto de una línea

  • Usa varios cuadros de texto de una línea para capturar muchos fragmentos pequeños de información de texto. Si los cuadros de texto están relacionados, agrúpalos.

  • Haz tus cuadros de texto de una línea ligeramente más grandes que la entrada más larga prevista. Si al hacerlo el control queda demasiado ancho, sepáralo en dos controles. Por ejemplo, puedes dividir una única entrada de dirección en "Línea 1 de dirección" y "Línea 2 de dirección".
  • Establece la longitud máxima de caracteres que es posible escribir. Si el origen de datos de respaldo no permite una cadena de entrada larga, limita la entrada y usa una ventana emergente de validación para avisar al usuario cuando alcance el límite.
  • Usa controles de entrada de texto de una línea para recopilar pequeños fragmentos de texto de los usuarios.

    El siguiente ejemplo muestra un cuadro de texto de una línea para capturar una respuesta a una pregunta de seguridad. La respuesta que se espera es presumiblemente corta y por eso el cuadro de texto de una línea es el más adecuado en este caso. Como la información recopilada no coincide con ninguno de los tipos de entrada especializados que Windows reconoce, el tipo "Texto" genérico es el apropiado.

    Entrada de texto básica

  • Usa un conjunto de controles cortos de entrada de texto en una línea de tamaño fijo para escribir datos con un formato específico.

    Entrada de texto con formato

  • Usa un control de entrada de texto sin restricciones en una línea para escribir o editar cadenas, en combinación con un botón de comando que ayude a los usuarios a seleccionar valores válidos.

    Entrada de texto asistida

  • Usa un control de entrada de números en una línea para escribir o editar números.
  • Usa un control de entrada de contraseña en una línea para escribir contraseñas y PIN de forma segura.

    Entrada de contraseñas y PIN
  • Usa el control de entrada de correo electrónico en una línea para escribir una dirección de correo electrónico.

    Entrada de correo electrónico

    Cuando usas un control de entrada de correo electrónico, te llevas gratis todo esto:

    • Cuando los usuarios navegan al cuadro de texto, aparece el teclado táctil con un diseño de teclas específico para correo electrónico.
    • Si los usuarios escriben un formato de correo electrónico no válido, aparece un cuadro de diálogo avisándoles. Entrada de correo electrónico
  • Usa el control de entrada de dirección URL para escribir direcciones web.
  • Usa el control de entrada de número de teléfono para escribir números de teléfono.
  • No uses un área de texto con una altura de fila de 1 para crear un cuadro de texto de una sola línea. En su lugar, utiliza el cuadro de texto.
  • No uses texto de marcador de posición para rellenar el control de texto, ya que los cuadros de texto borran este texto en cuanto se usa el control. Usa en su lugar el atributo "Valor".
  • No pongas otro control justo al lado de un cuadro de entrada de contraseñas. El cuadro de entrada de contraseña tiene un botón de mostrar para que el usuario pueda comprobar las contraseñas escritas. Situar al lado otro control podría provocar que las contraseñas se muestren de forma accidental al intentar interactuar con él. Para evitar que esto suceda, deja un poco de espacio entre el cuadro de entrada de contraseña y el otro control, o pon el otro control en la siguiente línea.

Controles de entrada de texto de varias líneas

  • Cuando crees un cuadro de texto enriquecido, proporciona botones de estilo e implementa sus acciones.
  • Usa una fuente coherente con el estilo de la aplicación.
  • Ajusta la altura del control de texto para que permita acomodar las entradas típicas.
  • Si tienes que capturar textos largos con un número máximo de caracteres o palabras, usa un cuadro de texto sin formato e incluye un contador con ejecución dinámica que muestre al usuario cuántos caracteres o palabras le quedan antes de alcanzar el límite. Deberás crear el contador tú mismo; colócalo debajo del cuadro de texto y actualízalo dinámicamente a medida que el usuario escriba cada carácter o palabra.

    Texto largo

  • No permitas que los controles de entrada de texto crezcan en altura a medida que los usuarios escriben.
  • No uses un cuadro de texto multilínea si los usuarios solo necesitan una única línea.
  • No uses un control de texto enriquecido si un control de texto sin formato es suficiente.

Instrucciones de uso adicionales

Usa un cuadro de entrada de texto para permitir al usuario que escriba un valor de texto o edite un valor ya escrito. Puedes limitar el número de caracteres que se pueden escribir y elegir entre una lista de ámbitos de entrada, que limitan la entrada a un determinado conjunto de caracteres o formatos, como, por ejemplo, un número, un URI o una moneda.

Elegir el control de entrada de texto multilínea adecuado

Cuando los usuarios necesiten escribir o editar cadenas largas, usa un control de texto multilínea. Hay dos tipos de control de entrada de texto de varias líneas: el control de entrada de texto sin formato y el control de texto enriquecido.

  • Si el principal propósito del cuadro de texto multilínea es la creación de documentos (como entradas de blog o el contenido de un mensaje de correo electrónico), y dichos documentos necesitan texto enriquecido, usa un cuadro de texto enriquecido.
  • Si deseas que los usuarios puedan dar formato a su texto, usa un cuadro de texto enriquecido.
  • Para capturar texto que solo se va a consumir sin mostrárselo a los usuarios, usa un control de texto sin formato.
  • Para cualquier otro escenario, usa un control de entrada de texto sin formato.

[Este artículo contiene información específica para aplicaciones de la Plataforma universal de Windows (UWP) y Windows 10. Para obtener instrucciones sobre Windows 8.1, descarga el PDF sobre las directrices para Windows 8.1].

Temas relacionados

Para diseñadores
Directrices sobre revisión ortográfica
Agregar búsqueda
Para desarrolladores (XAML)
TextBox class
Para desarrolladores (HTML)
input type=text element | input type=text object
textArea element
contenteditable
Para desarrolladores (otros)
Propiedad String.Length

 

 

Mostrar:
© 2016 Microsoft