Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Datos de búsqueda

Buenas prácticas en Web Móvil: Formularios

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.

Fuentes

Saber más: Input (enlace externo, en inglés).

Información del sitio