sunmermi's blog

Button[type="submit"]    vs   input[type="submit"]

버튼요소에 대해 생각하게된 상황은 이러하다

새롭게 개편된는 페이지 코드를 작성중이였다.

상황 1

백단개발자

: <form> 안에서 왜 <button> 태그 사용했어요?

나

: 왜요? 사용하면 안되나요? 버튼역할이 submit 이면 되잖아요.

백단개발자

: 넹..

상황 2

아이폰 기기에서 사파리앱으로 사이트 접속후 PC버전을 클릭했을때 모든 input요소들이 웹킷에서 제공하는 기본스타일들이 (둥근 테두리값, 그림자 효과) 적용되어 있다.

그래서

기본 스타일이 적용되고 있는 input(모든타입 전부), textarea 요소를 확인후  

-webkit-appearance: none; 과 border-radius: 0;   값을 적용해 문제를 해결을 했다.

그러나 

모든 input에 적용했더니 PC 크롬브라우져에서 기본 체크박스나 라디오도 스타일을 사용하는 부분도 스타일이 사라지는 문제 발생. 

이것은 나의 잘못!!!  생각없이 한 수정작업이였다.

그래서 

기본스타일이 먹는 곳을 찾아 확인해보니 작업중인 사이트에선 input[type="submit"]에서만 이러한 현상을 보여서 선택자로 잡아서 최종해결.

그리곤 

나는 이슈 댓글로 앞으론 input[type="submit"] 대신 button[type="submit"]을 사용하겠다고 남겼다.

왜? 어차피 같은 역할을 할것이고 위와 같은 이슈가 벌어지지 않기 때문이다. 

( 참고로 위의 이슈에 관해서는 작업중인 사이트에 해당되는 상황이므로 공통적인 이슈가 되진 않는다. )

이 댓글을 보신 

개발팀장님

: input[type="submit"]  대신  button[type="submit"]을 쓰려는 이유는?

나

: button의 기본은 submit이기도 하고 보이는 스타일이 버튼이라서... 

: input으로 사용해야하는 이유가 따로 있나요?

개발팀장님

: button은 범용으로 쓰기엔 좀 문제가 있었다는 기억이 있기도하고 ie문제 어쩌고 하는 얘기도.......

: input과 button의 동작이 좀 달랐던 기억이라 안 쓰는 편입니다.

나

: 음.. 한번 더 확인해볼게요..

개발팀장님

: button을 채택하려는 이유가 명확하게 있는지 물어본 거예요.

: button 말고 input 쓰세요 는 아님

: 혹시 정보 더 있으면 저도 좀..

: 저런 결정사항은 가급적 근거를 제시해주세요. 나중을 위해서, 다른 사람을 위해서....

이러하여 난 구글링을 시작했다...

일단,  submit할때 <input>, <button>의 기능차이는 없다.

문제파악 1.

팀장님 말씀대로 IE에서 이슈가 존재했다. 

• https://www.peterbe.com/plog/button-tag-in-IE  

문제파악 2.

이전에는 IE8까지 문제가 있었으나

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

하단에 참고 내용보면  'This bug has been fixed in IE8.'  이라고 하니 IE8에선 수정된것 같다.

문제파악 3.

그러면 IE7이하 버전은 문제가 되는것으로 보인다. IE7은 너무 하위버전이긴 하지만

• https://www.w3schools.com/tags/tag_button.asp  

여기서 팁노트를 보니 <form>에서 submit할땐 <button>보단 <input type="submit">을 사용하는게 좋다고한다.

하지만 내생각에는 button의 value값을 사용하지 않은 경우라면 <button type="submit"> 사용해도 무리는 없어 보인다.

근데 혹시 모르니 다음부턴 <form>전송할때는 <input type="submit"> 사용하는게 좋을것같다는 판단이 들었다.

최종

1. <form>전송할때는 <input type="submit"> 사용.
2. 그 외에 js로 동작처리를 하거나 단순한 button의 기능을 가진것은 <button>을 사용으로 결론을 내렸다.

왜?

<input>에 비해 <button>의 경우는 이미지를 사용한 버튼 사용할수 있고 다른 태그들을 사용할수 있어서 스타일링이 다양해 질수있기도 하고 

더 시멘틱하다고 생각하기 때문에 <button>사용하는 방향으로 작업하는것이 좋을것같다. 

• http://jsunnylab.tistory.com/38
• http://webdir.tistory.com/421
• http://nuli.navercorp.com/sharing/blog/post/2038