Etiquetas interactivas html5

Cuadros de detalle y etiquetas modales

En el siguiente articulo podemos ver como generar cuadros modales o alertas personalizadas y como realizar acordeones. Antes pare realizar este tipo de efectos eran necesarias varias líneas de css y javaScript. Pero las etiquetas de html5 nos facilitan la labor.

Probablemente solemos subestimar html y la verdad es que a pesar de no ser un lenguaje de programación si no de marcado, puede facilitarnos mucho la vida estar al día de los cambios.

<details>

Es un contenedor que actúa como un acordeón o cuadro desplegable sin tener que programar el css. Cuando tocamos en el icono se desplegará y veremos el resto del articulo. Si deseamos que un acordeón por defecto este abierto cuando cargue la página utilizaremos el atributo open

Para generar un cuadro detalle o acordeón utilizaremos dos etiquetas:

• <details> que sera el contenedor de nuestro acordeón
• <sumary> Sera la parte visible de nuestro acordeón cuando no esté desplegado. Esta etiqueta es un hijo de details y siempre ha de estar encerrada dentro de ella. Por lógica yo la utilizo con un h2 o h3 seguido de un p con un breve resumen del contenido.

<sumary> Titulo visible del details</sumary>

Breve resumen del contenido de nuestro cuadro

Aqui se encuentra el texto oculto que tiene details. Cuando has hecho click he aparecido y si tocas otra vez desapareceré.

¿Cómo hacer una ventana desplegable o acordeón?

Este es nuestro código abrelo tocando en la flecha lateral

       <details>
          <summary><span id="eT_1">Cabecera</summary>
              <p>Aquí se encuentra el texto oculto que tiene details. Cuando has hecho click he aparecido y si tocas otra vez desapareceré.</p>
      </details>

                              

¡Formulario cargado!!!!!!!!!

Ventana emergente creada con etiqueta dialog.

<dialog>

La etiqueta <dialog> puede ser utilizada para crear una ventana modal de validación formulario sin tener que estar peleando con css y javaScript prácticamente. Una ventana modal es una ventana suspendida en el medio de la pantalla o ventan de dialogo.

La interpretación semántica de esta etiqueta es entendida por el navegador como un objeto independiente al body.

En javaScript existe una instrucción conocida de como alert("texto"), esta instrucción se utiliza para crear ventanas de dialogo, pero tiene la desventaja de que no se puede modificar. HTML5 crear la etiqueta dialog para crear ventanas de dialogo propias en las que podemos introducir imágenes, textos, inputs...
Todo esto facilitara la interactividad de nuestra web y ayudará a personalizar nuestros formularios, generar formularios emergentes, validaciones de ok o ko en rellenado de formularios y todo lo que se te pueda ocurrir.

Existen dos métodos que pueden resultar muy utiles close() y show() o showModal(). Como su nombre indica podremos utilizar estos métodos para oculta o mostrar la etiqueta dialog.
Por defecto la etiqueta dialog inicia oculta. En el caso de que deseemos mostrar nuestra etiqueta le incluiremos el tributo open. ( <dialog open>)

Cómo crear una ventana emergente o alert personalizado

      <button onclick="document.getElementById('cargado-ajax').show()">Abrir ventana Modal

                    <dialog id="cargado-ajax" >
                          <h2>¡Formulario cargado!!!!!!!!!</h2>
                                <p> Ventana emergente creada con etiqueta dialog.</p>
                                <button  onclick="document.getElementById('cargado-ajax').close()">cerrar Ventana </button>
                          </dialog>