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에 액션 메서드를 걸어주는 식으로 코딩합니다.
'Web > HTML, CSS' 카테고리의 다른 글
[CSS] 반응형 웹 사이트 레이아웃 만들기 - 가변 그리드(Grid System) (0) | 2023.05.21 |
---|---|
[HTML/CSS] 이미지 버튼(image button) 만들기 (0) | 2023.05.02 |
[HTML] 여러 줄 입력하는 textarea 만들기 (1) | 2023.04.29 |
[HTML] 체크박스 만들기 (input type="checkbox") (0) | 2023.04.28 |