jueves, 8 de octubre de 2015

Nuevos elementos para formularios en HTML



Ya hemos visto los nuevos tipos de campos disponibles en HTML5, por lo tanto es momento de estudiar los nuevos elementos HTML incorporados con la intención de mejorar o expandir las posibilidades de los formularios.


  • El elemento <datalist>
El elemento <datalist> es un elemento específico de formularios usado para construir una lista de ítems que luego, con la ayuda del atributo list, será usada como sugerencia en un campo del formulario.

Código 6-21. Construyendo la lista.

<datalist id="informacion">
<option value=”123123123” label=”Teléfono 1”>
<option value=”456456456” label=”Teléfono 2”>
</datalist>

Este elemento utiliza el elemento <option> en su interior para crear la lista de datos a sugerir. Con la lista ya declarada, lo único que resta es referenciarla desde un elemento <input> usando el atributo list:

Código 6-22. Ofreciendo una lista de sugerencias con el atributo list.

<input type="tel" name="telefono" id="telefono" list="informacion">

El elemento en el Código 6-22 mostrará posibles valores para que el usuario elija. 
IMPORTANTE: El elemento <datalist> fue solo implementado en Opera y Firefox Beta en este momento.


  • El elemento <progress>
Este elemento no es específico de formularios, pero debido a que representa el progreso en la realización de una tarea, y usualmente estas tareas son comenzadas y procesadas a través de formularios, puede ser incluido dentro del grupo de elementos para formularios. 
El elemento <progress> utiliza dos atributos para configurar su estado y límites. El atributo value indica qué parte de la tarea ya ha sido procesada, y max declara el valor a alcanzar para que la tarea se considere finalizada. Vamos a usar <progress> en futuros ejemplos.


  • El elemento <meter>
Similar a <progress>, el elemento <meter> es usado para mostrar una escala, pero no de progreso. Este elemento tiene la intención de representar una medida, como el tráfico del sitio web, por ejemplo.

El elemento <meter> cuenta con varios atributos asociados: min y max configuran los límites de la escala, value determina el valor medido, y low, high y optimum son usados para segmentar la escala en secciones diferenciadas y marcar la posición que es óptima. 


  • El elemento <output>
Este elemento representa el resultado de un cálculo. Normalmente ayudará a mostrar los resultados del procesamiento de valores provistos por un formulario. El atributo for asocia el elemento <output> con el elemento fuente que participa del cálculo, pero este elemento deberá ser referenciado y modificado desde código Javascript. Su sintaxis es <output>valor</output>.



Espero haber ayudado en algo. Hasta la próxima oportunidad!








4 comentarios:

  1. Respuestas
    1. Hola Marcel Pernia, gracias por la visita y el aporte de tu comentario!
      Es verdad! Algunos ejemplos hubiesen ayudado bastante! :)
      Los mejores deseos! Hasta cualquier momento!

      Eliminar
  2. Respuestas
    1. Hola Anónimo, gracias por la visita y el aporte de tu comentario!
      Las disculpas del caso por la falta de ejemplos!
      Éxitos! Hasta cualquier instante!

      Eliminar