form

• 사용자에게 입력받은 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타냅니다.
• 🙋 꼭 form 태그로 묶어 주어야 하나요?

method 속성

• 양식을 제출할 때 사용할 HTTP 메서드

Post

• 양식 데이터를 요청 본문으로 전송
• 브라우저에 의해 캐시되지 않고, 브라우저 히스토리에도 남지 않음.
• POST 방식의 HTTP 요청에 의한 데이터는 쿼리 문자열과는 별도로 전송
• 데이터의 길이제한이 없고, GET 방식보다 보안성이 높음.
• enctype 속성

  • method 특성이 post인 경우 enctype은 양식 제출 시 데이터의 MIME 유형을 나타냅니다.

    <aside> 💡 MIME 타입

    • 클라이언트에 전송된 문서의 다양성을 알려주기 위한 메커니즘.
    • 브라우저들은 리소스를 내려받았을 때 해야 할 기본 동작이 무엇인지 결정하기 위해 사용

    </aside>

  • application/x-www-form-urlencoded: 기본값

  • multipart/form-data: <input **type="file"**>이 존재하는 경우 사용

    <form 
    	action="<http://localhost:8000/>" 
    	method="post" 
    	**enctype="multipart/form-data"**
    >
      <input type="text" name="myTextField">
      <input type="checkbox" name="myCheckBox">Check</input>
      **<input type="file" name="myFile">**
      <button>Send the file</button>
    </form>
    

Get

<form **method="get"** action="<http://naver.com>">
  <div>
    <label for="user-name">이름</label>
    <input id="user-name" type="text" name="name">
  </div>
  <div>
    <label for="user-age">나이</label>
    <input id="user-age" type="number" name="age">
  </div>
  <button type="submit">버튼</button>
</form>

• https://example.com**?name=홍길동&age=20**
• 양식 데이터를 action URL과 ? 구분자 뒤에 이어 붙여서 전송.
• GET 방식의 HTTP 요청은 브라우저에 의해 캐시되어 저장
• 보통 쿼리 문자열에 포함되어 전송되므로 길이의 제한이 있음(URL 길이제한은 브라우저마다 다름)
• 보안상 취약점이 존재하므로, 중요한 데이터는 POST 방식을 사용하여 요청