[HTML] form button 동작 안함 해결(attribute 차이)

HTML에서는 대표적으로 <button>과 <input> 요소를 사용하여 웹 페이지에 버튼을 만들 수 있다. 예를들어 아래처럼 간단한 form 태그를 작성할 수 있다.

 

<form action="./" method="POST">
	<div class="input-group">
    	<input type="text" placeholder="Search for...">
		<button type="button"></button>
    </div>
</form>

 

아래와 같은 검색창에서 돋보기 버튼을 눌러도 form은 전송되지 않는다. "submit" 과 "button" 속성 간 클릭시 작동 방식 다르기 때문이다.

 

 

 

1. <button type="submit">

 이 속성은 클릭시 폼을 제출하는 버튼을 생성된다. 사용자가 type="submit"을 갖는 버튼을 클릭하면, 브라우저는 서버로 폼 데이터를 전송한다.

이 유형의 버튼은 보통 사용자가 입력한 내용을 제출할 수 있도록 폼에서 사용된다.

 

 

2. <button type="button">

 이 속성은 클릭시 폼을 제출하지 않는 버튼이 생성된다. 대신, JavaScript 함수 또는 기타 클라이언트 측 작업을 트리거 하는데 사용한다.

이 유형은 웹 페이지의 상호 작용 요소로 사용되며, 포스트의 댓글 섹션을 확장하고 축소하는 등의 작업에 일반적으로 사용된다.

 

 

각각의 사용 예시를 들자면 블로그 포스트에서 type="submit" 버튼은 독자가 댓글을 게시할 수 있도록하고, type="button" 버튼은 포스트의 댓글 섹션을 확장하는 기능을 트리거하기 위해 사용될 수 있다.