¿Qué son los atributos de datos en JavaScript y cómo se utilizan en HTML?

Un data attribute (atributo de datos) en JavaScript es un atributo personalizado que se puede agregar a un elemento HTML y que permite almacenar información adicional relacionada con ese elemento.

Se define usando la sintaxis "data-" seguida de un nombre descriptivo en minúsculas y sin espacios, y se puede asignar cualquier valor que se desee. Por ejemplo, en el siguiente fragmento de código HTML se utiliza un atributo de datos "username" en un elemento de formulario:

<form id="myForm" data-username="JohnDoe">

  <label for="inputName">Name:</label>

  <input type="text" id="inputName" name="name">

</form>

En JavaScript, se puede acceder a los valores de los atributos de datos utilizando la propiedad dataset del elemento. Por ejemplo, para acceder al valor del atributo de datos "username" del formulario anterior, se puede usar el siguiente código:

const form = document.querySelector('#myForm');

const username = form.dataset.username;

console.log(username); // "JohnDoe"

Los atributos de datos son útiles para almacenar información adicional sobre los elementos HTML que no está directamente relacionada con su presentación o funcionalidad, y se pueden utilizar para transmitir datos entre el HTML y JavaScript en una página web.