HTML <button> 태그의 type 속성이란?
HTML에서 <button> 요소의 type 속성은 버튼의 유형, 즉 클릭했을 때 어떤 동작을 수행할지를 지정하는 데 사용됩니다. 특히 폼(form) 안에서 버튼의 역할을 결정하는 중요한 속성입니다.
기본 문법
<button type="button | submit | reset">
type 속성의 세 가지 값
- button: 클릭 가능한 일반 버튼입니다. 자체적인 기본 동작은 없으며, 주로 JavaScript와 함께 활용됩니다.
- submit: 제출 버튼입니다. 클릭하면 폼 데이터를 서버로 전송합니다. 참고로 type 속성을 생략하면 이 값이 기본값으로 적용됩니다.
- reset: 초기화 버튼입니다. 클릭하면 폼의 모든 입력 필드를 초기 값으로 되돌립니다.
그럼 이제 HTML에서 <button> 요소의 type 속성을 실제로 구현하는 예제를 살펴보겠습니다.
예제 코드
<!DOCTYPE html> <html> <body> <h2>투자자 정보</h2> <p>펀딩에 관심 있는 투자자 정보를 입력하세요:</p> <form action="" method="get"> ID: <input type="number"><br> 투자자: <input type="text"><br> 투자금액: <input type="number"><br> 이메일: <input type="email"><br> 생년월일: <input type="date"><br><br> <button type="submit" value="Submit">제출</button> <button type="reset" value="Reset">초기화</button> </form> </body> </html>
위 코드를 실행하면 제출(submit) 버튼과 초기화(reset) 버튼이 함께 표시된 폼 화면을 확인할 수 있습니다.
예제 코드 분석
위 예제에서는 다양한 폼 요소와 두 개의 버튼으로 구성된 폼을 만들었습니다.
<form action="" method="get"> ID: <input type="number"><br> 투자자: <input type="text"><br> 투자금액: <input type="number"><br> 이메일: <input type="email"><br> 생년월일: <input type="date"><br><br> <button type="submit" value="Submit">제출</button> <button type="reset" value="Reset">초기화</button> </form>
여기서 핵심은 버튼의 type 속성 설정 부분입니다. 하나는 폼을 제출하는 submit 버튼, 다른 하나는 입력 값을 초기화하는 reset 버튼입니다.
<button type="submit" value="Submit"> 제출 </button> <button type="reset" value="Reset"> 초기화 </button>
정리하면, submit 버튼은 작성된 폼 데이터를 전송하고, reset 버튼은 모든 입력 값을 처음 상태로 되돌립니다. 용도에 맞게 type 속성을 적절히 활용하면 사용자 경험을 크게 향상시킬 수 있습니다.