html form 태그란?

 

HTML(하이퍼텍스트 마크업 언어)에서 `<form>` 태그는 사용자로부터 정보를 수집하는 데 사용됩니다. 이 태그는 웹 페이지 내에 폼을 정의하며, 다양한 입력 요소들과 함께 사용하여 사용자로부터 데이터를 수집하고 서버로 전송하는 역할을 합니다. 아래는 `<form>` 태그의 주요 속성 및 사용법에 대한 설명입니다.

 

 

### 기본 구조:


<form action="서버로 데이터 전송할 주소" method="전송 방식(GET 또는 POST)">
    <!-- 입력 요소들 및 버튼 등을 포함한 폼 내용 -->
</form>


- `action`: 폼 데이터를 처리할 서버 쪽 스크립트 파일의 주소를 지정합니다. 이 속성은 데이터를 전송할 서버의 URL을 나타냅니다.

- `method`: 데이터를 서버로 전송하는 방식을 지정합니다. 두 가지 주요 방식은 `GET`과 `POST`입니다.
  - `GET`: 데이터를 URL의 일부로 전송하며, 주로 검색 쿼리와 같은 작은 양의 데이터에 사용됩니다.
  - `POST`: 데이터를 HTTP 요청의 본문에 넣어 전송하며, 주로 보안이 필요하거나 큰 양의 데이터를 전송할 때 사용됩니다.

### 주요 입력 요소:

폼 내에 다양한 입력 요소들을 추가할 수 있습니다.

1. **텍스트 입력 상자 (`<input type="text">`):**

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

 

2. **비밀번호 입력 상자 (`<input type="password">`):**

   <label for="password">비밀번호:</label>
   <input type="password" id="password" name="password">


3. **라디오 버튼 (`<input type="radio">`):**

   <input type="radio" id="male" name="gender" value="male">
   <label for="male">남성</label>

   <input type="radio" id="female" name="gender" value="female">
   <label for="female">여성</label>


4. **체크박스 (`<input type="checkbox">`):**

   <input type="checkbox" id="subscribe" name="subscribe" value="yes">
   <label for="subscribe">구독하기</label>


5. **드롭다운 목록 (`<select>` 및 `<option>`):**

   <label for="cars">차량 선택:</label>
   <select id="cars" name="cars">
       <option value="volvo">볼보</option>
       <option value="saab">사브</option>
       <option value="mercedes">메르세데스</option>
       <option value="audi">아우디</option>
   </select>

### 기타 주요 요소:

- **버튼 (`<button>`):**

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


- **폼 내 설명 (`<label>`):**

  <label for="username">사용자명:</label>


- **폼 내 그룹화 (`<fieldset>` 및 `<legend>`):**

  <fieldset>
      <legend>개인 정보</legend>
      <!-- 폼 요소들 -->
  </fieldset>


이러한 입력 요소들을 조합하여 원하는 형태의 폼을 만들 수 있습니다. 폼이 제출되면 지정된 `action` 속성의 서버 스크립트가 실행되고, 입력된 데이터를 처리할 수 있습니다.