HTML button type 차이 정리

HTML button type 차이에서 먼저 볼 부분

button 태그는 type에 따라 동작이 달라집니다. 폼 안에서는 submit, button, reset의 차이를 알고 써야 예상하지 못한 제출을 막을 수 있습니다.

button 태그는 단순히 클릭 가능한 요소처럼 보이지만, form 안에서는 기본 동작이 제출로 이어질 수 있습니다. type을 생략하면 브라우저가 submit처럼 처리하는 경우가 있어 초보자가 의도하지 않은 새로고침을 겪기 쉽습니다.

type="submit"은 입력값을 제출하는 버튼에 사용합니다. 검색, 로그인, 문의 보내기처럼 폼 데이터를 실제로 처리해야 할 때 어울립니다.

type="button"은 아무 기본 동작이 없는 일반 버튼입니다. 모달 열기, 미리보기, 탭 전환처럼 JavaScript가 따로 동작을 붙일 버튼에는 이 값을 명확히 적는 것이 안전합니다.

type="reset"은 폼 안의 입력값을 초기 상태로 되돌립니다. 자주 쓰지는 않지만, 실제로 넣을 때는 사용자가 작성한 값이 사라진다는 점을 분명히 이해하고 배치해야 합니다.

폼 안 버튼 타입 예시

<form>
  <input name="keyword" placeholder="검색어">
  <button type="submit">검색</button>
  <button type="button">미리보기</button>
  <button type="reset">초기화</button>
</form>

이 예제는 그대로 복사해서 확인하는 것보다 한 줄씩 바꿔보는 쪽이 더 도움이 됩니다. 태그 이름, 선택자, 변수 이름, 함수 실행 위치를 조금씩 바꾸면 어떤 부분이 결과에 영향을 주는지 직접 확인할 수 있습니다.

HTML button type 차이 정리 비교 기준

잘못 작성했을 때 나타나는 흐름

HTML 글은 화면에 보이는 모양보다 문서가 어떤 의미로 읽히는지를 먼저 봅니다.

브라우저 개발자 도구의 Elements 탭에서 실제 태그 구조가 예상대로 만들어졌는지 확인하면 오류를 줄일 수 있습니다.

검색엔진과 보조 기술은 태그의 의미를 참고하므로, 단순히 div로 감싸기보다 상황에 맞는 태그를 선택하는 습관이 좋습니다.

브라우저에서 직접 확인하는 순서

먼저 화면에 나타나는 결과를 보고, 그다음 코드에서 방금 수정한 부분을 확인하세요. 결과가 예상과 다르다면 콘솔 오류, 파일 경로, 선택자 이름, 태그 닫힘, 실행 순서 중 하나가 흔한 원인입니다.

초보 단계에서는 정답 코드를 한 번에 외우기보다 실패한 코드와 수정한 코드를 나란히 비교하는 방식이 좋습니다. 이 글의 예제를 기준으로 작은 값을 바꿔보면 다음 글을 읽을 때도 기준이 더 선명해집니다.

실습 후 점검할 항목

• 폼 안 버튼에는 type을 명시하기
• 제출 버튼만 submit으로 두기
• JS용 버튼은 type="button"으로 작성하기
• reset 버튼은 정말 필요한 경우에만 사용하기