HTML 폼을 사용하면 사용자로부터 입력값을 손쉽게 받을 수 있습니다. <form> 태그는 다양한 폼 요소들을 추가하여 사용자 입력을 수집하는 역할을 합니다. 대표적인 폼 요소로는 텍스트 입력창, 라디오 버튼, 제출(Submit) 버튼 등이 있습니다.
<input> 태그는 type 속성을 통해 입력 방식을 지정하며, 텍스트, 라디오 버튼, 체크박스 등 여러 형태로 활용할 수 있습니다.
type="reset"으로 입력 필드 초기화하기
폼에 입력된 모든 내용을 한 번에 지우고 싶다면, <input> 태그의 type 속성 값을 reset으로 설정하면 됩니다. 이렇게 만든 초기화 버튼을 클릭하면 해당 폼 안의 모든 입력 필드가 기본값으로 되돌아갑니다.
버튼에 표시될 문구는 value 속성으로 자유롭게 변경할 수 있습니다. 예를 들어 value="초기화"라고 지정하면 버튼에 '초기화'라는 텍스트가 나타납니다.
예제 코드
아래 코드를 실행하면 학생 이름과 과목을 입력하는 폼이 생성되며, 초기화 버튼을 누르면 모든 입력값이 사라집니다.
<!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>정리
<form>태그는 사용자 입력을 받기 위한 컨테이너 역할을 합니다.<input>태그의 type 속성으로 다양한 입력 방식을 지정할 수 있습니다.- type을 reset으로 설정하면 클릭 시 폼의 모든 입력 필드가 초기화되는 버튼이 만들어집니다.