Esta es la parte 2 del módulo de Formularios en HTML5.
Pulsa AQUI para ver la primera parte.

Etiqueta <button> … </button>

Esta etiqueta permite definir un botón sobre el que se pueden hacer «clics» con el ratón.

Aunque se recomienda utilizar la etiqueta <input> en los formularios, podemos usar esta etiqueta tanto dentro como fuera de los formularios. De utilizarla en un formulario se pueden utilizar prácticamente los mismos atributos que si usásemos la etiqueta <input type=»button» value=»button»>

La ventaja de esta etiqueta es que, al usarla fuera de un formulario, podemos añadir dentro de esta etiqueta tanto texto como imágenes. Su uso fuera de formularios suele estar ligados a la ejecución de código Javascript o similar.

Pese a que la propia etiqueta ya define un botón, se recomienda añadir igualmente el atributo type y añadir button como valor. La sintaxis sería la siguiente:

Etiqueta <fieldset> … </fieldset>

Se utiliza como contenido dentro de formularios, y su función es la de realizar grupos de campos dentro del formulario.

Estos grupos se representan mediante un marco con borde alrededor de los campos contenidos (aunque su aspecto, como el de cualquier etiqueta, puede ser modificado mediante código CSS).

Su sintaxis es la siguiente:

Revisemos sus atributos:

• disabled
  Indica que los campos incluidos en el contenido de la etiqueta están desactivados.
• form
  Permite indicar a qué formulario pertenece el campo. Como valor se ha de indicar el valor del atributo ID que hayamos incluido en la etiqueta <form> de nuestro formulario.
• name
  Permite indicar el nombre al grupo de etiquetas, que, como es habitual, se utilizará para que otros lenguajes de programación puedan interactuar con él.

Esta etiqueta suele ir acompañada de otra: <legend> … </legend>. Ésta permite establecer el título del grupo de elementos contenidos en la misma y habitualmente se añade detrás de la etiqueta de apertura del grupo.

Veamos un sencillo ejemplo:

Así se vería en el navegador:

Etiqueta <label> … </label>

Esta etiqueta es usada para definir una etiqueta o título para todos los campos input. A nivel de formulario no realiza ninguna función especial sobre ningún campo, pero a nivel de usuario sí representa una mejora en la visualización del formulario.

La sintaxis es la siguiente:

Veamos sus atributos:

• form
  Permite indicar a qué formulario pertenece este campo. Como valor se ha de especificar el valor del atributo ID de nuestra etiqueta <form>.
• for
  Permite indicar el nombre de control, con el cual se ha de asociar la etiqueta. El valor ha de ser el utilizado en el atributo ID de la etiqueta <input> en cuestión.

Para que lo entiendas mejor, voy a aplicar esta etiqueta al ejemplo anterior:

En el navegador se verá exactamente igual que el ejemplo anterior, pero la diferencia es que en el anterior ejemplo, si el usuario hace clic sobre el texto «Nombre:» o sobre el texto «Localidad:» no ocurriá nada, porque para le navegador será sólo un texto.

Sin embargo, en este último ejemplo, al pulsar sobre los textos verás como el navegador pone el cursos en la casilla, para que introduzcas los datos.

Prueba tú mismo el código en tu navegador y comprueba la diferencia.

Etiqueta <keygen>

Esta etiqueta sirve para crear claves codificadas para que se envíen junto a los datos del formulario y añadir así un nivel extra de seguridad en el envío y recepción de los mismos.

Cuando se envía el formulario, la clave privada se guarda en el ordenador del cliente a la vez que la clave pública se envía al servidor.

La sintaxis es la siguiente:

Como puedes ver, no tiene etiqueta de cierre, y sus atributos son los siguientes:

• autofocus
  Es un atributo bolleano por lo que no hay que añadirle ningún valor; si añdes el atributo ya lo activas. Sirve para que el navegador ponga el cursor en este campo al cargar el formulario.
• disabled
  Como en el resto de campos, premite marcar este elemento como desactivado.
• form
  Permite indicar a qué formulario pertenece el campo (recuerda, como valor tienes que poner el mismo que hayas puesto en el atributo ID de la etiqueta <form>).
• name
  Premite indicar el nombre que quieres asignarle a este campo (recuerda, suele ser utilizado por lenguajes tipo Javascript y similares para interactuar con él).
• challenge
  Permite indicar que las claves generadas sean cambiadas automáticamente, después de haberse enviado el formulario.
• keytype
  Permite indicar el tipo de codificación que se quiere utilizar para el cifrado de las claves. Pueden ser de tipo rsa, dsa y ec, siendo la primera la utilizada por defecto.

