Elementos interactivos

Detalles <details>

La etiqueta <details> permite mantener oculta una parte de la página web, que el usuario puede hacer visible u ocultar de nuevo haciendo clic en un icono con forma de triángulo.

<p>En la película de 1968 ... </p>

<details>
  <summary>Spoiler</summary>
  <p>En la escena final, el protagonista encuentra ... </p>
</details>
Enlace externo

El atributo open hace que el contenido de <details> se muestre cuando se carga la página, aunque se pueda ocultar posteriormente.

<p>Formulario de registro</p>

<details open>
  <summary>Datos personales</summary>
  <p>Nombre: <input type="text" name="nombre"></p>
</details>

<details open>
  <summary>Datos profesionales</summary>
  <p>Empresa: <input type="text" name="empresa"></p>
</details>
Enlace externo

Resumen <summary>

El elemento <summary> se incluye dentro de un elemento <details> y contiene la parte del contenido que está siempre visible y sobre la que también se puede hacer clic para mostrar el resto del contenido, como muestran los ejemplos del apartado anterior.


Si no se incluye el elemento <summary>, los navegadores muestran el texto "Detalles".

<p>Berners-Lee creó el HTML basándose en el SGML. La IETF publicó la norma RFC 1866 en 1995 y el W3C publicó la recomendación HTML 3.2 en 1997.</p>

<details>
  <ul>
    <li>HTML: HyperText Markup Language</li>
    <li>SGML: Standard Generalized Markup Language</li>
    <li>IETF: Internet Engineering Task Force</li>
    <li>W3C: World Wide Web Consortium</li>
  </ul>
</details>
Enlace externo

El icono que muestra el elemento interactivo <summary> de <details> se puede establecer con las propiedades de lista, como se comenta la lección CSS Listas.

Ventana de diálogo <dialog>

La etiqueta <dialog> permite definir el contenido de una ventana de diálogo modal (independiente de la página web). Para mostrar la ventana, se debe establecer el atributo open.

<dialog id="dialog-1">
  <h1>Ventana de diálogo</h1>

  <p>Esto es un ejemplo de ventana de diálogo</p>

  <p>
    <input type="button" value="Cerrar" onclick="document.getElementById('dialog-1').removeAttribute('open')">
  </p>
</dialog>

<p>
  <input type="button" value="Muestra diálogo" onclick="document.getElementById('dialog-1').setAttribute('open', 'open')">
</p>
Enlace externo