HTML 폼에서 재설정(Reset) 버튼은 사용자가 입력한 모든 필드의 값을 한 번에 초기화하는 역할을 합니다. 예를 들어, 여러 개의 입력란에 값을 입력한 후 처음 상태로 되돌리고 싶을 때 유용하게 사용할 수 있습니다.
재설정 버튼은 <input> 태그의 type 속성 값을 reset으로 지정하여 간단히 추가할 수 있습니다.
재설정 버튼의 주요 특징
- 폼 내 모든 입력 필드(text, checkbox, radio 등)를 기본값으로 되돌립니다.
value속성을 사용하면 버튼에 표시되는 텍스트를 자유롭게 변경할 수 있습니다.- JavaScript 없이 순수 HTML만으로 구현 가능합니다.
예제 코드
아래 코드를 실행하면 학생 이름과 과목을 입력하는 폼이 생성되며, 'reset' 버튼을 클릭하면 입력한 내용이 모두 초기화됩니다.
<!DOCTYPE html> <html> <body> <form> 학생 이름:<br> <input type="text" name="sname"> <br> 학생 과목:<br> <input type="text" name="ssubject"> <br> <input type="reset" value="reset"> </form> </body> </html>
참고 사항
재설정 버튼은 실수로 클릭했을 경우 사용자가 입력한 데이터가 모두 사라질 수 있으므로, 필요한 경우 JavaScript로 확인 절차를 추가하는 것이 좋습니다. 또한 최근에는 UX 관점에서 재설정 버튼 대신 명확한 라벨을 가진 취소 버튼을 함께 제공하는 방식도 널리 활용됩니다.