DIA DE LA EXCELENCIA - INPUT FORMULARIOS HTML5

MAYO-10-2017


El dia de hoy no hubo clase porque se realizo una actividad del dia de la excelencia igualmente nuestro grupos de trabajo ya estan conformados y tema para repasar.


PARA REPASAR EL TEMA QUE NOS CORRESPONDIÓ.

Los nuevos input HTML5 para formularios

 6 Marzo, 2014

 Formularios en HTML5, HTML5, Nuevos input, etiquetas y atributos en HTML5

4 comentarios

Toca el turno de repasar cada uno de los nuevos input HTML5. Ya he ido haciendo post de cada uno de ellos, pero ahora voy a realizar un listado y breve resumen de cada uno.

Otros post interesantes son:

• Nuevos input de fecha y hora en HTML5
• Los nuevos atributos HTML5 para inputs y formularios
• Lista de elementos y atributos obsoletos en HTML5

Tal y como sabréis tenemos muchas razones para usar estos input HTML5 y otras para no usarlos de momento:

• PROS: Ahorro considerable de código combinando los nuevos input y atributos. De esta manera no necesitaremos realizar tantas validaciones usando PHP, jQuery o similares.
• CONTRA: Al no estar estandarizado HTML5 hace que aún haya elementos que no se representen en bastantes navegadores.

Voy a realizar un listado de cada elemento y posteriormente hago un breve resumen de cada elemento para formularios en HTML5:

• Datalist
• Keygen
• Output
• Number
• Range
• Tel
• Email
• Color
• Search
• Url
• Date
• Datetime
• Datetime-local
• Month
• Time
• Week

Datalist input HTML5

Este nuevo elemento aglutina varios valores predefinidos que facilitan el autocompletado de un campo tipo input.

Es decir, según el usuario va escribiendo, el navegador abre una lista desplegable con las diferentes opciones a seleccionar. Es muy parecido a un combo o lista.

Podéis ver la documentación y ejemplos en el post ‘Datalist en HTML5: Sugiere una lista de valores en un form‘.

Os dejo una imagen de ejemplo:

keygen HTML5

Es un campo para enviar claves en el autentificado web.

Al enviarse el formulario se crean 2 claves, una pública que se envía al servidor y que posteriormente se usará para seguir auntentificándonos en el sistema, y otra privada que se almacena localmente en el navegador.

Tenéis mas info y ejemplos en el post  ‘keygen HTML5: Un nuevo campo para la generación de claves‘.

output HTML5

Esta nueva etiqueta representa el resultado de un cálculo entre los diferentes input de un formulario.

Tened en cuenta que solo representa y no se recoge dicho dato en el envio del formulario. Podéis verlo en funcionamiento en el post ‘HTML5 output: operaciones matemáticas en tiempo real en tu form‘.

number input HTML5

Este input valida automáticamente que los valores introducidos sean numéricos, con el consiguiente ahorro de código en la recepción o validación de los formularios.

El post en el que hay más info es ‘HTML5 number input: Un nuevo campo de tipo numérico en el form‘.

Os dejo una imagen del elemento.

range input HTML5

Este input es muy parecido al HTML5 number input, la diferentecia radica en que en este caso la única manera de especificar el valor es mediante su slider con sus correspondientes límites.

Podéis verlo en funcionamiento en el post ‘HTML5 range input: rangos de valores con barras de desplazamiento‘.

Y aquí una imagen.

tel input HTML5

Este nuevo input html5 resulta muy últil en los dispositivos móviles actuales.

El dispositivo móvil detecta que el input es de tipo ‘tel’ y al pulsar en él automáticamente sale el teclado telefónico del movil para insertar el número en cuestión.

Lo tenéis todo documentado en el post ‘HTML5 tel input: Campo de formulario para números de teléfono‘.

Os pongo un pantallazo capturado en mi iPhone.

email input HTML5

Pues con este  la validación de campos de email va a ser tarea sencilla.

El elemento por defecto detecta que el campo debe ser rellenado con contenido válido de una cuenta de email, por lo que mostrará una @ en el teclado y hara las verificaciones pertinentes para cumplir los requisitos de una dirección de email.

