19. Elementos interactivos

En este capítulo vamos a ver algunas etiquetas que nos pueden dar ciertos elementos interactivos.

Botones

Uno de ellos son los botones, a los que para dotarlos de interactividad vamos a necesitar de la ayuda de Javascript, que es el lenguaje de programación de la web.

Veamos un ejm sencillo de como utilizar botones junto con eventos Javascript.

Ejm

<button onclick="alert('Hola Mundo')">Haz clic</button>

Acordeones

Otro de los elementos que crear cierta interactividad es la etiqueta <details></details>, que es como si fuera un acordeón. Su estructura sería la siguiente.

Ejm

<details>
  <summary>Título del acordeón</summary>
  <article>
   <h2>Título del contenido</h2>
   <p>Párrafo del contenido</p>
  </article>
</detail>

Hay un atributo denominado open, que lo que hace es que deja abierto el acordeón, se trata de un atributo booleano, de la siguiente manera.

<details open>
  ... Contenido
</details>

Cajas de diálogo o ventanas modales

HTML de manera nativa nos permite crear ventanas modales, para ello dispone de una etiqueta denominada <dialog></dialog>, la cual, por defecto aparece oculta, para abrirla tenemos que hacer uso del atributo open, de la siguiente manera.

Ejm

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <h1>Ventana modal</h1>

    <dialog id="mi-dialogo">
      <h2>Título del diálogo</h2>
      <p>Párrafo del diálogo</p>
      <button id="cerrar-dialogo">Cerrar diálogo</button>
    </dialog>

    <button id="abrir-dialogo">Abrir diálogo</button>

    <script>
      // Creo variables
      const d = document,
        $miDialogo = d.getElementById("mi-dialogo"),
        $cerrarDialogo = d.getElementById("cerrar-dialogo"),
        $abrirDialogo = d.getElementById("abrir-dialogo");

      $abrirDialogo.addEventListener("click", () => {
        $miDialogo.showModal();
      });

      $cerrarDialogo.addEventListener("click", () => {
        $miDialogo.close();
      });
    </script>
  </body>
</html>

Se trata de una etiqueta experimental, por lo que está bien saber como evoluciona su uso desde por ejm, la página https://htmlreference.io/. También podemos ver su compatibilidad desde https://caniuse.com/.

Scroll al inicio