로그인 엔터키 keypress 이벤트 구현 / 폼 태그

4주차 과제에서 구현하지 못한 로그인 엔터키 keypress 이벤트를 구현했다.

로그인 엔터키 keypress 이벤트 구현

• 폼 태그 안에 button을 넣어서 input창에서 엔터키를 눌러도 동작하게 했다.
• 폼 태그 name 속성과 action 속성을 사용해 이벤트를 줬다.
• 웹 페이지 구현 시 로그인 폼은 필수로 사용할 것이다. 폼 태그를 잘 사용할 수 있게 많이 사용해봐야겠다.

//HTML
	<form class="middle" name="formname" action="./folder">
        <div class="input">
          <p>이메일</p>
          <input id="email" type="email" placeholder="codeit@codeit.com" />
          <span id="emailError"></span>
        </div>
        <div class="input">
          <p>비밀번호</p>
          <input id="password" type="password" placeholder="········" />
          <span id="passwordError"></span>
        </div>
        <button id="loginButton" title="submit">로그인</button>
    </form>

//JS
const loginButton = document.querySelector('#loginButton');
loginButton.addEventListener('click', login);

function loginButtonByEnter(e) {
  if (e.code === 'Enter') {
    formname.submit();
    e.preventDefault();
  }
}
loginButton.addEventListener('keypress', loginButtonByEnter);

폼 태그

Content-type 헤더: application/x-www-form-urlencoded
프로퍼티 이름과 값을 "이름=값" 형식으로 나타내고 각각 프로퍼티를 &기호로 연결한다.(URL의 쿼리 부분 방식과 같다.)

폼 태그 속성

• action: 폼을 전송할 서버의 스크립트 파일을 지정한다.
• name: 폼을 식별하기 위한 이름을 지정한다. / id는 문서 내에서 요소를 식별하는 데 사용하고, name은 서버에 데이터를 전송할 때 사용한다.
• accept-charset: 폼 전송에 사용할 문자 인코딩을 지정한다.
• target: action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열게 지정한다.
• method: 폼을 서버에 전송할 http 메서드를 정한다.
  GET: 폼 데이터를 URL 끝에 붙여서 볼 수 있게 전송한다.
  POST: 폼 데이터를 보이지 않게 전송한다.

출처: 넥스트리소프트홈