❗폼관련 요소❗

폼 관련 요소는 웹 문서가 서로 상호작용을 할 수 있도록 하는 역할을 담당합니다. 사용자가 자료를 검색하기 위한 검색어 입력 상자나 여러 가지 항목에서 원하는 값을 선택할 수 있도록 제공하는 라디오 버튼 또는 체크 박스, 목록 형태로 펼쳐지는 목록 상자(combo box), 서버로 자료를 전송하기 위한 전송 버튼 등이 이에 해당된다.

---

<form>
폼 요소는 사용자로부터 입력을 받을 수 있는 컨테이너입니다.

html
<form action="/submit" method="POST">
    <!-- 폼 요소들 -->
</form>

• action: 폼 데이터가 전송될 URL
• method: 데이터 전송 방식 (GET 또는 POST)

---

<input>
인풋 요소는 다양한 유형의 데이터를 입력받을 수 있는 요소입니다.

html
<input type="text" name="username" placeholder="사용자 이름">

• type: 입력 타입 (text, password, email 등)
• placeholder: 입력 필드에 나타나는 안내 텍스트

---

<label>
레이블 요소는 입력 요소와 연결되어, 사용자가 입력하는 대상을 명확하게 해줍니다.

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

• for: 연결할 입력 요소의 id 속성

---

<button>
버튼 요소는 사용자가 클릭할 수 있는 버튼을 생성합니다.

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

• type: 버튼의 역할 (submit, reset 등)

---

<select>
셀렉트 요소는 사용자가 선택할 수 있는 드롭다운 목록을 생성합니다.

html
<select name="options">
    <option value="option1">옵션 1</option>
    <option value="option2">옵션 2</option>
</select>

• option: 선택 가능한 항목

---

<option>
옵션 요소는 <select> 내의 개별 선택 항목을 정의합니다.

html
<option value="option1">옵션 1</option>

• value: 해당 옵션이 선택되었을 때 전송되는 값

---

<optgroup>
옵션 그룹 요소는 관련된 옵션을 그룹화합니다.

html
<select>
    <optgroup label="그룹 1">
        <option value="option1">옵션 1</option>
    </optgroup>
    <optgroup label="그룹 2">
        <option value="option2">옵션 2</option>
    </optgroup>
</select>

• label: 그룹의 이름

---

<textarea>
텍스트 에어리어 요소는 다중 행의 텍스트 입력 필드를 제공합니다.

html
<textarea name="comments" rows="4" cols="50" placeholder="코멘트를 입력하세요..."></textarea>

• rows: 텍스트 영역의 행 수
• cols: 열 수

---

<fieldset>
필드셋 요소는 관련된 입력 요소를 그룹화하여 시각적으로 구분합니다.

html
<fieldset>
    <legend>개인 정보</legend>
    <label for="name">이름:</label>
    <input type="text" id="name" name="name">
</fieldset>

• legend: 필드셋의 제목

---

<legend>
레전드 요소는 필드셋의 제목을 정의합니다.

html
<legend>사용자 정보</legend>

---

<datalist>
데이터 리스트 요소는 사용자에게 제안할 수 있는 입력 옵션 목록을 정의합니다.

html
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
</datalist>

• list: 연결할 데이터 리스트의 ID

---

<progress>
프로그래스 요소는 작업의 진행 상황을 나타냅니다.

html
<progress value="70" max="100">70%</progress>

• value: 현재 진행 상황
• max: 최대 값

---

<output>
아웃풋 요소는 계산된 결과를 사용자에게 표시합니다.

html
<form>
    <input type="number" id="a" value="5">
    <input type="number" id="b" value="10">
    <output id="result">15</output>
</form>

---

<meter>
미터 요소는 특정 범위 내의 측정 값을 나타냅니다.

html
<meter value="0.7" min="0" max="1">70%</meter>

• value: 현재 값
• min 및 max: 최소 및 최대 값