[JS]2021-1104 form태그, event.preventDefault()

nomadcoders VanilaJS #4.1~2.

form 태그를 쓰는 이유

html태그로, 사용자로 부터 정보를 받아올 수 있는 다양한 기능을 제공한다.

로그인, 회원가입 등 사용자가 입력한 정보를 서버로 전달할 필요가 있을 때 사용!

(로그인 기능 만들 때 왜 div 안에 넣지 말고 form에 input을 써야하는지 잘 몰랐었는데, 오늘 알게됨.)

<form id="login-form">
	<input 
    	required 
        maxlength="15" 
        type="text" 
        placeholder="What is your name?"/>
	<button>Log in</button>
</form>

위와 같이 input 태그를 통해 간단한 유효성 검사를 할 수 있다. 

 

input 태그를 사용하지 않고, 이를 자바스크립트로 작성하면 아래와 같다.

function onLoginSubmit() {
    const username = loginInput.value;
    if (username === "") {
        alert("Please write your name!!!");
    } else if (username.length > 15) {
        alert("It's too long;;");
    }
}

loginForm.addEventListener("click",onLoginSubmit)

submit

<form>
  <input type="submit" value="Login"/>
</form>

<form>
  <button>Login</button>
<form>

input type="submit" 과 botton 태그 모두 submit, 데이터 전송을 위한 태그이다.

submit은 버튼 클릭 혹은 엔터키 입력으로 자동 실행되기 때문에, click 이벤트로 감지할 필요가 없다.

 

데이터 전송을 위해 submit 발생 시 함수를 실행시켜줄 이벤트리스너를 등록해야한다.

이벤트리스너는 form태그에 등록해준다.

const loginForm = document.querySelector("#login-form");
loginForm.addEventListener("submit",onLoginSubmit)

 

event.preventDefault();

submit의 특징은, 발생 시 페이지가 자동 새로고침 된다는 것이다.

사용자가 입력한 정보를 받아오기 위해서는 새로고침을 방지할 필요가 있다.

이 때 사용되는 것이 .preventDefault() 이다. (디폴트를...예방하다...)

이벤트가 실행될 때 기본 탑재된 기능을 방지해주는 역할이라고 보면 될 것 같다.

function onLoginSubmit(event) { 
    event.preventDefault();
    console.log(loginInput.value);
}

이벤트 리스너의 첫번째 인수는, 이벤트에 대한 정보를 나타낸다.

function onLoginSubmit(event) {
 console.log(event);
}

event라는 이름을 쓰는 것은 관행이라고 한다. console.log로 event를 찍어보면...

submit 후 새로고침 되어버리기 때문에 이렇게 정보가 스쳐 지나간다. 

function onLoginSubmit(event) {
  event.preventDefault();
  console.log(event);
}

.preventDefault() 를 추가한 뒤 다시 실행시키면,

 

이릏게 잘 볼 수가 있다...

새로고침 멈춰!