Html button의 type 속성

• button의 type 기본 값은 submit 입니다. 
• form tag 외부에서 사용시 button의 type에 button을 명시해주는 것이 좋습니다.
• form tag 외부에서 button tag를 사용할 때는 기본값이 submit이지만 클릭했을때 아무일도 일어나지 않습니다.

 

 

 

button의 type 속성에는 3개의 값이 들어갈 수 있습니다.

submit, reset, button 

 

submit: 서버로 데이터를 전송합니다. form tag 내부에 button 태그가 존재할 때 유효합니다. default 값입니다!
reset: 모든 값을 초기값으로 되돌려 줍니다.
button: 클릭했을때 아무일도 일어나지 않습니다. 클라이언트의 스크립트와 연결시킬 수 있습니다.

 

이번에 처음 알게 되었습니다. 

button의 type이 어떤 특성이 있고 왜 존재하는지

 

button 태그는 html4 에서 등장했습니다. 

button의 등장 이전에는 <input type="button" /> 을 이용해 button의 동작을 대신하였다고 합니다.

input 태그는 닫힌 태그라 자식을 가질수가 없습니다. 

하지만 button태그는 안에 자식을 가질수 있습니다.

이미지나 svg와 같은것들도 위치시킬 수 있습니다.

<button type="button">
	test
</button>

::after, ::before와 같은 pseudo 속성들을 가질수 있고 이를 이용해 스타일을 커스텀하기 편합니다.

 

이러한 button tag를 사용할 때 type의 명시를 지정해주는 것이 좋습니다.

기본 값이 submit이기 때문입니다!!

button tag를 form tag의 외부에서 사용할 때에는 type이 'submit'이여도 동작하지 않습니다. 

하지만 form tag로 감싸질 수 있는 상황이 발생할 수도 있고 웹 접근성을 고려할 때 기본값이 아닌 type="button"으로 명시를 해주는게 좋다고 생각합니다.

 

 

See the Pen Missing button type by Claire (@clairecodes) on CodePen.

 

 

 

 

 

 

 

 

 

 

출처 : https://nykim.work/96

버튼에 타입을 쓰는 이유 (button type="button")

https://developer.mozilla.org/ko/docs/Web/HTML/Element/button

<button>: 버튼 요소 - HTML: Hypertext Markup Language | MDN