[HTML] 입력 데이터 초기화를 위한 리셋 버튼(reset) 만들기

지난 번에는 <form> 태그와 <input> 태그로 라디오버튼을 만들고,

라디오버튼에 선택 된 정보가 어떻게 서버로 전달되는지 알아보았습니다.

[HTML] 라디오버튼(radio) 만들기

이번에는 <form> 태그 내에 입력된 데이터를 초기화 시켜주는

리셋 버튼을 생성하는 방법을 알아보도록 하겠습니다.

입력 데이터 초기화를 위한 리셋 버튼(reset) 만들기

계속해서 <input> 태그의 ‘type’ 속성에 들어가는 값들에 대해서 알아보고 있습니다.

text 일반 텍스트를 입력 받을 수 있습니다.

password 패스워드를 입력 받을 수 있도록, 입력 값이 화면에 보여지지 않도록 합니다.

submit <form> 태그 내에 입력된 데이터를 서버로 전달해 줍니다.

button 버튼을 생성해 줍니다.

checkbox 체크박스 형태의 입력을 받을 수 있습니다.

radio 라디오 버튼 형태의 입력을 받을 수 있습니다.

reset <form> 태그 안의 사용자 입력을 초기화 합니다.

리셋 버튼을 만들기 위해서는 이 중 ‘reset’라는 키워드를 사용합니다.

리셋 버튼(reset) 생성하기

See the Pen html example by anna (@hianna) on CodePen.

전에 예제로 만들어 보았던 text, password, radio, checkbox의 예제를 모두

이번 예제에 포함시켰습니다.

그리고, PASSWORD 항목을 제외한, ID, 성별, 좋아하는 과일 항목에는 초기값을 지정해 주었습니다.

마지막으로, ‘type’의 값을 ‘reset’으로 지정하여 리셋 버튼을 생성하였습니다.

ID, PASSWORD, 성별, 좋아하는 과일을 입력하고, 리셋 버튼을 클릭하면

각 항목의 값이 초기값으로 다시 지정되는 것을 볼 수 있습니다.

각 항목의 값이 모두 지워지는 것이 아닙니다. 

초기화됩니다. 

정말 유용한 기능이죠?

이처럼 form의 입력 값을 초기화 하는 리셋 기능은

‘type’의 속성을 ‘reset’으로 지정해주어, 리셋 버튼을 생성하여 쉽게 구현할 수 있습니다.

여기까지, 

<form> 태그 안의 모든 입력 값을 자동으로 초기화할 수 있는

리셋 버튼을 생성하는 방법을 알아보았습니다.