라벨이 button인 게시물 표시

[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 태그