AI가 만든 미리보기 버튼이 폼을 제출한다면: button의 type부터 확인하기

폼 안의 “미리보기” 버튼을 눌렀는데 제출이 실행된다면 버튼 글자보다 type 속성을 먼저 확인하세요. 일반적인 form에 연결된 button에서 type을 생략하면 기본 제출 동작이 적용됩니다.

목차

1. 1. “미리보기”라는 글자가 동작을 정하지 않습니다
2. 2. 세 가지 역할을 표로 정하기
3. 3. 같은 연습 폼에서 한 항목씩 확인하기
4. 4. 자주 묻는 질문

1. “미리보기”라는 글자가 동작을 정하지 않습니다

MDN은 button의 type으로 submit, reset, button을 설명합니다. 일반적인 폼 안에서 type이 생략된 버튼은 제출 버튼으로 동작할 수 있습니다. 폼 검증에서 제출이 막히는 경우도 있으므로, 눌렀을 때 화면이 바뀌지 않았다는 사실만으로 type이 올바르다고 판단하지 않습니다.

<form>
  <button>미리보기</button>
  <button type="submit">제출</button>
</form>

위 코드는 첫 버튼의 이름과 기본 역할이 어긋날 수 있는 예시입니다. 실제 개인정보나 운영 중인 신청서로 시험하기 전에 복사한 연습 화면에서 확인하는 편이 좋습니다.

2. 세 가지 역할을 표로 정하기

하려는 일	type의 기본 의미	함께 확인할 것
최종 제출	submit	제출 대상과 검증 조건
일반 클릭 동작	button	미리보기 등을 수행할 별도 처리
폼 값 되돌리기	reset	사용자가 입력한 값에 미치는 영향

<button type="button">미리보기</button>
<button type="submit">제출</button>

type="button"을 쓰면 그 자체의 기본 제출 동작은 없습니다. 그렇다고 미리보기 기능이 자동으로 생기지는 않습니다. 클릭을 처리하는 코드가 필요하고, 그 코드가 다시 제출을 호출하도록 작성돼 있다면 별도로 점검해야 합니다.

3. 같은 연습 폼에서 한 항목씩 확인하기

우선 버튼의 type만 명시한 사본을 만들고 기본 클릭과 제출 처리를 구분해 봅니다. 원래 폼의 action, 입력값, 스크립트를 한꺼번에 바꾸면 어떤 수정이 영향을 줬는지 알기 어렵습니다. CMS가 HTML을 정리하는 경우에는 편집창에 넣은 코드와 저장된 결과도 대조하세요.

확인 기록	적을 내용
버튼 역할	일반 동작인지 최종 제출인지
연결된 폼	상위 form 또는 form 속성
기본 동작	type 생략 / button / submit
추가 처리	클릭·submit 이벤트에서 하는 일
검증 위치	연습 사본과 실제 저장 결과

개인정보를 입력하지 않는 로컬 연습 폼에서 기본 버튼과 type="button"을 비교할 수 있습니다. 실제 제출 요청을 보내는 방식으로 확인할 필요는 없습니다. 이 표는 검수 양식이며 모든 폼 오류의 원인을 type으로 확정하는 진단표는 아닙니다.

4. 자주 묻는 질문

type="button"만 넣으면 미리보기가 되나요?

기본 제출 동작을 구분하는 속성입니다. 미리보기 내용을 만드는 처리는 별도로 있어야 합니다.

폼 밖의 버튼에도 같은 제출이 생기나요?

상위 form뿐 아니라 form 속성으로 연결됐는지도 봐야 합니다. 연결 관계와 추가 스크립트를 함께 확인하세요.

MDN button의 type 공식 설명 읽기

공식 문서 확인일 2026년 10월 15일: MDN — button HTML element.

대표 삽화는 AI로 제작했으며 본문 검수 도표는 직접 구성했습니다.