HTML 폼에서 input type="submit"을 사용하면 폼을 제출할 수 있고, 별도의 input type="button"에 클릭 이벤트를 연결하면 입력된 값을 지울 수 있습니다. 아래 예제 코드를 통해 자세히 알아보겠습니다.
예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
</style>
<body>
<label>StudentName:
<input type="text" id="txtName" />
</label>
<br>
<button type="submit">Submit</button>
<button type=" button" value="delete" onclick="deleteSomething()">Delete</button>
<script>
function deleteSomething(secondValue) {
alert("I am going to clear text box data only...");
document.getElementById("txtName").value = "";
}
</script>
</body>
</html>코드 설명
위 코드의 핵심 동작은 다음과 같습니다.
Submit 버튼 — type이 "submit"으로 설정되어 있어 클릭 시 폼 데이터가 제출됩니다.
Delete 버튼 — onclick 속성을 통해 deleteSomething() 함수가 호출되며, 이 함수는 document.getElementById("txtName").value = "" 구문으로 텍스트 상자의 내용을 빈 문자열로 초기화합니다.
프로그램 실행 방법
위 프로그램을 실행하려면 파일 이름을 anyName.html(index.html)로 저장한 후, 해당 파일을 마우스 오른쪽 버튼으로 클릭하세요. 그다음 VS Code 편집기에서 Open with Live Server 옵션을 선택하면 브라우저에서 바로 확인할 수 있습니다.
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
이제 텍스트 상자에 학생 이름 등 임의의 값을 입력해 보겠습니다.
그다음 Delete 버튼을 클릭하면 아래와 같은 알림(alert) 메시지가 표시됩니다.
알림 창에서 OK 버튼을 클릭하면 텍스트 상자의 내용이 모두 지워지고 다음과 같은 결과를 확인할 수 있습니다.
이처럼 submit 타입 버튼으로 폼을 제출하고, 일반 버튼에 JavaScript 함수를 연결하여 사용자 입력을 손쉽게 초기화할 수 있습니다. 실무에서는 confirm() 대화상자나 조건문을 추가해 실수로 입력값이 삭제되는 것을 방지하는 것도 좋은 방법입니다.