[JavaScript] input type='submit' 과 button 의 차이

<input type="submit" />

<button></button>

<input type='submit' /> 과 <button><button/> 태그는 폼의 내용을 전달하는 경우 사용하게 된다.

두개의 태그 모두 폼의 내용을 전달하는데 사용되는데 여러 사람들의 코드를 보다보면 누구는 input 태그를 사용하였고 누구는 button 태그를 사용하여 코드를 작성한것을 확인할 수 있다.

나는 둘의 차이가 궁금하여 찾아보았다.

일단 <input type='submit' /> 과 <button><button/> 태그는 기능적으로 동일하게 동작한다.

하지만 input 태그의 경우 type='submit' 속성을 작성해야지만 submit 동작을 수행하는 반면

button 태그의 경우 type 속성을 따로 명시하지 않을 경우 기본값으로 type='submit' 속성이 적용되어있어 submit 동작을 바로 수행할 수 있다.

button 태그에도 기본 기능 submit 이외에 몇가지 type 속성이 더 존재하는데 

submit 속성을 포함하여 button | submit | reset 이렇게 세가지 type 속성이 존재한다.

button 태그가 input 태그보다 갖고있는 장점이 있다면 일단 input 태그와 달리 디자인적인 부분에서 자유도가 높다.

일반적으로 태그들을 디자인하는데 사용되는 모든 것들을 동일하게 적용할 수 있으며 배경으로 이미지도 넣을 수 있고 <button> 과 <button/> 태그 사이에 다른 태그들을 삽입할 수도 있다.

마지막으로 

button 의 기본적인 디자인은 브라우저별로 조금씩 다르게 보여지기 때문에 사용자들의 동일한 사용경험을 위한다면 CSS로 디자인을 적용하여 사용하는것이 좋다.(크로스 브라우징)

button 태그 관련 몇가지 디자인 속성들

/* 부모요소의 text-align 속성으로 버튼의 정렬 위치를 정할 수 있게 사용한다. */

display: inline-block;

/* 버튼 요소에 상속되지 않는 글꼴을 강제상속 */

font-family: inherit;

/* 다른 요소를 만날때 수직 가운데 정렬을 대비 */

vertical-align: middle;

/* 커서에 손가락 표시 */

cursor: pointer;

/* 버튼의 크기가 작을때 줄바꿈 되지 않는다. */

white-space: nowrap;

/* 글자의 밑줄 제거 */

text-decoration: none;

/* 기본 배경색을 투명화 */

background: transparent;

/* 테두리 속성을 초기화한다. */

border: none;

/* 포커스시 생성되는 외곽선 제거; */

outline: 0;

}