TIL - button의 type을 명시 해주는 이유

rain98·2021년 5월 22일
0

TIL

목록 보기
25/32
post-custom-banner

이번 코드 리뷰를 통해 버튼에 타입이 있다는것을 처음 알았다.
그동안 여태까지 HTML의 button의 타입이 있는지 몰랐다.
그런데도 잘써왔는데 button의 타입을 지정해줘야 하는 이유가 뭘까?

"button에 타입을 지정해주는 이유?"

결론적으로 바로 말하면 그게 디폴트값이 아니다.
button의 type에는 3가지 값을 지정해 줄 수 있는데 각각 submit, reset, button이다.
만약 아무런 값도 지정하지 않았다면 기본값은 submit이 된다.

form 태그 내에서 button을 사용할 때 타입 명시가 없다면 기본적으로 'submit' 처리가 일어난다고 한다.

특정 영역을 form 태그로 감싸게 된다면, 그 안에 있던 타입 명시 없는 버튼은 모두 submit 버튼으로 동작한다고 한다. submit으로 타입이 명시된 버튼을 클릭하면 페이지가 새로고침이 된다.

게다가 IE 10 이하에서서는 form 태그에 속하지 않은 input에서 엔터키를 누르면 submit을 실행하는 이슈가 있었다고 한다.

해결하기 위해선 button에 type=“button”을 명시해주면 되겠다

의미론적으로도 본다면 단순 버튼에는 type="button"을 명시해주는 것이 보기 좋겠다.

또, 마크업 측면에서도 버튼에 type="submit"이 써 있으면 역할 구분이 딱 봐도 명확해지지기 때문에 타입을 붙여주는게 좋다고한다.

버튼의 속성값

속성값설명
button해당 버튼이 클릭할 수 있는 버튼(clickable button)임을 명시함.
submit해당 버튼이 폼 데이터(form data)를 제출하는 제출 버튼(submit button)임을 명시함.
reset해당 버튼이 폼 데이터를 초기값으로 리셋하는 리셋 버튼(reset button)임을 명시함.

요약

▪︎ button의 기본 type은 submit이다

▪︎ form 태그 내에 타입 명시 없는 버튼은 submit으로 동작하므로 클릭 시 새로고침된다.

▪︎ IE10 이하에서 form 밖의 있는 input에서 엔터 입력은 submit 버튼과 연결된다.

▪︎ 명확한 구분을 위해 submit이 아닌 버튼에는 type="button"을 지정해주는 것이 좋다.

profile
헷갈리거나 기억에 남기고 싶은것을 기록합니다.
post-custom-banner

0개의 댓글