HTML 폼 태그

1. <form> 태그

HTML에서 <form> 태그는 사용자 입력을 서버로 전송하는 양식을 정의합니다.

주요 속성:

• method: 데이터를 전송할 HTTP 메서드.

  • GET: URL에 데이터를 포함하여 전송.
  • POST: 데이터를 본문에 포함하여 전송.

• action: 데이터를 전송할 서버의 URL을 지정합니다.

  <form action="/submit" method="POST">

• name: 폼의 이름을 지정하며, 서버에서 폼 데이터를 구분할 때 사용됩니다.

• target: 폼 데이터를 전송한 후 응답을 표시할 위치를 지정합니다.

  • _self: 같은 탭에서 응답을 표시 (기본값).
  • _blank: 새 탭에서 응답을 표시.

• autocomplete: 자동 완성 기능을 활성화하거나 비활성화.

  • on: 자동 완성 기능 활성화.
  • off: 자동 완성 기능 비활성화.

  <form action="/submit" autocomplete="on">

---

2. <fieldset> 태그와 <legend> 태그

• <fieldset>: 여러 입력 요소를 그룹화할 때 사용합니다.

• <legend>: 그룹의 이름을 나타냅니다.

  <fieldset>
    <legend>사용자 정보</legend>
    <label>이름: <input type="text"></label>
  </fieldset>

---

3. <label> 태그

입력 필드에 대한 레이블을 정의합니다.

두 가지 방법:

1. 직접 연결:

   <label>이름: <input type="text"></label>

2. for 속성으로 연결:

   <label for="name">이름:</label>
   <input id="name" type="text">

---

4. <input> 태그

사용자의 데이터를 입력받을 수 있는 가장 기본적인 태그입니다. type 속성에 따라 다양한 입력 형태를 지정할 수 있습니다.

주요 속성:

• type: 입력 필드의 타입.

  • text: 기본 텍스트 입력 필드.
  • password: 비밀번호 입력 필드 (입력 내용 숨김).
  • email: 이메일 입력 필드.
  • number: 숫자 입력 필드.
  • date: 날짜 선택 필드.
  • radio: 라디오 버튼 (여러 옵션 중 하나 선택).
  • checkbox: 체크박스 (여러 옵션 중 다중 선택 가능).
  • submit: 제출 버튼.
  • reset: 폼 초기화 버튼.

• autofocus: 페이지가 로드될 때 자동으로 입력 필드에 포커스를 맞춥니다.

• placeholder: 입력 필드에 미리보기 텍스트를 표시합니다.

  <input type="text" placeholder="이름을 입력하세요" autofocus>

---

5. <textarea> 태그

여러 줄의 텍스트 입력을 받을 수 있는 입력 필드입니다.

주요 속성:

• cols: 텍스트 상자의 가로 길이를 지정.

• rows: 텍스트 상자의 세로 길이를 지정.

  <textarea id="comments" cols="30" rows="10"></textarea>

---

6. <select> 태그와 <option> 태그

드롭다운 목록을 생성하여 여러 옵션 중 하나를 선택할 수 있습니다.

• <select>: 드롭다운 메뉴를 정의합니다.

• <option>: 각각의 선택 옵션을 정의합니다.

  <select>
    <option value="1">옵션 1</option>
    <option value="2">옵션 2</option>
    <option value="3">옵션 3</option>
  </select>

---

7. <button> 태그

버튼을 정의하며, type 속성에 따라 버튼의 역할이 달라집니다.

• <button type="submit">: 폼을 제출합니다. 이는 <input type="submit">과 동일한 역할을 합니다.

  <button type="submit">주문하기</button>

• <button type="reset">: 폼을 초기화합니다. 이는 <input type="reset">과 동일합니다.

  <button type="reset">취소하기</button>

---

요약

• 폼 태그 (<form>): 데이터를 서버로 전송하는 폼을 정의하며, method, action, target 등의 속성을 설정하여 동작 방식을 결정.
• 입력 요소: <input>, <textarea>, <select> 등으로 다양한 방식의 사용자 입력을 받을 수 있습니다.
• 버튼 태그 (<button>): 폼 제출, 초기화 등 다양한 동작을 할 수 있습니다.

이러한 태그들을 사용하여 사용자 입력을 받는 웹 폼을 만들 수 있습니다.