button 태그가 하는 일은 무엇일까?
"어느 날 이런 일을 겪었다. form 태그 안에 form data와 관련 없는 버튼을 만든 후 그 버튼을 눌렀더니 form이 전송되었다. 응? button을 눌렀는데 왜 form이 "submit" 되지?"
위 상황은 button 태그의 type속성의 default값이 submit이라는 사실을 몰랐을 때 할 수 있는 실수입니다.
사실 button태그의 type속성값들은 input 태그의 type속성 값들과 겹칩니다. button 태그의 type속성 값인 submit, reset, button 은 input 태그의 type속성으로도 사용할 수 있습니다. 그러면 더 다양한 type을 제공하는 input만 사용하면 되지, button은 뭐하러 있느냐? 그 이유에 대해서는 button태그의 type값들을 살펴본 다음에 적어보겠습니다.
button 태그의 type 속성
button 태그의 type속성값은 submit, reset, button 이 있습니다.
submit은 폼을 제출하는 이벤트를 발생시킵니다.
reset은 폼안에 작성된 내용을 초기화시킵니다.
button은 그 자체로는 아무런 이벤트가 없고, click이벤트와 연결시켜서 자바스크립트를 활용하는 방법을 많이 사용합니다.
<button type='button'>클릭</button>var btn = document.querySelector('button');
btn.addEventListener('click', function () {
alert(':P');
})
button 태그의 type값들을 살펴보니 사실은 button은 form에서 활용하라고 만든 태그라는 것을 짐작할 수 있습니다.
button vs input
둘 중에 무엇을 사용해야 할까요?
button 태그와 input 태그의 가장 큰 차이점은 button은 스스로 닫지 않는 태그이고 input은 스스로 닫는 태그라는 것입니다.
따라서 button은 하위 태그들을 추가할 수 있습니다. input은 그럴 수가 없죠.
가령 폼의 제출 버튼에 이미지를 삽입하고 싶다고 하면..
button태그를 사용하는 경우 button의 자식으로 img태그를 넣어주면 간편하게 해결이 됩니다.
하지만 input 태그를 사용한다면 img태그를 사용할 수 없고, css의 background-image를 사용해야겠죠?
그게 뭐 불편하냐 라고 생각하실 수도 있지만 불편함의 문제가 아니라 이미지는 img태그를 사용하는 것이 검색엔진 최적화등에 도움이 된다는 사실이 있습니다.
* input 태그와 button 태그에 이미지 삽입 방법 차이
<input type="button" />
<button type="button">
<img src="http://res.publicdomainfiles.com/pdf_view/89/13942613416804.png" alt="arrow">
</button>
<!-- css -->
input {
width: 200px; height: 200px;
background-image: url(http://res.publicdomainfiles.com/pdf_view/89/13942613416804.png);
background-size: 100% 100%;
}
button {
width: 200px; height: 200px;
}
img {
width: 100%; height: 100%;
}
* 결과
그리고 button에 하위 요소를 추가할 수 있다는 장점은 디자인 측면에서도 자유도가 더 높아진다는 것을 의미합니다.
다음 예제를 볼까요?
<button>이것을 <span>클릭</span> 해보세요.</button>
<!-- css -->
span {
color: red;
}
* 결과
button 태그 안에 있는 텍스트 중에 클릭이라는 글자만 빨간색으로 디자인했습니다. span태그라는 하위 요소가 있기 때문에 이것을 구별해서 디자인을 할 수 있는 것이죠. input 태그의 value값도 css로 디자인할 수 있지만 이런 식으로 value값인 텍스트를 분리하여 디자인할 수 있는 방법은 없습니다.
최근댓글