form 태그

<form> 태그는 HTML에서 사용자 입력을 처리하고, 서버로 데이터를 전송하는 데 사용되는 폼을 정의하는 요소입니다. <form>을 사용하여 텍스트 입력, 버튼, 라디오 버튼, 체크박스 등과 같은 다양한 폼 요소를 포함할 수 있습니다. 이 태그는 웹 페이지에서 사용자와의 상호작용을 가능하게 하고, 서버와의 데이터 통신을 수행합니다.

기본 구조

<form action="서버로_보낼_주소" method="전송_방법">
  <!-- 폼 요소들 -->
  <input type="text" name="username" placeholder="사용자 이름">
  <input type="password" name="password" placeholder="비밀번호">
  <button type="submit">로그인</button>
</form>

주요 속성

1. action 속성

• 설명: 사용자가 폼을 제출했을 때 데이터가 전송될 URL을 지정합니다. 이 URL은 폼의 데이터를 처리할 서버 측의 스크립트(예: PHP, Python, Node.js 등) 또는 다른 웹 페이지의 주소가 될 수 있습니다.
• 기본값: action 속성을 생략하면 폼 데이터는 현재 페이지로 전송됩니다.

<form action="/submit" method="post">
  <!-- 폼 요소들 -->
</form>

2. method 속성

• 설명: 폼 데이터를 서버로 전송하는 방법을 지정합니다. 주로 두 가지 방법이 사용됩니다.
  • GET: 폼 데이터를 URL의 쿼리 문자열로 전송합니다. 보통 데이터가 짧고 중요한 정보(예: 로그인 정보)보다는 검색 결과를 요청할 때 사용됩니다.
  • POST: 폼 데이터를 HTTP 요청 본문에 담아 전송합니다. 대개 중요한 데이터를 전송할 때 사용됩니다.

<form action="/submit" method="post">
  <!-- 폼 요소들 -->
</form>

3. name 속성

• 설명: 폼 요소에 대한 이름을 정의합니다. 폼이 제출될 때 이 이름은 서버로 전송되는 데이터의 키로 사용됩니다.
• 예시: <input type="text" name="username"> 이 경우, 폼이 제출될 때 서버는 username=사용자가_입력한_값을 받습니다.

<form>
  <input type="text" name="email" placeholder="이메일 주소">
</form>

4. target 속성

• 설명: 폼을 제출한 후 데이터를 표시할 창이나 프레임을 지정합니다.
  • _self: 현재 창(기본값)
  • _blank: 새 창(탭)에서 폼 결과 표시
  • _parent: 상위 프레임에서 표시
  • _top: 전체 창에서 표시

<form action="/submit" method="post" target="_blank">
  <!-- 폼 요소들 -->
</form>

5. enctype 속성 (주로 POST 방식 사용 시)

• 설명: 폼 데이터의 인코딩 방식을 정의합니다. 파일 업로드와 같은 특수한 경우에 사용됩니다.
  • application/x-www-form-urlencoded: 기본값, 데이터가 URL 인코딩 방식으로 전송됩니다.
  • multipart/form-data: 파일 업로드 시 사용됩니다.
  • text/plain: 텍스트 데이터만 전송되며, 공백은 +로, 특수 문자는 %로 인코딩됩니다.

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="file">
  <button type="submit">업로드</button>
</form>

폼 요소들

<form> 태그 안에는 다양한 폼 요소들이 포함됩니다. 각 요소는 사용자가 데이터를 입력하거나 선택할 수 있게 도와줍니다.

1. <input>:
   • 여러 가지 type 속성을 통해 다양한 형태의 입력 필드를 만들 수 있습니다.
     • 예: 텍스트, 비밀번호, 체크박스, 라디오 버튼, 파일 등

   <input type="text" name="username" placeholder="사용자 이름">
   <input type="password" name="password" placeholder="비밀번호">
   <input type="checkbox" name="subscribe" value="yes"> 구독
   

2. <textarea>:
   • 여러 줄의 텍스트를 입력할 수 있는 필드를 만듭니다.

   <textarea name="message" rows="4" cols="50"></textarea>
   

3. <select> 및 <option>:
   • 드롭다운 메뉴를 만들 수 있습니다.

   <select name="fruit">
     <option value="apple">사과</option>
     <option value="banana">바나나</option>
   </select>
   

4. <button>:
   • 폼 제출 버튼을 만듭니다. type 속성으로 버튼의 역할을 정의할 수 있습니다.
     • type="submit": 폼을 제출합니다.
     • type="reset": 폼을 초기화합니다.
     • type="button": 일반 버튼으로, 이벤트를 처리할 때 사용합니다.

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

5. <label>:
   • 폼 요소에 레이블을 제공합니다. for 속성을 사용하여 특정 입력 요소와 연결할 수 있습니다.

   <label for="username">사용자 이름</label>
   <input type="text" id="username" name="username">
   

폼 제출 및 처리

폼을 제출하려면 사용자는 제출 버튼을 클릭하거나, 폼 안의 입력 요소에서 엔터 키를 눌러 제출할 수 있습니다. 서버는 폼 데이터가 전송된 URL을 받아 데이터를 처리하게 됩니다.

<form action="/submit" method="post">
  <input type="text" name="username">
  <button type="submit">제출</button>
</form>

서버가 데이터를 처리하면, 응답에 따라 폼의 결과를 새 페이지에 표시하거나, 현재 페이지를 갱신할 수 있습니다.

요약

• <form> 태그는 사용자의 입력을 받아 서버로 전송하는 HTML 요소입니다.
• 주요 속성으로 action (서버 URL), method (전송 방법), name (폼 데이터 키) 등이 있습니다.
• <input>, <textarea>, <button>, <select> 등의 다양한 폼 요소들을 포함하여 사용자로부터 데이터를 받을 수 있습니다.
• GET과 POST는 폼 데이터를 서버로 전송하는 주요 방법이며, 각각의 상황에 맞는 전송 방법을 선택합니다.

폼은 웹 페이지에서 사용자 입력을 받을 때 중요한 역할을 하며, 이 입력을 서버에 전송하여 다양한 처리를 가능하게 합니다.