Veamos trabajar esta etiqueta sobre el ejemplo anterior:

A nivel visual el formulario no cambia, el usuario no nota ningúna diferencia con respecto al ejemplo anterior.

Etiqueta <meter> … </meter>

Con esta etiqueta creamos un control, una medida de escalar dentro de un rango conocido. Se suele utilizar para expresar uso de discos, importancia de un resultado, etc. Lo entenderás mejor con el ejemplo.

Aunque visualmente se puede utilizar para mostrar una barra de progreso, no está diseñada para ello y no se recomienda su uso para este objetivo.

Además, el texto que encerremos dentro será el que se muestre en medio de la barra. De nuevo, lo entenderás mejor con el ejemplo.

Su sintaxis es la siguiente:

Veamos sus atributos:

• low, high, optimum
  Con éstos podemos indicar valores numéricos a partir de los cuáles se considera que son bajos, altos u óptimos, respectivamente. En función de estos valores, la barra se mostrará más o menos llena, y de un color u otro.
• min, max
  Permiten especificar los valores numéricos considerados mínimo y máximo respectivamente.
• El resto de atributos ya los hemos visto anteriormente y funcionan de la misma forma que hemos explicado.

Para mostrarte un ejemplo, voy a recuperar el ejemplo del formulario de registro y voy a aplicar esta etiqueta justo debajo del campo de contraseña:

Así se verá en el navegador:

Aunque tiene más usos, el más obvio es para indicar al usuario la seguridad de una contraseña que esté introduciendo. Lógicamente, hemos de añadir código Javascript o similar para que, según introduzca el usuario su contraseña, se actualicen los atributos de esta etiqueta, pero a nivel de formularios HTML5 esta es la estructura que debes conocer.

Cuando publique el curso de Javascript ¡seguro que toda esta información te viene como anillo al dedo!

Etiqueta <progress> … </progress>

Aunque es visualmente parecida a la anterior, esta etiqueta sirve específicamente para mostrar una barra indicadora que representa el progreso de una tarea que se está realizando. Al igual que en la anterior, se suele usar en cojunto con Javascript u otros lenguajes de programación.

La sintaxis es la siguiente:

Y los atributos son más que sencillos: en el atributo max indicamos el número máximo de secuencias o pasos que tiene la tarea en cuestión (es decir, el 100%), y en el atributo value indicamos el número actual de la secuencia.

Si queremos indicar que estamos en el paso 5 de un total de 10, la sintaxis sería la siguiente:

Nota: A diferencia de la anterior etiqueta, la barra que muestra la etiqueta <progress> no cambia de color según esté más o menos completa, siempre de muestra del mismo color. No obstante, esto puede ser alterado con otros códigos, como CSS.

Etiqueta <output> … </output>

Permite definir el resultado de un cálculo mostrando además el resultado de la operación en el navegador.

Su sintaxis es la siguiente:

<ouput for=»valor» form=»valor» name=»valor«></ouput>

Ya hemos visto sus atributos en otras etiquetas. La única diferencia es que en el atributo for hemos de añadir todos los valores de los atributos ID de los <input> de los cuales queremos tomar los datos para hacer el cálculo.

Lo entenderás mejor con el siguiente ejemplo:

Si te fijas en el código, hay añadido un atributo que no has visto: oninput. Este atributo es un atributo de evento, y dentro está escrito código en Javascript. Es decir, estamos diciendo que, en el formulario, cuando ocurra algo se ejecute el código. Este tipo de atributos y eventos se estudian en cursos de Javascript, por lo que no voy a profundizar en ello. Lo he añadido para que tú puedas hacer copy&paste y probarlo en tu propio navegador y veas para qué sirve esta etiqueta en concreto.

Veamos un ejemplo en directo; mueve las barras del siguiente ejemplo y mira cómo cambia el restulado:

Etiqueta <select> … </select>

Esta etiqueta es utilizada para crear listas desplegables o listas abiertas desde la que el usuario puede realizar la selección de una o varias opciones representadas en ella.

Su sintaxis es la siguiente:

Como puedes ver, su uso es bastante simple. Dentro de la etiqueta <select> usamos la etiqueta <option> para definir cada una de las opciones.

Estos son los atributos de la etiqueta <select>:

• autofocus
  Permite indicar cuál es el control que recibe el «foco» al cargar el fomurlario. Es decir, dónde se sitúa el cursor cuando se carga el formulario en el navegador.
• disabled
  Con éste indicamos que el elemento está desactivado: bloqueado y sin poder realizar ninguna acción sobre el mismo.
