<form></form> 내 요소

1. form의 목적

form은 웹 페이지에서 사용자에게 정보를 입력받기 위해 사용됩니다.
예) 회원가입, 로그인, 설문조사, 검색 등

2. 자주 쓰이는 form 요소

1. input
   • 사용자로부터 한 줄의 텍스트, 숫자, 이메일, 비밀번호 등 다양한 데이터를 입력받을 때 사용.
2. select
   • 드롭다운 목록을 만들어 사용자가 미리 정해진 옵션 중 하나를 선택.
3. label
   • 폼 요소(input, select 등)에 어떤 내용(설명, 제목)이 들어가는지.
     label을 클릭하면 연결된 입력 요소로 포커스가 이동해서 편리.

3. label, input, select의 관계

관계:
label 태그는 input이나 select 같은 폼 요소의 설명을 붙여줍니다.

label의 for 속성에 폼 요소의 id 값을 지정하면, label과 폼 요소가 연결돼요.
이렇게 연결하면 label을 클릭할 때 해당 폼 요소에 바로 포커스가 가요.

예시: 실제 웹페이지 "프로필 등록" 폼.
라디오 버튼(성별 선택), 체크박스(관심사 선택), 파일 첨부(프로필 사진), 그리고 콤보박스(국가 선택)가 포함

<form id="profileForm">
  <h2>프로필 등록</h2>
  
  <!-- 라디오 버튼: 성별 선택 -->
  <fieldset>
    <legend>성별 선택</legend>
    <label for="male">
      <input type="radio" id="male" name="gender" value="male">
      남성
    </label>
    <label for="female">
      <input type="radio" id="female" name="gender" value="female">
      여성
    </label>
  </fieldset>
  
  <br>
  
  <!-- 체크박스: 관심사 선택 -->
  <fieldset>
    <legend>관심사 (여러 개 선택 가능)</legend>
    <label for="music">
      <input type="checkbox" id="music" name="interests" value="music">
      음악
    </label>
    <label for="sports">
      <input type="checkbox" id="sports" name="interests" value="sports">
      스포츠
    </label>
    <label for="movies">
      <input type="checkbox" id="movies" name="interests" value="movies">
      영화
    </label>
  </fieldset>
  
  <br>
  
  <!-- 파일 첨부: 프로필 사진 -->
  <div>
    <label for="profilePic">프로필 사진 첨부:</label>
    <input type="file" id="profilePic" name="profilePic">
  </div>
  
  <br>
  
  <!-- 콤보박스: 국가 선택 -->
  <div>
    <label for="countrySelect">국가 선택:</label>
    <select id="countrySelect" name="country">
      <option value="">선택하세요</option>
      <option value="kr">대한민국</option>
      <option value="us">미국</option>
      <option value="jp">일본</option>
    </select>
  </div>
  
  <br>
  
  <button type="submit">제출</button>
</form>

1. 체크박스 (Checkbox):

   • 여러 관심사를 선택할 수 있도록 합니다.
   • 예시에서는 "음악", "스포츠", "영화" 중 원하는 항목을 여러 개 선택할 수 있어요.

2. 라디오 버튼 (Radio):

   • 성별 같이 단 하나만 선택할 수 있는 옵션에 사용해요.
   • 같은 name 값을 가진 입력 중 하나만 선택됩니다.

3. 파일 첨부 (File):

   • 사용자가 컴퓨터에서 파일(예: 프로필 사진)을 선택할 수 있게 해줘요.

4. 콤보박스 (Select):

   • 드롭다운 목록을 제공하여 미리 정해진 옵션(국가) 중 하나를 선택할 수 있도록 합니다.

이렇게 form을 구성하면, 사용자가 정보를 쉽게 입력하고 선택할 수 있으며,
label 덕분에 어떤 정보를 입력해야 하는지 한눈에 알 수 있음!!