HTML | <button> 엘리먼트의 type

form 안에 엘리먼트를 추가하는 <button> 태그를 <form> 태그 바깥에서 사용하다가

<form> 태그 안쪽으로 옮기니 <button> 클릭 시 submit 이 되는 현상이 발생했다.

<input type='text'> 도 2개 이상이었으며, <input type='submit'> 도 존재하는 상황.

 

이벤트 버블링의 문제인가 하고 해당 부분을 찾아보다가 <button> 에 대해 검색했더니 두둥.

HTML <button> type Attribute

Definition and Usage

The type attribute specifies the type of button.

Tip: Always specify the type attribute for the <button> element. Different browsers may use different default types for the <button> element.

버튼 타입을 항상 명기하라고.

button type 에 디폴트 값이 있는데 브라우저마다 그 디폴트 값이 다르다!

Syntax

<button type="button|submit|reset">

Attribute Values

Value	Description
button	The button is a clickable button
submit	The button is a submit button (submits form-data)
reset	The button is a reset button (resets the form-data to its initial values)

나는 type 선언을 하지 않았고 디폴트값이 submit 이었던 때문에 위와 같은 현상이 있었던 것.

결론. <button> 은 항상 type 을 명시하자!

출처 : HTML <button> type Attribute - w3schools.com