Form tag

사용자가 실제로 데이터를 입력하고 화면에서 보게 될 **폼 구성 요소(Form Elements)**들에 대해 알아보겠습니다.

이 태그들은 입력창을 그룹화하거나, 긴 글을 입력받고, 목록에서 선택하는 등 다양한 사용자 경험을 설계하는 데 사용됩니다.

---

1. 구조를 잡는 태그: <fieldset> & <legend>

많은 입력 항목이 있을 때, 이를 논리적으로 묶어주는 역할을 합니다.

• <fieldset>: 관련된 입력 요소들을 하나의 그룹으로 묶고 테두리를 그립니다.
• <legend>: <fieldset>으로 묶은 그룹에 제목을 붙여줍니다.

---

2. 이름표와 긴 글 상자: <label> & <textarea>

• <label>: 입력 요소에 설명(이름표)을 붙입니다. for 속성을 입력창의 id와 연결하면, 라벨을 클릭했을 때 해당 입력창으로 포커스가 이동하여 편리합니다.
• <textarea>: 한 줄 이상의 긴 문장을 입력받을 때 사용합니다. rows와 cols 속성으로 초기 크기를 조절할 수 있습니다.

---

3. 선택 목록: <select> & <option>

여러 가지 선택지 중 하나(또는 여러 개)를 고를 때 사용하는 드롭다운 목록입니다.

• <select>: 선택 목록의 전체 틀을 만듭니다.
• <option>: 목록 안에 들어갈 각각의 선택 항목입니다. value 속성은 서버로 전송될 실제 값을 의미합니다.

---

4. 실행 버튼: <button>

클릭할 수 있는 버튼을 만듭니다. <input type="submit">과 비슷하지만, 태그 안에 아이콘이나 다른 태그를 넣을 수 있어 디자인 자유도가 훨씬 높습니다.

• type="submit": 폼 데이터를 서버로 전송합니다. (기본값)
• type="reset": 폼에 입력된 내용을 모두 초기화합니다.
• type="button": 기본 동작은 없으며 주로 자바스크립트 함수를 실행할 때 씁니다.

---

🖥️ 실전 예제 코드: "상세 문의 폼"

모든 키워드를 활용하여 완성도 있는 문의 폼을 구성해 보겠습니다.

HTML

 

<form action="/submit-inquiry" method="post">
  <fieldset>
    <legend>문의 내용 작성</legend>

    <label for="category">문의 유형:</label>
    <select id="category" name="category">
      <option value="tech">기술 지원</option>
      <option value="billing">결제 관련</option>
      <option value="etc" selected>기타</option>
    </select>
    <br><br>

    <label for="message">상세 내용:</label><br>
    <textarea id="message" name="message" rows="5" cols="30" placeholder="내용을 입력해 주세요."></textarea>
    <br><br>

    <button type="submit">문의하기</button>
    <button type="reset">다시 쓰기</button>
  </fieldset>
</form>

---

📋 키워드별 핵심 요약표

태그	역할	주요 속성
<label>	입력창 설명 및 연결	for (ID와 연결)
<textarea>	여러 줄 텍스트 입력	rows, cols
<button>	클릭 가능한 버튼	type (submit, reset, button)
<select>	드롭다운 목록 시작	name
<option>	목록의 개별 항목	value, selected
<fieldset>	입력 요소 그룹화	(테두리 생성)
<legend>	그룹의 제목 정의	(fieldset 내부 최상단)

---

학습 정리

• **<label>**은 사용자의 클릭 편의성과 웹 접근성을 위해 반드시 사용하는 것이 좋다.
• **<textarea>**는 닫는 태그(</textarea>) 사이에 내용을 적으면 초기값으로 표시된다.
• **<select>**에서 특정 항목을 미리 선택해두고 싶다면 해당 **<option>**에 selected 속성을 추가한다.

---

정교한 사용자 인터페이스를 만드는 폼 태그의 구성 요소들까지 완벽히 마스터하셨습니다!

---