lang="es"> HTML5 - Formularios(V). Otras etiquetas
Recursos para formacion

HTML5 – Formularios(V). Otras etiquetas

Seguimos con nuestra linea de acompañar las explicaciones de los nuevos elementos de HTML5, con el resto de elementos, que ya veníamos utilizando hasta ahora….o no.En este articulo veremos las nuevas etiquetas traídas por el HTML5, y unas cuantas de las que ya teníamos en nuestros formularios, pero que siempre va bien recordar En todas las etiquetas relacionadas con formularios hay algunos atributos atributos que debemos conocer.

Y en los controles que tenga sentido, disponemos de los atributos:

Y con esos atributos básicos, vamos a ver de que etiquetas estamos hablando:

Vamos a ver como utilizar cada una.

< button >

Esta etiqueta nos genera un botón con el contenido que figura en la etiqueta. Si no le indicamos «type«, considerará que es «submit» y nos enviará el formulario, pero podemos indicarle «type=button«, para que se convierta en un botón sin funcionalidad, y luego agregarsela por javascript; eso es lo que hemos hecho en las lineas 9 y 10, en la 11 lo hemos declarado de tipo «submit«, y ademas, le hemos añadido nombre y valor, por lo que si se pulsa en él, se envía el formulario al servidor, y aparece el botón, como un campo mas con el valor indicado en «value«

< datalist >

Ya vimos como podemos utilizar esta etiqueta para crear un grupo de opciones, y luego solo la tendremos que relacionar, mediante su id, con un input-list, o un input-range, segun nos convenga En este ejemplo, vemos como asociamos el datalist a un control range, esto lo hacemos para conseguir que en pantalla nos aparezcan las marcas de paso, cosa que hará solo en Chrome….

< fieldset > y < legend >

Estas dos etiquetas las tenemos desde siempre; fiedset nos crea una caja en cuyo interior podemos colocar controles, y legend es el titulo de la caja. La caracteristica especial que tienen es que por defecto viene configurado un estilo que hace que la caja tenga un borde dibujado con una linea, y el legend aparezca ocupando el espacio de la raya en la esquina superior izquierda.

< label >

Llevamos utilizando esta etiqueta en todos los ejemplos, y  su única misión es semántica, para indicar que el texto contenido sirve para solicitar el campo indicado en el atributo «for», como podeis imaginaros, su uso mejora mucho la accesibilidad.

< keygen >

Keygen nos genera un desplegable para que indiquemos el nivel de encriptacion que deseamos, al enviar, se genera una clave privada que se almacena en el ordenador local, y una clave publica que se envía al servidor.

Se trata de una ayuda al sistema de geracin de claves para identificar ordenadores; a partir de ese momento, el servidor puede comprobar si el navegador que lo llama esta autorizado o no.

El rechazo por parte de IE  de implementarlo, hace delicada su utilizacion.

Todos los atributos son opcionales, y tiene como específicos :

 

< meter >

La etiqueta «meter», nos permite crear una barra semejante a las de progreso, pero pensada para que indique  el avance de un trabajo.

Aunque por su semejanza, es fácil confundirla, por su semántica, no lo deberíamos hacer nunca.

La forma de crearla es simple:

barraVel» name=»barraVel» min=0 max=180 value=0>

Esto es la linea 38 de la imagen que adjunte con «datalist», si os fijais, debemos especificar el valor mínimo (min), el máximo (max), para que pueda calcular el posicionamiento, y el valor que tiene

< output >

Esta etiqueta espera presentar un valor calculado, que se le proporcione por value., me remito nuevamente al ejemplo del Datalist:
si os fijais, esta etiqueta esta en la linea 39, y tiene como id «vVelocidad». Entonces, cuando en la linea 37 se dice

..onchange=»…vVelocidad.value=value»

estamos utilizando el evento «onchange» (cuando cambie) para tomar el valor (value) del input-range y ponerlo en el objeto vVelocidad que es nuestro output, con lo que conseguimos que el valor de la velocidad, aparezca al final del «meter«

< progress >

Esta etiqueta presenta la clásica imagen de una barra de progreso; naturalmente, su funcionalidad sera gestionada por javascript, proporcionando únicamente un frontend estético.

En el ejemplo, tenéis la implementacion normal de una barra de progreso en HTML5, y una pequeña rutina Javascript que simula el avance de la barra, cuando se pulsa en el botón «Inicia».

En cualquier implementacion siempre deberá haber una rutina (normalmente javascript) que vaya modificando el atributo «value».

El otro atributo que es importante especificar el «max» con el valor máximo que corresponde a la barra de progreso llena.

< select >,< optgroup > y < option>

Esta tres etiquetas están muy relacionadas, aunque «option» también se puede utilizar en «datalist«, inicialmente apareció en este contexto, por lo que aquí veremos como utilizarla para SELECTs

La etiqueta «select» genera un desplegable (combobox) o un cuadro de lista, en función de que le indiquemos con «size» cuantos elementos queremos que se vean.

Las opciones del elemento se indicarán mediante etiquetas «option«, en listas y combos, se les puede indicar un «value» que será el que enviarán al servidor, y un valor entre las etiquetas de apertura y cierren que es el que mostraran

Si nos interesa crear grupos de opciones, podemos incorporar el «optgroup» que crea grupos con el texto que se le indique en atributo «label«.

A continuación, aparece una forma de usarlas, comparándola con la utilización de la etiqueta «input» con el atributo «type=list«

< textarea >

Nuestra ultima etiqueta de formulario, es una caja que te permite introducir cualquier numero de lineas de texto. Tiene los siguientes atributos especiales:

Con todo esto, ya tenéis material mas que suficiente para practicar. Recordad que si le indicáis en el «action» de la etiqueta «form«

http://recursosformacion.com/utilidades/verFormulario/

Cuando pulséis enviar, nuestra web devolverá una tabla con todo lo que hayáis enviado, y así poder verificar como va todo.

En el siguiente articulo, haremos una tímida incursión en CSS, para que podáis controlar un poco la apariencia de vuestras páginas.

Salir de la versión móvil