Los nuevos tipos de entrada de formulario en html5

Formularios HTML se centran alrededor de los humildes, pero flexible entrada elemento. HTML5 añade una serie de formas muy útiles de entrada que ayudan a convertir HTML en una herramienta de interfaz de usuario más moderno.

Aunque el apoyo a estas etiquetas no es universal, es seguro para comenzar a usar ahora. Cualquier navegador (incluso IE6) que no entienden los tipos de entrada avanzadas volverán a input type = "texto", que todavía funciona exactamente como se esperaba (aunque no con las mejoras de validación y la interfaz de usuario de las etiquetas más nuevas).

La norma indica que contarán con el apoyo de los distintos tipos, pero la forma exacta se admiten los elementos puede variar de un navegador a otro. Por ejemplo, el campo de correo electrónico puede tener un aspecto como un campo de texto normal a un usuario en una computadora de escritorio estándar, pero el teclado virtual en un dispositivo móvil puede cambiar para incluir el @ cuando encuentra un campo de correo electrónico.

La mayoría de estos campos de especialidad apoyar la validación, por lo que, como mínimo, es útil para establecer un : inválido Estilo CSS para que el usuario puede saber si los datos están en el campo. Estos son los tipos de entrada con la codificación de la muestra:

• color: Permite al usuario elegir un color usando formatos web estándar - nombres reconocidos de color (amarillo) y los valores hexadecimales precedidos por un símbolo # (# FF0033).

• fecha: Algunos navegadores (Firefox 3.5) muestran un campo de texto, otros (Opera 10) muestran un control de calendario especial, todavía otros navegadores (Chrome) incluir tanto texto como un calendario emergente. Si la fecha se introduce texto, se debe introducir en un formato aaaa-mm-dd:

  Puede restringir las fechas permitidas a un rango específico mediante la aplicación de la min y max atributos al elemento.

• hora: El tiempo se almacena en el formato hh: mm. Algunos navegadores incluyen dos puntos directamente en el campo, y algunos modifican el teclado virtual con los números y el carácter de dos puntos. También es posible que un navegador aparecerá una especie de selector de tiempo personalizado, pero esto aún no se admite en ningún principales navegadores.

• fecha y hora: Combina fecha y hora en un solo elemento. También incluye un mecanismo para entrar en la zona horaria.

  Algunos navegadores pop-up un control de calendario para la fecha y una entrada con formato para la época. Otros pueden modificar los teclados virtuales para la fecha y tiempo de entrada.

  El formato de la fecha y hora oficial completa de regresar de la fecha y hora diferentes elementos es un código especializado: aaaa-mm-ddThh: mm + ff: gg:

• aaaa: Cuatro dígitos para el año.

• -: Un carácter de guión real, que debe ser colocado entre el año y el mes. Otro tablero se coloca entre el mes y el día.

• mm: Dos dígitos para el mes.

• dd: Dos dígitos para el día.

• T: La capital T indica el comienzo de la parte de tiempo del código.

• hh: Dos dígitos para la hora, en formato de 24 horas.

• :: El carácter de dos puntos entre las horas y los minutos. Aparece otro dos puntos entre las horas y los minutos de desplazamiento de la zona horaria.

• mm: Dos dígitos para los minutos.

• +/ - / Z: El desplazamiento de zona horaria se indica por un capital Z (si el tiempo es Zulu o GMT tiempo) o el símbolo + o - si el tiempo es en otra zona horaria.

• ff: Si la zona horaria no es hora zulú, indicar el número de desplazamiento de GMT horas.

• gg: Número de compensación de vez Zulu minutos. Típicamente, esto es 00, pero es posible que la zona horaria será compensado por 15, 30, o 45 minutos.

Por ejemplo, 17:30 el 11 de octubre de 2011, en la ciudad de Nueva York se ve así:

2011-10-11T17: 30-05: 00

La necesidad de la fecha y hora para estar en este formato para ser considerada válida para los navegadores que validan una fecha y hora campo.

Todos los atributos de la número elemento puede ser entero o punto flotante. Sin embargo, los navegadores actuales que apoyan esta etiqueta (Opera y Chrome) no parecen validar así con los valores de punto flotante como lo hacen con valores enteros. Para un mayor control de entrada numérica, considere la alcance tipo de entrada.

 función updateOutput () {// obtener elementsvar myRange = document.getElementById ("myRange") - var myOutput = document.getElementById ("myOutput") - copiar el valor overmyOutput.value = myRange.value- //} function final //

Algunos navegadores estallar para arriba el control de calendario estándar. Cuando el usuario selecciona una fecha (o una semana), se devolverán sólo el año y la semana. Otros navegadores simplemente validan para el formato adecuado.