Chapter 1-16. 양식을 만들고 값 전송하기(HTML)

📌 HTML 입력 양식 만들기: <form> 태그 사용법

<form> 태그는 웹 페이지에서 사용자 입력을 받기 위해 사용되는 중요한 태그입니다. 이를 통해 사용자가 입력한 데이터를 서버로 전송할 수 있습니다.

🔹 <form> 태그 기본 구조

<form action="서버 URL" method="POST">
  <!-- 입력 요소들 -->
</form>

• action 속성: 사용자가 입력한 데이터를 전송할 서버의 URL을 지정합니다.
• method 속성: 데이터를 어떤 방식으로 서버에 전송할지 정의합니다. 주로 GET과 POST 방식이 사용됩니다.

---

🖱️ 1. method 속성: GET vs POST

method 속성은 데이터를 서버로 전송할 때의 방식을 지정합니다.

🔸 GET 방식

• 데이터를 URL에 쿼리 파라미터로 포함하여 서버에 요청을 보냅니다.
• 주로 검색 기능에 사용됩니다.

✅ 예시 (GET 방식)

<form action="/search" method="GET">
  <input type="text" name="query" placeholder="검색어를 입력하세요">
  <button type="submit">검색</button>
</form>

• 사용자가 검색어를 입력하면, query=입력값 형태로 서버로 전송됩니다.

🔸 POST 방식

• 데이터를 URL이 아닌 요청 본문에 포함하여 서버에 보내는 방식입니다.
• 보안이 필요한 데이터(예: 비밀번호, 개인정보)를 처리할 때 사용됩니다.

✅ 예시 (POST 방식)

<form action="/submit" method="POST">
  <input type="text" name="username" placeholder="사용자 이름">
  <input type="password" name="password" placeholder="비밀번호">
  <button type="submit">로그인</button>
</form>

• 비밀번호와 사용자 이름이 서버로 보안이 유지된 상태로 전송됩니다.

---

📝 2. name 속성: 각 입력 항목 구별하기

name 속성은 서버가 각 입력 항목을 구별할 수 있도록 도와줍니다. <input>, <select>, <textarea> 등 모든 입력 요소에는 name 속성을 지정해야 합니다.

✅ 예시

<form action="/submit" method="POST">
  <label for="username">사용자 이름:</label>
  <input type="text" id="username" name="username" placeholder="이름을 입력하세요">
  
  <label for="email">이메일:</label>
  <input type="email" id="email" name="email" placeholder="이메일을 입력하세요">
  
  <button type="submit">제출</button>
</form>

• 여기서 **name="username"**과 **name="email"**은 서버에서 이 값들을 구별하고 처리할 수 있게 해줍니다.

---

🌐 3. 다양한 입력 요소 사용하기

<form> 태그 안에 여러 입력 요소를 포함시킬 수 있습니다. 이 때 사용되는 태그들은 다양한 데이터 유형을 받을 수 있습니다.

• 텍스트 입력: <input type="text">
• 비밀번호 입력: <input type="password">
• 이메일 입력: <input type="email">
• 선택 메뉴: <select>, <option>
• 다중 텍스트 입력: <textarea>
• 파일 업로드: <input type="file">

✅ 예시 (다양한 입력 요소)

<form action="/submit" method="POST">
  <label for="name">이름:</label>
  <input type="text" id="name" name="name">

  <label for="email">이메일:</label>
  <input type="email" id="email" name="email">

  <label for="bio">자기소개:</label>
  <textarea id="bio" name="bio"></textarea>

  <label for="profile">프로필 사진:</label>
  <input type="file" id="profile" name="profile">

  <button type="submit">제출</button>
</form>

---

🚩 4. 결론

• <form> 태그는 웹 페이지에서 사용자의 데이터를 입력받고 서버로 전송하는 중요한 역할을 합니다.
• **method="GET"**은 데이터를 URL에 포함하여 요청할 때 사용하고, **method="POST"**는 데이터를 요청 본문에 포함하여 서버에 보낼 때 사용됩니다.
• name 속성을 사용하여 각 입력 항목을 구별하고, <input>, <textarea>, <select> 등의 태그로 다양한 입력을 받을 수 있습니다.