HTML의 form

form과 action은 GET과 POST와 직접적으로 관련되어 있음.

---

1.form = 데이터를 전달하는 '구조'

• form은 사용자로부터 입력받은 데이터를 서버로 전달하는 HTML 요소.
• method와 action 속성은 이 데이터를 어떻게, 어디로 보낼지를 정의합니다:
  • method: 데이터를 "어떻게" 보낼지 (GET, POST 등).
  • action: 데이터를 "어디로" 보낼지 (서버 주소).

---

2. action

• action은 데이터를 보낼 목적지를 지정합니다.
  예: action="/submit"
  • 사용자가 데이터를 입력하고 제출하면, /submit URL로 데이터를 보냅니다.

예시: GET과 POST 차이

<form action="/submit" method="GET">
    <input type="text" name="name" placeholder="Enter your name">
    <button type="submit">Send</button>
</form>

• 결과:
  • 사용자가 이름을 "John"으로 입력하고 제출하면 브라우저가 /submit?name=John으로 요청을 보냅니다.

<form action="/submit" method="POST">
    <input type="text" name="name" placeholder="Enter your name">
    <button type="submit">Send</button>
</form>

• 결과:
  • 동일한 데이터를 보내도 URL은 /submit으로 유지되고, 데이터는 요청의 본문(body)에 포함되어 서버로 전송됩니다.

---

3. GET, POST in method of form

• GET

  • 데이터를 URL의 쿼리스트링(예: ?name=John)으로 전달.
  • URL로 표시되기 때문에 데이터를 바로 확인할 수 있음.
  • 예: 검색창, 간단한 조회 작업.

• POST

  • 데이터를 HTTP 요청의 본문(body)에 포함해서 전달.
  • URL에 표시되지 않으므로 비밀번호 같은 민감한 정보를 안전하게 보낼 때 사용.
  • 예: 로그인, 회원가입, 파일 업로드.

---

한 줄 정리

action이 데이터를 전달할 URL을 지정하고, method가 데이터 전달 방식을 결정한다.
form은 action(어디로)과 method(어떻게)로 데이터를 전달하는 도구이며, method에는 주로 GET과 POST가 있다! 🥳

---

요약

• form: 데이터를 사용자로부터 입력받아 전송하는 HTML 구조.
• action: 데이터를 보낼 목적지(URL).
• method: 데이터를 어떻게 보낼지(전송 방식: GET 또는 POST).
  
  

form은 action과 method를 통해 데이터를 특정 서버에 원하는 방식으로 전달할 수 있도록 설계된 구조입니다. 😊

---

참고

여기서 쿼리스트링이란?

쿼리스트링은 URL의 "?" 이후에 나타나는 데이터로, 키-값 쌍(key-value pairs)으로 이루어져 있습니다. 여러 개의 데이터를 포함할 경우 "&"로 구분.

https://example.com/search?query=html&category=web&sort=asc

• ?query=html: 쿼리스트링의 시작. 키는 query, 값은 html.
• &category=web: 다음 데이터. 키는 category, 값은 web.
• &sort=asc: 추가 데이터. 키는 sort, 값은 asc.