HTML Button 요소와 Form 활용 정리

Button 요소란?

웹 페이지에서 button 요소는 사용자와의 상호작용을 제공하는 중요한 요소입니다. button 요소는 다양한 유형이 있으며, input 태그의 버튼 타입과 함께 폼 요소에서 유용하게 사용됩니다.

Form 요소 내에서 Button 사용

HTML 폼(form) 내부에서 다양한 버튼을 사용할 수 있습니다. 다음은 각 버튼의 역할을 설명합니다.

1. <input> 태그의 버튼

<div>
  <input type="submit" value="전송" />
  <input type="reset" value="초기화" />
  <input type="button" value="Click Me!" />
</div>

• type="submit" : 폼 데이터를 서버로 제출합니다.
• type="reset" : 입력된 데이터를 초기화합니다.
• type="button" : 특별한 동작이 없으며, JavaScript와 함께 사용하여 이벤트를 트리거할 수 있습니다.

2. <button> 태그의 버튼

<div>
  <button type="submit">전송</button>
  <button type="reset">초기화</button>
  <button type="button">클릭!</button>
</div>

• type="submit" : form 요소 내에서 제출 역할을 합니다.
• type="reset" : form 내의 입력값을 초기화합니다.
• type="button" : 기본 동작이 없으며, JavaScript 이벤트 핸들러와 함께 사용됩니다.

3. 이미지 버튼 사용

<div>
  <button type="submit">
    <img src="/src/assets/icon/search.svg" alt="전송하기" />
  </button>
</div>

• 버튼 내부에 이미지를 삽입하여 시각적인 요소를 추가할 수 있습니다.

4. form 속성을 이용한 버튼 제어

<button type="reset" form="buttonForm">초기화</button>

• form="buttonForm" 속성을 사용하여, 특정 form과 연결된 버튼을 폼 외부에서도 동작하도록 설정할 수 있습니다.

정리

• <input>과 <button> 태그 모두 버튼 역할을 수행할 수 있습니다.
• submit, reset, button 타입을 상황에 맞게 활용해야 합니다.
• <button> 요소는 내부에 HTML 요소(이미지, 아이콘 등)를 포함할 수 있어 스타일링이 유리합니다.
• form 속성을 사용하면 폼 외부에서도 버튼이 폼과 연결될 수 있습니다.

이번 학습을 통해 button 요소와 form의 관계를 이해하고 적절한 버튼을 선택하는 것이 중요하다는 것을 배웠습니다.