[HTML] form 태그에서 button 태그 사용시 submit 과 함께 새로고침 되는것 막는 방법

HTML&CSS 2019. 11. 28. 22:42

form 태그에서 button 태그 사용시 submit 과 함께 새로고침 되는것 막는 방법

아래 코드를 보면 <form> 태그가 있고 form 안에 <button>이 있습니다. 그리고 이 버튼에는 onclick 이벤트를 처리하는 핸들러 함수로printHello()가 지정되어 있어 input창에 값을 입력하고 버튼을 클릭하면 hello! xx가 출력될것을 의도하였습니다.

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 
 
<script type="text/javaScript" language="javascript"   defer="defer">
function printHello(){
     console.log("hello!" + document.greeting.name.value);
}
</script>
 
 
<form name="greeting">
    이름 : <input type="text" name="name"><br>
    <button onclick="printHello();">버튼</button>
</form>
</body>
</html>
Colored by Color Scripter

cs

그러나 버튼을 누르면 입력한 이름이 콘솔에 출력되는것아 아닌 form의 내용이 submit(전송) 이벤트가 발생하면서 새로고침이 되어버립니다.

원인은 단순한데 <form> 태그 안에서의 <button> 태그는 기본적으로 클릭시 submit 이벤트를 실행시키도록 되어있기 때문입니다. 즉 <input type="button">과 같은 동작을 하게됩니다.

해결 방법은 간단한데 button의 type 속성을 button으로 지정해주기만 하면 됩니다.

<form name="greeting">
    이름 : <input type="text" name="name"><br>
 
    <button type="button" onclick="printHello();">버튼</button>
</form>
Colored by Color Scripter

cs