• form
  Es donde debemos añadir el valor del atributo ID que hemos añadido en la etiqueta <form>, para indicar a qué formulario pertenece este elemento.
• multiple
  Si añadimos este atributo estamos indicando que el campo select que estamos definiendo permite seleccionar una o múltiples opciones.
• name
  Dentro de éste indicamos el nombre que queramos dar al elemento.
• required
  Con éste indicamos que el campo es obligatorio para que el formulario pueda ser enviado.
• size
  Nos permite indicar un valor numérico, que será el número de variables visibles al desplegar el elemento en el formulario.

Por otra parte, estos son los atributos de la etiqueta <option>:

• disabled
  Con éste indicamos que el elemento está desactivado: bloqueado y sin poder realizar ninguna acción sobre el mismo.
• label
  Premite indicar una etiqueta corta en formato texto.
• selected
  Con éste atributo indicamos que la opción es la opción por defecto, ya preseleccionada al cargar el formulario.
• value
  En este atributo indicamos la información que será enviada en el formulario si el usurario selecciona la opción en cuestión.

Existe otra etiqueta que se puede utilizar dentro de la etiqueta <select>, que sirve para agrupar opciones: <optgroup> … </optgroup>. Esta última etiqueta solo dispone de dos atributos: label y disabled.

Veamos un ejemplo completo de estas etiquetas:

Y así se vería en el navegador:

Etiqueta <textarea> … </textarea>

Utilizamos esta etiqueta para definir un área de texto, similar a un campo de texto pero con la diferencia de que se puede indicar tanto el número de filas como el de columnas para mostrar más grande o más pequeño el campo al usuario cuando el navegador carga el formulario.

Se suele utilizar para solicitar textos explicativos, opiniones, comentarios, etc. Es decir, textos de un tamaño medio-largo.

La sintaxis es la siguiente:

<textarea autofocus disabled form=»» cols=»» rows=»» maxlength=»» name=»» placeholder=»» readonly required wrap=»»>

 Contenido inicial del area de texto

</textarea>

Sus atributos son los siguientes:

• autofocus
  Indica que este campo es el que recibe el foco al cargar el formulario (es decir, donde se coloca el cursor).
• disabled
  Indica que el campo aparecerá deshabilitado: desactivado y sin que el usuario pueda interactuar con él.
• required
  Si se aplica, significa que se ha de insertad contenido en el campo para que el formulario pueda ser enviado.
• readonly
  Si se aplica, significa que el campo es de sólo lectura: los datos el campo son enviados pero el usuario no puede interactuar con él ni modificar el contenido.
• name
  Utilizado para indicar un nombre al elemento.
• form
  Utilizado para indicar a qué formulario pertenece. Como valor tendrás que añadir el mismo que hayas indicado en el atributo IDde la etiqueta <form>.
• maxlength
  Permite indicar el número máximo de caracteres que el usuario puede introducir en este campo.
• cols
  Permite indicar el número de columnas visibles.
• rows
  Permite indicar el número de filas visibles.
• wrap
  Permite indicar cómo se realiza el ajuste de palabras en el contenido, y se puede añadir como valor hard y soft.

Para finalizar, veamos un ejemplo de un formulario más complejo con la mayoría de las etiquetas explicadas:

¡A practicar!

Este módulo del Curso HTML5 desde cero sin duda ha sido el más largo y quizás el más complejo para tí. Sin embargo, los formularios en HTML5 es una de las tareas más comunes a cualquier proyecto, no sólo porque la mayoría de proyectos cuentan con un formulario de contacto o de soporte, si no porque es una de las formas más habituales de gestión de datos para los usuarios a través de una página web, desde el cual podemos interactuar con bases de datos o ejecutar acciones más complejas cuando lo utilizamos junto con lenguajes como PHP ó JavaScript.

• Practica 1: Formulario de contacto
  Crea un documento HTML5 desde cero para crear un formulario de contacto que tenga, como mínimo, los campos de nombre, email, comentarios, subida de archivo adjunto, aceptación de condiciones legales obligatorias y botón de envío del formulario.
• Practica 2: Busca un formulario algo más complejo o al menos con más campos en cualquier página de internet e intenta reproducir todos sus campos con las etiquetas más adecuadas. Como sugerencia, prueba a reproducir este formulario: https://gamewark.com/panel-de-usuario/envia-una-noticia

Summary

Article Name

Formularios en HTML5

Description

Esta es la parte 2 del módulo de Formularios en HTML5, donde encontrarás todas las etiquetas en HTML para crear formularios en HTML5

Author

Nicolau Roca

Publisher Name

Let's Webbing

Publisher Logo