Tenéis más info en el post ‘HTML5 email input: Validación automática de emails en formularios‘.

Imagen de ejemplo.

color input HTML5

Representa una paleta (selector) de colores sin necesidad de añadir plugins ni códigos adicionales como veníamos haciendo hasta ahora. Así con un solo click podemos elegir facílmente un color.

Los ejemplos los podéis ver en el post ‘HTML5 color input: Paleta de colores hexadecimal para formularios‘.

Imagen de ejemplo de la paleta de colores.

search input HTML5

Con este input podremos decir en la validación del formulario que el campo contendrá valores de búsqueda, así el propio input nos porporciona un dato válido y el teclado del dispositivo móvil mostrará el botón ‘buscar’.

Más info en esta entrada del blog ‘HTML5 search input: Campo de búsqueda para formularios‘.

Imagen de ejemplo.

url input HTML5

Se parece bastante a el input tel de HTML5. Este campo cuando se visualiza en dispositivos móviles facilita en el teclado las teclas ‘.’, ‘/’, y ‘.com’.

Más info en el post ‘HTML5 url input: Un campo de formulario para urls‘.

Ejemplo.

date input HTML5

Este elemento vale para representar en nuestra web un datepicker o calendario, el formato de la fecha devuelto es ‘AAAA-MM-DD’.

Podéis ver toda la documentación y ejemplos en el post original ‘Date input HTML5: Un sencillo datepicker para tu formulario‘.

Os dejo una imagen de ejemplo.

datetime input HTML5

Input similar al anterior solo que este último además de la fecha envía también la hora. El formato de fecha y hora devuelto es el siguiente: ‘AAAA-MM-DDTHH:MMZ’.

Podéis ver en funcionamiento y su documentación en el post ‘Datetime input HTML5: Un campo de fecha y hora para formularios‘.

Este elemento está sin implementar en casi todos los navegadores y solo funciona a medias en Safari.

datetime-local input HTML5

Más de lo mismo, elemento idéntico al datetime pero sin enviar la zona horaria. El formato devuelto es: ‘AAAA-MM-DDTHH:MM’.

Podéis consultar su sintaxis y funcionamiento en el post ‘Input datetime-local HTML5: fecha y hora local sin timezone para formularios‘.

Os dejo una imagen de ejemplo:

Month input HTML5

Input para representar mes y año con formato ‘AAAA-MM’.

Su documentación y ejemplos la podéis encontrar en ‘Month input HTML5: Un campo de tipo mes para formularios‘.

Os dejo un pantallazo de su representación:

Time input HTML5

Con la inserción de este elemento en un formulario facilitaremos la entrada de datos para horas, el formato de la info enviada es: ‘HH:MM:SS’.

Podéis ver una amplia explicación de su uso en ‘Time input HTML5: Un campo de formulario para introducir la hora‘.

Y aquí tenéis una imagen:

Week input HTML5

Por último nos queda el input para la inserción del número de la semana de un año en cuestión. Su formato es ‘YYYY-WNN’ –> ‘2014-W07’.

También tengo un post hablando sobre este elemento: ‘Week input HTML5: Un nuevo input para insertar semanas‘.

Os muestro una imagen de su funcionamiento:

3. Construcción del código HTML, necesario para empezar a crear la aplicación, según el enunciado del item 1.

DIGITADOR: cod.15 Juan Londoño.
BASES:             -Yerly Almarales
                   -Natalia Palacio
                   -Elkin Morales

Algoritmo:Un algoritmo es un conjunto ordenado de pasos a seguir (instrucciones concretas) que llevan a resolver un determinado problema.

Pseudocodigo:En programación, lenguaje artificial e informal útil para programadores para el desarrollo de algoritmos.

Diagrama de flujo:  Un diagrama de flujo, también llamado Flujograma de Procesos o Diagrama de Procesos, representa la secuencia o los pasos lógicos (ordenados) para realizar una tarea mediante unos símbolos. Dentro de los símbolos se escriben los pasos a seguir. Un diagrama de flujo debe proporcionar una información clara, ordenada y concisa de todos los pasos a seguir.