Etiqueta command HTML5: Definir botones de comandos

Vamos a ver la nueva etiqueta command HTML5 para poder definir botones que accionan comandos en nuestra página web.

Otras etiquetas HTML5 interactivas con funciones similares son:

• details
• summary
• menu

Sintaxis de la etiqueta command HTML5

Veamos la sintaxis de esta etiqueta HTML5 extraída de su web oficial:

Os explico la sintaxis superior:

• La etiqueta command se situa dentro de una etiqueta menu.
• El atributo type puede tener los siguientes valores:
  – command: Comando a ejecutarse.
  – checkbox: Comando a seleccionar mediante un checkbox.
  – radio: Comando a seleccionar mediante un radio button.
• label: Proporciona un nombre al comando.
• icon: Proporciona una imagen al comando.
• disabled: Indica que el comando está deshabilitado.
• checked: En caso de seleccionar el type checkbox con este atributo podemos dejarlo seleccionado por defecto.
• radiogroup: Proporciona el nombre del grupo de radio buttons, se usa en caso de elecgir el type radio.

Ejemplos de la etiqueta command HTML5

Veamos un sencillo ejemplo de esta etiqueta HTML5:

En el ejemplo superior he usado 3 etiquetas command de tipo radio dentro de una etiqueta menu:

• En la primera uso los atributos radiogroup, label, icon y onclick para ejecutar un comando. Con el atributo checked=»checked» estoy seleccionando por defecto la etiqueta.
• En la segunda mismos atributos pero sin estar seleccionada por defecto.
• En la tercera lo mismo pero con el atributo disabled=»disabled», de esta manera no se pordrá ejecutar su acción.

Vamos con otro ejemplo:

En este otro ejemplo he usado usado el type command con un label, un icono para que la acción sea sacar un mensaje por pantalla.