input type button과 button 차이점

<input type="button">과 <button> 태그는 모두 사용자 인터페이스에서 버튼을 만드는 데 사용되지만, 이 두 가지는 몇 가지 중요한 차이점이 있습니다.

1. 기본적인 구조와 용도

• <input type="button">:
  • <input> 태그는 자체적으로 버튼을 렌더링하지만, 기본적으로 기능적인 버튼만 제공합니다.
  • 이 버튼은 텍스트 또는 HTML 콘텐츠를 삽입할 수 없으며, value 속성만을 통해 버튼에 텍스트를 표시합니다.

  <input type="button" value="클릭">
  

  • value 속성에 텍스트를 설정하면 버튼에 표시되며, 버튼 클릭 시 이벤트 처리를 위해 onclick 이벤트를 설정할 수 있습니다.
  • type="button"은 버튼으로 사용되며, type="submit" (폼 제출용)과 type="reset" (폼 리셋용) 등 다른 type도 존재합니다.
• <button>:
  • <button> 태그는 보다 유연한 버튼 요소로, 내부에 HTML 콘텐츠를 포함할 수 있습니다.
  • 버튼 내부에 텍스트, 이미지, 아이콘, 또는 HTML 요소를 자유롭게 삽입할 수 있습니다.

  <button>클릭</button>
  

  • <button> 태그는 텍스트뿐만 아니라 다양한 HTML 콘텐츠 (예: 이미지, 아이콘 등)를 포함할 수 있습니다.
  • 기본적으로 type="submit"이며, type="button"이나 type="reset"과 같은 다른 유형도 설정할 수 있습니다.

2. value 속성의 차이점

• <input type="button">:
  • value 속성으로 버튼에 표시될 텍스트를 설정합니다.

  <input type="button" value="버튼 클릭">
  

• <button>:
  • <button>은 텍스트나 HTML 콘텐츠를 직접 버튼 내부에 삽입합니다. 별도로 value 속성은 필요하지 않으며, 버튼 내에 넣을 내용이 버튼의 텍스트나 HTML 콘텐츠로 바로 표시됩니다.

  <button>버튼 클릭</button>
  

3. <button>의 다양한 사용

• <button>은 더 다양한 콘텐츠를 삽입할 수 있기 때문에, 이미지나 아이콘과 함께 버튼을 구성하거나, 스타일링을 더 자유롭게 적용할 수 있습니다.

  <button><img src="icon.png" alt="아이콘">버튼 클릭</button>
  

• 예시:

4. 폼과의 상호작용

• <input type="button">:
  • input 버튼은 폼 전송과는 관계가 없습니다. 즉, type="button"은 단지 버튼 역할만 하며, 폼을 제출하거나 리셋하는 기능은 기본적으로 제공하지 않습니다.
• <button>:
  • <button>은 기본적으로 **type="submit"**로 동작합니다. 즉, 버튼을 클릭하면 해당 폼이 제출됩니다. type="reset"을 설정하면 폼의 내용을 초기화하는 버튼이 됩니다.
  예시:
• <form> <button type="submit">폼 제출</button> </form>

5. 접근성 및 스타일링

• <button>:
  • <button> 요소는 접근성 측면에서 더 유리합니다. 스크린 리더 등에서 버튼의 콘텐츠를 더 잘 인식할 수 있습니다.
  • 또한, <button>은 내부에 다양한 HTML 콘텐츠를 넣을 수 있어 스타일링이나 구성이 더 유연합니다.
• <input type="button">:
  • <input> 버튼은 스타일링이 제한적이고, 텍스트만을 포함할 수 있기 때문에 제한된 사용성에 비해 <button>이 더 유리할 수 있습니다.

6. 기본적인 차이점 요약:

특성 <input type="button"> <button>

사용 방식	value 속성으로 텍스트 설정	텍스트 및 HTML 콘텐츠 삽입 가능
기본 타입	type="button"(기본값)	type="submit" 기본값, 다른 값 가능
폼 전송 여부	폼 전송 없음	type="submit"일 경우 폼 전송 기능 있음
내부 콘텐츠	텍스트만 가능 (단, value 속성 사용)	텍스트, 이미지, HTML 콘텐츠 삽입 가능
접근성 및 스타일링	제한적	더 많은 유연성 제공, 접근성 향상

결론:

• **<input type="button">**은 간단한 버튼을 만들고자 할 때 사용하며, 텍스트만 표시할 수 있습니다.
• **<button>**은 더 유연하고 다양한 HTML 콘텐츠를 삽입할 수 있으며, 기본적으로 폼 제출용 버튼으로 사용되며 접근성과 스타일링에서 더 많은 유연성을 제공합니다.

<button>은 더 다양한 기능을 제공하므로, 복잡한 폼이나 다양한 콘텐츠가 포함된 버튼이 필요할 때 선호되는 경우가 많습니다. 반면, <input type="button">은 간단한 버튼을 만들 때 유용합니다.