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

Empty elements Closing

area, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr  이러한 요소들을

빈요소라고도 불리며 Empty element === Void element 라고도 부른다.

나는 HTML을 처음 교육받을 때 부터 HTML5를 배워서 그런지

빈요소를 사용할 경우 클로징할때 슬래시( / )를 사용하지 않았다.

하지만 어느날 내가 작성하고 수정한 코드를 검토하던 팀장님께서 

개발팀장님

: 저는 가급적이면 빈요소를 사용할때 슬래시(/)를 사용해서 닫는 주의자입니다. 

빼도 되는거면 그에 대한 설명한 문서 자료를 남겨주면 좋겠습니다.

라는 요청을 받았다.

처음엔 당혹스러웠다.  당연히 이전엔 사용했다고 했지만 HTML5에선 빠져도 된다고 배워왔으니까...  

문제였다. 그렇게 배워 사용은 했지만 '왜?' 에 대해 전혀 생각하지 않았다. 

나는 구글링을 시작했다.....

W3C Reference

2017.10.3

https://www.w3.org/TR/html51/syntax.html#writing-html-documents-elements

2017.10.24

http://w3c.github.io/html/syntax.html#elements-0

SYNTAX

http://w3c.github.io/html-reference/syntax.html#syntax-elements

슬래시(/)로 클로징 하는것은 XHTML에서는 필수사항이지만, 

HTML5 권고안에선 슬래시 기호를 사용해서 클로징하는것은 옵션이다.

그리고 사람들의 의견은 분분했다.

사용해야 한다 의견  :  옵션이니까 이전에 사용하던대로 사용하는것이 편하다. (명시적이기도 하니까..)

하지 않아도 된다 의견  :  굳이 왜 사용하냐? 슬래시(/)가 허용은되지만 의미가 없다. 그러니 사용하지 않아도 된다.

참고

• http://www.colorglare.com/2014/02/03/to-close-or-not-to-close.html
• https://www.codecademy.com/ko/forum_questions/51ffd01c80ff33d5ba007c7c
• http://xahlee.info/js/html5_non-closing_tag.html
• https://stackoverflow.com/questions/4693939/self-closing-tags-void-elements-in-html5
• https://stackoverflow.com/questions/3558119/are-non-void-self-closing-tags-valid-in-html5
• https://teamtreehouse.com/community/closing-image-tag-img-or-img
• https://www.w3schools.com/html/html_elements.asp  : Empty HTML Elements 참고

자... 난 모르겠다. 

일단 사용하고 안하는것에 대해선 기능적 오류적 문제가 없는것으로 보인다... (있다면 알려주세요..)

이런 저런글을 보고 판단이 든것은 

일단, 클로징을 슬래시(/)를 사용하든 안하든 코드를 작성할 때 일관성을 유지하면 될것 같다.