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!
Twittear
Excelente! Faltaron ejemplos.
ResponderEliminarHola Marcel Pernia, gracias por la visita y el aporte de tu comentario!
EliminarEs verdad! Algunos ejemplos hubiesen ayudado bastante! :)
Los mejores deseos! Hasta cualquier momento!
y los ejemplos????????
ResponderEliminarHola Anónimo, gracias por la visita y el aporte de tu comentario!
EliminarLas disculpas del caso por la falta de ejemplos!
Éxitos! Hasta cualquier instante!