html5 data 속성 사용하기

이 예제에서는 버튼 요소에 data-action과 data-target 속성을 추가하여 버튼의 동작과 대상 폼을 지정했습니다. JavaScript에서는 이 data- 속성을 읽어 적절한 동작을 수행하도록 구현했습니다.

data- 속성은 이처럼 HTML과 JavaScript 간의 데이터 전달에 유용하게 사용될 수 있습니다.

<div id="myElement" data-color="blue" data-size="large">...</div>

const myElement = document.getElementById('myElement');
console.log(myElement.dataset.color); // "blue"
console.log(myElement.dataset.size); // "large"

<button id="myButton" data-action="submit" data-target="#myForm">Submit</button>
<form id="myForm">
  <!-- form fields -->
</form>
<script>
const myButton = document.getElementById('myButton');
myButton.addEventListener('click', () => {
  const action = myButton.dataset.action;
  const target = myButton.dataset.target;

  if (action === 'submit') {
    const form = document.querySelector(target);
    form.submit();
  }
});

</script>