Hace unos días explicaba principalmente el elemento input de los formularios en HTML 5 y hoy toca el resto de elementos. Y es que no es moco de pavo todo lo que hay.
fieldset
Este elemento se utiliza para agrupar varios elementos de un formulario… si un formulario tiene varios «bloques» o contenidos distintos, se deberían agrupar con este elemento. Si se le indica el atributo disabled entonces los elementos contenidos en él también lo están. También se le puede indicar el atributo form que hace referencia al formulario padre, y el atributo name, para acceder externamente con un nombre único.
legend
Si se le quiere poner una cabecera descriptiva a cada uno de los fieldset, el legend es el elemento que debemos utilizar. Con este texto podremos poner una cabecera a cada uno de los bloques que pueden formar un formulario compuesto de muchos contenidos.
label
Los label son los textos que acompañan a un elemento, como puede ser un input y que vienen a decir qué es de lo que se habla (que no una ayuda sobe el campo en sí). Este elemento puede tener el atributo for que se usaría para hacer referencia al name del elemento.
<label><input type="checkbox" name="lost"> Lost</label<
button
Es simplemente un botón, y es que los button son los elementos que permiten acabar de interactuar con el formulario. Botones hay de 3 tipos que se indican con el atributo type:
- submit: que permite que la información del formulario se envíe.
- reset: que deja el formulario en su estado inicial.
- button: que simplemente, no hace nada.
El atributo form indica el nombre del formulario al que hace referencia, y el name es el nombre que le asignamos al propio botón. Además de estos, también está disponible el atributo disabled que básicamente hace que el botón no pueda ejecutarse, y de esta forma queda limitado a una serie de verificaciones previas. Con el atributo autofocus el sistema automáticamente mandará el foco al botón.
select
Los select hacen referencia a un listado de opciones. Esta selección por defecto es simple (sólo un elemento) aunque si se le añade el atributo booleano multiple podremos seleccionar más de una opción. De la selección se elegirá uno o más option que son los elementos que se usan para indicar cada una de las opciones.
El atributo size permite definir la cantidad de opciones visibles por defecto, que puede ser una o más. En el caso de que haya el atributo multiple activo, por defecto habrá 4.
<select name="allowedunits" multiple size="3">
<option value="1" selected>Miner</option>
<option value="2" selected>Puffer</option>
<option value="3">Snipey</option>
<option value="4">Max</option>
<option value="5" selected>Firebot</option>
</select>
optgroup
Como ya el nombre deja ver, optgroup representa una agrupación de elementos option que tienen una agrupación común. Aunque en sí no tiene mucho significado, básicamente es eso, una agrupación de elementos de una misma temática, tipo o como se le quiera llamar, pero poco más.
Puede llevar varios atributos, como el disabled si queremos desactivar todas las opciones contenidas, o el label, que será el nombre que tenga ese grupo de cara a los usuarios.
option
El elemento option puede formar parte de un select, de un optgroup o de un datalist y básicamente es una de las opciones a elegir de entre unas cuantas. Al igual que muchos otros elementos, puede estar disabled y por tanto no ser utilizada en la selección.
Por norma general suele ir acompañado de un valor value que será lo que realmente se mande como información a la hora de enviar o trabajar con el formulario. Como información añadida podemos usar el label, que podría tratarse como el título o mini-descripción de esa opción. Por supuesto, otro de los atributos importantes es el selected que se usa en aquellos momentos en que queremos tener elementos seleccionados por defecto.
datalist
El elemento datalist está pensado para ser un sistema de «sugerencias». Básicamente es un contenedor en el que se incluyen distintas opciones que corresponderían a un campo. De esta forma, si alguien empeiza a escribir en un input y coindice de alguna manera con alguno de los contenidos, le aparecerá como una sugerencia.
<input type="text" name="favcharacter" list="characters">
<datalist id="characters">
<option value="Homer Simpson">
<option value="Bart">
<option value="Fred Flinstone">
</datalist>
textarea
Un textarea es un elemento de entrada de datos libre y multilínea, es decir, un sitio donde escribir «lo que te da la gana». Este elemento tiene bastantes atributos que le permiten hacer algunas cosas.
Para empezar podemos aplicarle el elemento readonly que básicamente impide que los usuarios puedan cambiar el contenido del elemento. Para indicar el tamaño del elemento podremos usar los atributos cols y rows que indican la cantidad de caracteres por columna y filas que se permiten; por defecto hay 20 caracteres por columna y 2 filas. Además, para que no se corten, o sí, las palabras que se puedan incluir en este elemento, podemos usar el wrap indicando el valor soft (por defecto) o hard con el qe controlamos saltos de línea y similares. En el caso de indicar un valor de maxlength le estamos diciendo al textarea que hay un límite máximo de caracteres, y que a partir del límite no ha de dejar continuar. SI queremos que el usuario tenga que rellenar obligatoriamente el campo, hay que indicarle el valor booleano required; también es posible deshabilitarlo con un disabled.
Un detalle interesante, es que, al igual que el input, este elemento también permite el atributo placeholder, que es una pequeña ayuda (de unas pocas palabras) que explique qué ha de contener el elemento.
keygen
Sin duda uno de los elementos más enigmáticos del HTML 5 es el elemento keygen. Este elemento básicamente lo que hace es generar una clave privada y una pública para que el navegador y el servidor puedan comunicarse. La clave la genera automáticamente el navegador, y supongo que mediante AJAX o algún otro sistema se podrá mantener una «conversación» entre el navegador y servidor… A ver si encuentro algún ejemplo de uso, porque no he visto nada todavía.
Permite algunos atributos como challenge o el keytype que es el tipo de codificación de la clave, que por ahora sólo acepta un valor que es rsa.
output
Otro de los nuevos elementos es el output… y es que si hay input, ¿por que no output? Y básicamente es eso… los inputs son los «cajetines» para escribir cosas, y en alguna ocasión, los propios inputs han servidor como «cajetín» de cálculo o similar… pues esto es un «cajetín» que se usa como resultado de algo.
<form onsubmit="return false">
<input name=a type=number step=any> +
<input name=b type=number step=any> =
<output onforminput="value = a.valueAsNumber + b.valueAsNumber"></output>
</form>
progress
Este es uno de los elementos que todavía no queda claro si estará en la versión final de HTML 5 o se quedará por el camino, como ya ha ocurrido con algún otro en versiones anteriores. Y es que progress viene a indicar el proceso que lleva una tarea, como si de una barra de progreso se tratase… y está pendiente de aprobación porque no existe nada que haga referencia la tarea en sí.
El elemento tiene dos posibles parámetros que son value y max que indicarían el valor a mostrar y el valor máximo que puede tener, partiendo de la base de que va entre 0 y max.
meter
Y el elemento que mataría el progress es el meter, que hace lo mismo pero diferente… básicamente es un sistema que permite crear «escalas» de cosas, independientemente de lo que sea. Un ejemplo podría ser el tamaño ocupado o libre de un disco duro.
Este elemento tiene bastantes atributos, y casi diría que hay que ponerlos todos:
- value: Es el valor actual de todos los posibles.
- min: El valor mínimo posible para el rango. Por defecto es 0.0
- max: El valor máximo posible para el rango. Por defecto es 1.0
- low: Es el valor por el que, por debajo, sería «un problema». Por defecto es el mismo que min.
- high: Es el valor por el que, por encima, sería «un problema». Por defecto es el mismo que max.
- optimum: Es el valor óptimo para la medidicón. Por defecto es la media entre min y max, o 0.5
Algunos ejemplos:
Storage space usage: <meter value=6 max=8>6 blocks used (out of 8 total)</meter>
Voter turnout: <meter value=0.75><img alt="75%" src="graph75.png"></meter>
Tickets sold: <meter min="0" max="100" value="75"></meter>
<dl>
<dt>Radius: <dd><meter min=0 max=20 value=12>12cm</meter>
<dt>Height: <dd><meter min=0 max=10 value=2>2cm</meter>
</dl>
Y hasta aquí lo que corresponde a los formularios del HTML 5. Algunas novedades interesantes sobretodo pensadas para lo que en el futuro puede traernos «la web 2.0» e incluso, si hace falta la 2.5 o la 3, quién sabe…
Deja una respuesta