Etiquetas de formulario

meter

---

Con esta nueva etiqueta <meter>, lo que podremos hacer es indicar una unidad de medida escalar basada en un rango con un maximo y un minimo.

Para su uso utilizaremos tras atributos para indicar el rango donde nos movemos. Los atributos serian los siguientes:

-min → el valor minimo del rango.
-max → el valor maximo del rango.
-value → el valor que indicamos entre los valores minimo y maximo.

Su sintaxis seria la siguiente:

<meter min=”....” max=”....” value=”....”>....</meter>

Ejemplo:

<meter min=”0” max=”100” value=”30”>30%</meter>
/*Esta seria otra forma de utilización*/
<meter value=”0.3”>30%</meter>

output

---

El tag <output> se utiliza para representar el resultado de una serie de valores dados en otros campos. Para saber de que valores depende utilizamos los atributos que puede utilizar.

Estos atributos son los siguientes:

-for → en este atributo especificaremos la relacion existente entre el resultado del calculo, y el elemento usado en el calculo. Su valor seria el id de los elementos separados por espacios que intervienen en  el calculo.

-form → Especifica los formularios de los que sacamos el calculo. El valor seria el id de esos formularios separados por espacios.

-name → en este atributo especificaremos el nombre que le queramos dar a esta etiqueta.

Su sintaxis seria la siguiente:

<output name=”...” for=”....” form=”....”></outtput>

Ejemplo:

….
<form id=”suma”>
<input type=”number” id=”a” value=”5” />
<input type=”number” id=”b” value=”6” />
<output for=”a b” form=”suma” name=”total”></output>
</form>
….

datalist

---

Se utiliza para mostrar una serie de opciones de autocompletado en una caja de texto <input> conforme vamos escribiendo la palabra en la caja de texto <input>.

Para asignar unas opciones de un <datalist> a una caja de texto input determinada, en el <input> debemos colocar un atributo list con el valor que le demos al id de la etiqueta <datalist>.

Dentro de la etiqueta <datalist> iran etiquetas <option> con las palabras que queramos que nos sirvan para el autocompletado.

Su sintaxis seria la siguiente:

<datalist>
<option value=”....”>
…..
</datalist>

Ejemplo:

….
<datalist id=”equipos”>
<option value=”FC Barcelona”>
<option value=”Real Madrid”>
</datalist>
….

keygen

---

https://developer.mozilla.org/es/HTML/Elemento/Keygen

progress

---

El elemento <progress>, lo utilizaremos para medir algo que esta cambiando o en proceso de cambio.

Utiliza los atributos siguientes:

-min--> valor mínimo a medir.
-max--> valor máximo a medir.
-value--> valor medido en la actualidad.

Su sintaxis seria la siguiente:

<progress min=”….” max=”….” value=”….”></progress>

Ejemplo:

….
 <progress min=”0” max=”100” value=”60”></progress>
….