input 을 form 으로 감싸주면 input 의 유효성 검사를 작동시킬 수 있다.

<!-- html -->
<form id="login-form">
    <input 
      required
      maxlength="15"
      type="text" 
      placeholder="what is your name?" />
    <button>Log In</button>
</form>

문제점!
user 가 Log In 을 눌러 제출하면 웹사이트가 **재시작**된다. form 이 submit 되고 있기 때문!

form 안에서 Enter 를 누르고 input 이 더 존재하지 않으면 자동으로 제출
form 안에 있는 버튼(Log In)을 눌렀을 때 자동으로 제출

form 이 submit 되었을 때 새로고침 되는 것은 default haviour 이기 때문이다.
뭐가 되었든 이 순간에 우린 브라우저가 새로고침이 아닌 **user 정보를 저장**하도록 하고 싶다.

JS 에서는 EVENT 가 발생하면 내가 필요로 할 만한 정보들을 제공한다.
우리가 발생 되길 원하는 함수의 첫번째 argument로 그 정보를 받으면된다.
그리고 JS 에서 넘겨주는 정보는 객체로, 여러가지 정보를 담고 있는데 그 중 하나인
**preventDefault** 로 기본 동작을 막아줄 수 있다.

// app.js
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");

// event 로 정보를 받아온다.
function onLoginSubmit(**event**) {
  event.preventDefault(); // 기본 동작 하는것을 막는다.
  //const username = loginInput.value;
  console.log(event)
}

loginForm.addEventListener("submit", onLoginSubmit)