[HTML] 버튼 만들기 button 태그, (input type = "button")

HTML 버튼은 웹 페이지에서 사용자가 클릭할 수 있는 클릭 가능한 요소를 말합니다. 사용자가 버튼을 클릭하면 개발자가 미리 지정해 놓은 특정 작업이 실행됩니다. 

 

 HTML 버튼 만들기 

버튼의 종류(button type)

버튼 타입	설명
button	버튼 형태를 만들며 자체기능은 없습니다. onClick 메서드를 활용하여 특정 액션을 취하는 기능을 넣을 수 있습니다.
submit	폼(form)에서 입력받은 데이터들을 서버로 전송합니다.
reset	폼(form)에서 입력받은 데이터들을 초기화 시킵니다.

 

 버튼을 만드는 두 가지 방법 

HTML에서 버튼을 만들 수 있는 방법은 두 가지가 있는데 <input type="button">처럼 input type을 사용해서 만들 수도 있고 간단히 <button> 태그를 사용해서 삽입할 수도 있습니다.

 

첫 번째 방법 (input type = "button")

• type: 버튼의 유형을 지정합니다. submit, reset, button 중 하나의 값을 가질 수 있습니다.
• value: 버튼의 텍스트 값을 지정합니다.
• disabled: 버튼을 비활성화시킵니다.

See the Pen Untitled by wjdxo513 (@wjdxo513) on CodePen.

 

input type="button"을 사용하면 버튼을 만들 수 있습니다. type을 통해 submit, reset, button 중 3가지 유형을 지정할 수 있고 value를 통해 버튼의 값을 넣습니다. 추가로 disabled 속성을 넣으면 버튼 클릭이 되지 않도록 비활성화 처리할 수 있습니다.

 

두 번째 방법 (<button> 태그 사용)

• type: 버튼의 유형을 지정합니다. submit, reset, button 중 하나의 값을 가질 수 있습니다. (지정하지 않으면 button)
• disabled: 버튼을 비활성화시킵니다.

See the Pen 버튼2 by wjdxo513 (@wjdxo513) on CodePen.

 

<button> 태그를 사용해서 버튼을 만드는 방법입니다. type을 통해 버튼의 유형을 지정할 수 있고 버튼의 텍스트는 <button> 텍스트 </button>와 같은 형식으로 태그 사이에 입력합니다.

 

<button> 태그 방법을 더 추천하는 이유

위 두 가지 방법 중에서 <button> 태그를 사용하는 방법을 더 추천드립니다. 태그명에 직접적으로 button이 들어가기에 시멘틱 웹을 만드는데 조금 더 도움이 된다고 생각하며 웹 접근성 관점에서 보았을 때도 <button> 태그로 만들어야 화면 낭독기에서 이 부분에 버튼이 있다는 것을 알고 정확히 전달할 수 있습니다.

 

최근 웹 접근성에 대한 중요성 대두로 버튼 태그(<button>)의 사용이 권장되고 있습니다. 시각 장애인들이 사용하는 화면 낭독기에서 버튼 태그를 만나면 이 부분에 버튼이 있다는 것을 알고 정확히 전달할 수 있습니다. 또한 탭 인덱스를 통해 버튼의 동작도 가능하죠. 그러므로 웹 화면에서 특정 액션을 취해야 하는 부분이 생긴다면 이 버튼을 적극적으로 활용하시는 것을 권장합니다.   

 

버튼 onclick 메서드

See the Pen 버튼3 by wjdxo513 (@wjdxo513) on CodePen.

 

버튼의 동작은 onclick 메서드를 통해서 지정할 수 있습니다. 위의 예제에서는 버튼을 클릭하면 alert창이 호출되도록 해보았습니다. 보통 자바스크립트에서 버튼의 액션 메서드를 만들고 onclick에 액션 메서드를 걸어주는 식으로 코딩합니다.