HTML 폼(Form)을 활용하면 사용자로부터 입력값을 손쉽게 받을 수 있습니다. <form> 태그 안에 다양한 폼 요소를 추가하여 사용자 입력을 수집하며, 텍스트 입력창, 라디오 버튼, 제출 버튼 등 여러 종류의 요소를 자유롭게 조합할 수 있습니다.
type="reset" 속성으로 입력 초기화하기
사용자 입력은 <input> 태그의 type 속성을 통해 다양한 형태로 받을 수 있습니다. 그중 HTML 폼에 입력된 모든 값을 한 번에 지우고 싶다면, <input> 태그의 type 속성을 reset으로 지정하면 됩니다.
reset 버튼이 클릭되면 해당 폼 내의 모든 입력 필드가 페이지를 새로 고침하지 않고도 초기 상태로 되돌아갑니다.
예제 코드
아래 코드를 실행하면 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>
정리
HTML 폼의 모든 입력값을 지우는 가장 간단한 방법은 <input type="reset"> 버튼을 사용하는 것입니다. 별도의 JavaScript 코드 없이 브라우저 기본 기능만으로 폼을 초기화할 수 있어, 회원가입 양식이나 검색 폼처럼 입력을 반복적으로 받는 화면에서 유용하게 활용됩니다.