Entrada de datos

Debe evitarse la entrada de datos por parte del usuario siempre que sea posible. La entrada libre de texto puede evitarse utilizando controles de formulario que no requieran escritura:

  • Elemento Input de tipo radio: <input type="radio" />
  • Elemento Input de tipo check: <input type="checkbox" />
  • Elemento Select: <select>[...]</select>

Aun utilizando los campos anteriormente enumerados deben proveerse valores preseleccionados siempre que resulte posible.

Muchos dispositivos móviles soportan la distinción en los campos de formulario del tipo de datos a introducir: numéricos o alfanuméricos. Así, si el dato a introducir es numérico, solo se escribirán números. Esta distinción se realiza con el atributo inputmode (enlace externo, en inglés) en elementos input y textarea.

Modo de entrada

Hay dos tipos de valores para el atributo inputmode (enlace externo, en inglés) (pueden combinarse):

  • Tipos de idioma: latin, tibetan, cyrillic, etc. Habitualmente no será necesario utilizarlo.
  • Tipos de caracteres:
    • lowerCase: letras minúsculas.
    • upperCase: letras mayúsculas.
    • startUpper: primera letra mayúscula.
    • titleCase: primera letra mayúscula en cada palabra
    • digits: solo números.
    • predictOn: activar texto predictivo.
    • predictOff: desactivar texto predictivo. Adecuado para campos en los que se introducirán palabras que no estén presentes en los diccionarios del sistema de texto predictivo del dispositivo.

Teclados según tipo de campo

Este etiquetado es HTML 5 (salvo el campo de texto normal), por lo que habrá navegadores que no lo soporten: lo obviarán y degradarán como si fuera un campo de tipo texto (type="text"). Complementa al apartado anterior Modo de entrada.

Los ejemplos están comprobados en Safari de iPhone/iTouch.

Campo de texto normal

<input type="text" />

Campo de URL

<input type="url" />

Campo numérico

<input type="number" />

Campo de email

<input type="email" />

Saber más

Csslab.cl: Teclados de iPhone/iPad (enlace externo).

WCAG 1

Proporcionar valores preseleccionados se cumple con el punto 10.4 (prioridad AAA, enlace externo, en inglés): Hasta que las aplicaciones de usuario manejen correctamente los controles vacíos, incluya caracteres por defecto en los cuadros de edición y áreas de texto.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.