Form Tag 구성 요소 (1/2)

 

🟦 Form Tag

사용자가 입력한 값을 서버로 전송하는 양식의 시작점으로, 입력요소를 묶어 제출(전송) 구조를 만든다.

 

🔵 구성 요소 5가지

 

🔸 <form>

폼 전체를 감싸는 컨테이너.

 

🔸 <fieldset>, <legend>

구조적으로 묶고 의미를 부여하는 역할.

• <fieldset>: 관련된 입력 요소들을 하나의 그룹으로 묶는 태그. (기본적으로 박스 모양 생성)
• <legend>: <fieldset>의 제목(캡션) 역할 태그. (<fieldset> 안에서 가장 첫 번째 요소로 사용.)

 

🔸 <label>, <textarea>

입력과 접근성을 담당하는 중요한 요소.

• <label>: 입력 요소(input)의 설명(라벨)을 붙이는 태그.
  • <label for="username">아이디:</label>
    <input type="text" id="username"> : 사용자가 라벨을 클릭하면 해당 입력칸이 자동으로 선택되어 편리.
• <textarea>: 한 줄 이상의 텍스트 입력 필드.
  • row: 세로 줄 수. (열)
  • cols: 가로 글자 수. (칸)
  • placeholder: 안내 문구.
  • maxlenght: 최대 글자 수.

 

🔸 <select>, <option>

여러 항목 중 하나 또는 여러 개를 선택할 경우 사용하는 드롭다운 목록.

• <select>: 선택 목록 전체를 만드는 태그.
  • name: 서버로 전송할 때 사용할 이름.
  • multiple: 여러 항목 선택 가능.
  • size: 한 번에 보이는 옵션 개수.
• <option>: 목록 안에서 각 선택 항목을 정의.
  • value: 실제로 서버에 전송되는 값.
  • selected: 기본 선택 항목.

 

🔸 <button>

클릭 가능한 버튼을 만드는 태그.

👉  <input type="submit">과 비슷하지만, 텍스트뿐 아니라 이미지나 아이콘도 넣을 수 있어 디자인 자유도가 높다.

• type="submit": 폼 데이터 제출. (기본값)
• type="reset": 폼 입력 초기화.
• type="button": 일반 버튼. (JavaScript와 함께 사용)

 

 

📍  POINT 📍 

✔️  <label> 태그는 이용자의 편의성과 웹 접근성을 위해 꼭 사용하는 것이 좋다. ✔️

✔️  <textarea> 태그는 </textarea> 닫는 태그 사이에 내용을 작성하면 폼 로드 시 기본값으로 표시 된다. ✔️ 

✔️  <selsct> 태그에서 특정 항목을 미리 선택해두고 싶다면 <option> selscted 속성을 추가한다. ✔️ 

 

 

📋 키워드별 핵심 요약표 📋

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

 

---

 

⚙️ 실 전 예제 코드 ⚙️

<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>