input type="submit" vs button 비교

프로젝트를 진행하면서 <input type="submit">로 폼의 내용을 전달하는 경우를 많이 접하게 되었습니다. 습관적으로 button 요소로 이를 대체하다가 문득 둘의 차이점이 궁금해서 검색을 해보았고 이와 관련된 내용을 정리합니다.

button은 기능적으로 차이가 없을까?

폼 전송 기능을 하는 <input type="submit"> 과 <button> 은 기능적으로 동일하다. 기본적으로 button 요소는 type 속성을 명시하지 않으면 submit 기능을 수행한다. 즉 폼에서 이를 대체하기 위한 목적으로는 안성맞춤이다.

button 속성값

브라우저별 기본 button 요소의 기능이 상이할 수 있으니 되도록 이를 명시하도록 하자.

• type="submit" : 폼의 전송 기능을 담당한다.
• type="reset" : 폼 작성 내용을 초기화하는데 사용한다.
• type="button" : 흔히 자바스크립트를 이용한 기능 구현에 많이 사용한다.

button 요소의 장점은?

무엇보다도 디자인적인 관점에서 input 요소와 달리 매우 자유롭다. 일반적인 요소들을 디자인하는 모든 것들을 적용할 수 있어 배경으로 이미지를 넣을 수도 있고, <button> 과 </button> 사이에 다른 태그들을 삽입할 수도 있다. 최근에는 각종 라이브러리에서 button 요소들에 대한 꾸밈을 적용한 CSS를 배포하기에 간단히 클래스명을 이용해 이를 적용할 수도 있다.

button 디자인시 참고사항

크로스브라우징을 위해 버튼의 기본 값을 사용하지 말고, 이를 CSS로 디자인하여 사용한다. 기본적으로 IE8 이상과 기타 모던 브라우저들에서 잘 작동하기 위한 범용적으로 사용될 만한 속성들에 대하여 초기화를 진행한다.

• display: inline-block - 부모요소의 text-align 속성으로 버튼의 정렬 위치를 정할 수 있게 사용한다.
• font-family: inherit - 버튼 요소에 상속되지 않는 글꼴을 강제상속 
• vertical-align: middle - 다른 요소를 만날때 수직 가운데 정렬을 대비
• cursor: pointer - 커서에 손가락 표시
• white-space: nowrap - 버튼의 크기가 작을때 줄바꿈 되지 않는다.
• text-decoration: none - 글자의 밑줄 제거
• background: transparent - 기본 배경색을 투명화
• border: none - 테두리 속성을 초기화한다.
• outline: 0 - 포커스시 생성되는 외곽선 제거

a 요소를 대체하는 것은 어떨까?

폼을 제외한 곳에서 <a> 요소는 앵커(anchor)로써, 문서 간의 연결, URI 참조가 주된 목적이고, <button> 요소는 클릭함으로써 이벤트를 발생시키는게 주된 목적이다. 목적에 맞게 기본 링크들은 a 요소로 마크업하고, 기능을 구현하는 것은 (ex. 팝업창을 띄우거나 어떤 요소를 숨기거나 보이게 하거나 등등) button 요소를 사용하는 것이 시멘틱한 마크업의 지름길이다.

참고문헌 및 관련링크.

1. button 요소 사용 이유 및 방법
2. button의 브라우저별 랜더링 비교, 사용방법, 문제점, 해결방법