button 태그 중 type 속성에 대해 알아봅시다.

type 속성은?

버튼의 행동 방식

type 속성으로 submit, reset, button을 부여할 수 있습니다.
다음과 같이 사용될 수 있습니다.

<button type="reset">Click</button>

속성값에 대해 하나씩 알아봅시다.

> submit

말 그대로 SUBMIT, 제출됩니다.
sumbit 타입의 버튼이 눌리면 서버로 양식 데이터를 제출합니다.

버튼의 타입을 지정하지 않은 경우 submit이 기본값으로 정해집니다.

> reset

말 그대로 RESET, 초기화됩니다.
reset 타입의 버튼이 눌리면 모든 컨트롤이 초깃 상태로 되돌려집니다.

<input type="reset"> 과 같은 역할을 합니다.

> button

버튼 타입을 button으로 지정한다면 클릭했을 때 아무 일도 하지 않습니다.
기본 행동이 정해져 있지 않는 이 버튼을 어디에 사용할까요?
이 버튼을 이용해서 클라이언트측 스크립트와 연결할 수 있습니다.

사용하기

    <form class="login-form" id="login-form">
      <p>Nickname or Email</p>
      <input type="text" placeholder="Enter the nickname or email">
      <p>Password</p>
      <input type="password" placeholder="Enter the password">
      <button type="submit" onclick="login()">Login</button>
    </form>