1. HTML에 로그인 <form> 만들기

<!--헤더 영역-->
<header>
  <nav>
    <h1 class="logo">샐러드 정기 구독</h1>
    <div>
      <form action="/login" method="post">
        <input type="text" name="username" placeholder="아이디 입력" required>
        <input type="password" name="password" placeholder="비밀번호 입력" required>
        <button type="submit">로그인</button>
      </form>
    </div>
  </nav>
</header>

 

 

1. <form action="/login" method="post">

 

<form> : 사용자의 입력을 서버로 전송

action="/login" : 입력한 정보를 어디로 저장할지 정하는 경로로 해당 코드는 /login 으로 POST 요청 전송

method="post" :  로그인 정보는 URL에 정보가 노출되어 보안에 취약한 GET방식이 아닌 HTTP 요청 본문에 데이터를 담아 전송하는 POST방식을 사용한다.

 

 

2.  <input type="text" name="username" placeholder="아이디 입력" required>

 

name="username" : 아이디 입력창으로 서버에서 username이라는 이름으로 받는다.

 

 

3. <input type="password" name="password" placeholder="비밀번호 입력" required>

 

: 비밀번호 입력창으로 화면에는 ****으로 가려져 보인다.

 

 

4. <button type="submit">로그인</button>

 

: 로그인 버튼을 클릭하면 form이 서버로 전송된다.