Los nuevos tipos de entrada de formulario en HTML5

formularios HTML están centradas alrededor de la humilde 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, que es seguro 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 funcionan exactamente como se esperaba (aunque no con la validación y mejoras de interfaz de usuario de las etiquetas más recientes).

La norma indica que los distintos tipos serán apoyados, pero la forma exacta se apoyan 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 podría cambiar para incluir el @ cuando encuentra un campo de correo electrónico.

La mayoría de estos campos de especialidad soporte de validación, por lo que, como mínimo, es útil para establecer una :inválido estilo CSS por lo 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 utilizando 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 (10) Opera muestran un control de calendario especial, todavía otros navegadores (Chrome) incluir tanto texto como un calendario emergente. Si la fecha se introduce por el texto, se debe ingresar en un formato aaaa-mm-dd:
Puede restringir las fechas permitidas a un rango específico mediante la aplicación de la min y máx 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 es compatible con cualquier navegador principales.
fecha y hora: Las cosechadoras fecha y hora en un solo elemento. También incluye un mecanismo para entrar en la zona de tiempo.
Algunos navegadores mostrará un control de calendario para la fecha y una entrada formateada por el momento. Otros pueden modificar los teclados virtuales para la fecha y el tiempo de entrada.
El formato de fecha y hora oficial completo de regresar de los diversos elementos de fecha y hora 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 pieza del tiempo del código.
S.S: Dos dígitos para la hora, en formato de 24 horas.
:: El carácter de dos puntos entre las horas y los minutos. Otra de colon aparece entre la hora y los minutos de la zona de desplazamiento de tiempo.
mm: Dos dígitos para los minutos.
+/ - / Z: El desplazamiento de zona horaria está indicada 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 horas respecto a GMT.
gg: Número de minutos retrasado respecto al momento Zulu. Normalmente, 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 tiene el siguiente aspecto:

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

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

fecha y hora local: Al igual que el fecha y hora elemento sin un indicador de zona de tiempo:

Video: 3. Tutorial HTML5 + CSS3 - Input de formularios HTML5

correo electrónico: Esto parece un campo de texto sin formato, pero puede ser modificado de acuerdo a cómo se accede.

mes: Esto genera un año de cuatro dígitos seguido de un mes de dos dígitos:

número: Los datos numéricos pueden consistir en un campo de texto seguido por algún tipo de selección (por ejemplo, flechas arriba y abajo), o esta etiqueta pueden cambiar el teclado virtual de un dispositivo portátil para manejar única entrada numérica.

los número tipo de entrada es compatible con varios atributos especiales:

min: El valor mínimo permitido.

máx: El valor máximo permitido.

paso: Este valor indica la cantidad de las herramientas de la interfaz visual (por lo general pequeñas flechas arriba y abajo) cambian el valor cuando se activa.

valor: El valor numérico del elemento.

Todos los atributos de la número elemento puede ser entero o de coma 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 distancia tipo de entrada.

distancia: La mayoría de los kits de herramientas de interfaz de usuario tienen algún tipo de mecanismo de control deslizante o barra de desplazamiento, lo que hace que sea fácil para los usuarios introducir un valor numérico visualmente. los “distancia“gt; finalmente construir añade esta funcionalidad a los formularios HTML.

los distancia de entrada toma los mismos atributos que número, min, máx, valor, y paso. Si el navegador es compatible con el distancia etiqueta, el usuario verá una scroller- si no, aparecerá un tipo de entrada de texto sin formato.

los distancia Tipo no muestra el valor exacto, y puede ser más difícil obtener resultados precisos que con el número tipo de entrada. Una solución consiste en emparejar una salida etiqueta para el distancia, y el uso de javascript para actualizar la salida cuando se cambia la gama. Un formulario de ejemplo que incorpora esta idea:

Cuando el distancia se cambia el valor, se llama a una función de javascript llamada updateOutput:

Video: Formulario HTML5

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

Como el número tipo de entrada, la distancia se pueden dar valores de punto flotante si lo desea.

buscar: Se utiliza para recuperar el texto que está destinado a ser utilizado como parte de una búsqueda (ya sea internamente oa través de un servicio de búsqueda). En la mayoría de los navegadores, esta etiqueta se muestra como un campo de texto ordinario. Se hace a veces tienen un comportamiento especial. En Safari, el campo de búsqueda aparece con una pequeña x, que borra el contenido de la búsqueda. En Chrome, el autocompletado características de la barra de búsqueda principal (que es también el elemento de entrada de URL en Chrome) se aplican automáticamente al cuadro de búsqueda.

Al igual que los otros tipos de entrada nuevos, no hay penalización por el uso de la buscar elemento en los navegadores que no soportan. El repliegue es una entrada de texto sin formato.

los buscar elemento realidad no hace ninguna búsqueda. Para que sea funcional, es necesario escribir código.

tel: Este campo espera tres dígitos seguidos de un guión y cuatro dígitos - un número de teléfono local. Puede que tenga que jugar con el patrón atributo si desea permitir que un código de área o extensiones para validar.

url: Los navegadores que soportan este elemento comprobará la http: // prefijo para una dirección web. Los navegadores móviles también pueden adaptar el teclado virtual para incluir caracteres que se encuentran comúnmente en las URL: los dos puntos (:), barra inclinada (/), y la tilde (~).

semana: Permite al usuario elegir una semana a partir de un control de calendario. Devuelve un valor en el siguiente formato: aaaa-Wnn

aaaa: Representa un año de cuatro dígitos.

-: El carácter de guión.

W: La capital W personaje.

nn: La semana como un número de dos dígitos.

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