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.

• id – Espera un nombre, sin espacios ni caracteres extraños, con los que podremos referenciar ese componente desde Javascript, o en las hojas de estilo.
• name – Espera un nombre, sin espacios ni caracteres especiales con el que viajará el valor de este componente al servidor. Si no indicamos un «name«, el valor que introduzcamos, no viaja a servidor!.
• value – Ofrece el valor que tendrá este control en el momento de presentarlo. No se debe confundir con «placeholder», ya que este segundo, muestra un valor dentro del componente, pero, realmente el componente figura como vacío, y no se envía a servidor. Con value, el componente se rellena, y el contenido se enviará a servidor.
• tabindex – indica el orden que seguirá el tabulador para ir de un elemento al siguiente. Solo tiene sentido cuando queremos que al usar el tabulador, los campos se pidan en un determinado orden.
• accesskey – La letra que se deberá pulsar para saltar directamente a este control. En Internet Explorer, con la combinación Alt + tecla, y en Firefox, con Alt + Shift + tecla.
• disabled – Se utiliza con el mismo valor (disabled=»disabled») El control correspondiente no viaja a servidor, y el usuario no puede modificarlo. La mayoria de navegadores, lo presentan en gris a menos intensidad.
• readonly – Se utiliza con el mismo valor (readonly=»readonly»). El control correspondiente se ha podido cargar con «value», y se enviara al servidor. El usuario no puede modificarlo.

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

• size – Ancho que tendrá la caja de entrada
• maxlength – Numero máximo de caracteres que se pueden entrar.

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

• button – Creación de botones para realizar acciones; incluso las de «submit» y «reset«
• datalist – Lista de opciones
• fieldset – Contenedor de campos
• label – Nombres para campos
• legend – Titulo para fieldset
• keygen – generador de claves
• meter – barra de medida
• optgroup – Titulo de grupo de opciones
• option – cada una de las opciones de un select, optgroup, datalist….
• output – Mostrar resultados
• progress – Barra de progreso
• select – Listas de selección, y desplegables
• textarea – Entrada de texto multilinea

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 :

• challenge – Frase para generación de clave. 
• keytype – Algoritmo para la clave, los valores previstos son: rsa, dsa, ec, aunque solo esta implementado rsa

< 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:

• rows – numero de lineas que tendrá el área de texto
• cols – la anchura que tendrá el área de texto.
• maxlength – Numero máximo de caracteres que se podrán entrar en el área
• wrap – Indica como queremos recibir el campo de texto:
  • soft – El campo viajara sin caracteres de cambio de linea
  • hard – El campo viajara con los caracteres de cambio de linea que se hayan generado

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«

https://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.