html-examples/doc/html5/60_양식.md

# 양식
```html
<form action="/submit" method="post">
  <fieldset>
    <legend>사용자 정보</legend>
    <label for="name">이름:</label>
    <input id="name" type="text" name="name" required>
    <br>
    <label for="email">이메일:</label>
    <input id="email" type="email" name="email" list="emails">
    <datalist id="emails">
      <option value="user@example.com">
      <option value="test@example.com">
    </datalist>
    <br>
    <label>좋아하는 색상:</label>
    <select name="color">
      <optgroup label="밝은 색">
        <option value="yellow">노랑</option>
      </optgroup>
    </select>
    <br>
    <label for="bio">소개:</label>
    <textarea id="bio" name="bio" rows="3"></textarea>
    <br>
    <meter value="80" max="100">80%</meter> 완료율
    <progress value="50" max="100">50%</progress> 진행률
    <br>
    <button type="submit">제출</button>
  </fieldset>
</form>
```
- 설명: 다양한 폼 요소를 결합한 예시.

## button
| **속성** | **설명** |
|---|----|
| `type` | 버튼 유형을 지정합니다. (예: `button`, `submit`, `reset`) |
| `disabled` | 버튼을 비활성화합니다. (Boolean 속성) |

```html
<button type="button" onclick="alert('클릭됨')">클릭</button>
<button type="submit">제출</button>
```
- 설명: 일반 버튼과 폼 제출 버튼.

## form
| **속성** | **설명** |
|---|----|
| `action` | 폼 데이터를 제출할 URL을 지정합니다. |
| `method` | 제출 방식(`get`, `post`)을 지정합니다. |
| `enctype` | 파일 업로드 시 데이터 인코딩 방식을 지정합니다. (예: `multipart/form-data`) |

```html
<form action="/submit" method="post">
  <input type="text" name="username" required>
  <button type="submit">제출</button>
</form>
```
- 설명: 사용자 입력을 수집하여 서버로 전송.

## fieldset
| **속성** | **설명** |
|---|----|
| `disabled` | 그룹 내 모든 입력 요소를 비활성화합니다. (Boolean 속성) |

## legend
```html
<fieldset>
  <legend>개인 정보</legend>
  <label>이름: <input type="text" name="name"></label>
  <label>나이: <input type="number" name="age"></label>
</fieldset>
```
- 설명: 관련 입력 필드를 그룹화하고 제목 추가.

## input
| **속성** | **설명** |
|---|----|
| `type` | 입력 유형을 지정합니다. (예: `text`, `checkbox`, `file`, `email`) |
| `name` | 폼 제출 시 사용할 이름입니다. |
| `value` | 기본값을 지정합니다. |
| `placeholder` | 입력 필드에 힌트를 표시합니다. |
| `required` | 필수 입력임을 지정합니다. (Boolean 속성) |

> `required`와 `type` 속성으로 입력 검증 가능.

`input` 태그는 다양한 사용자 입력을 받기 위해 사용되며, `type` 속성에 따라 입력 필드의 기능과 모양이 달라집니다.

| **타입** | **설명** |
|---|----|
| `text` | 한 줄의 일반 텍스트 입력을 받습니다. (기본값) |
| `password` | 비밀번호 입력을 받으며, 입력값이 마스킹됩니다. |
| `checkbox` | 체크박스를 제공하여 다중 선택이 가능합니다. |
| `radio` | 라디오 버튼을 제공하여 단일 선택이 가능합니다. |
| `submit` | 폼을 제출하는 버튼을 생성합니다. |
| `reset` | 폼의 모든 입력을 초기화하는 버튼을 생성합니다. |
| `button` | 기본 동작 없는 일반 버튼을 생성합니다. |
| `file` | 파일 업로드를 위한 입력을 받습니다. |
| `hidden` | 사용자에게 보이지 않는 숨겨진 데이터를 전송합니다. |
| `image` | 이미지를 버튼으로 사용하여 폼을 제출합니다. |
| `number` | 숫자 입력을 받으며, 스피너(화살표)가 포함됩니다. |
| `range` | 슬라이더를 통해 숫자 범위를 선택합니다. |
| `date` | 날짜(연, 월, 일)를 선택합니다. |
| `datetime-local` | 날짜와 시간(연, 월, 일, 시, 분)을 선택합니다. |
| `time` | 시간(시, 분)을 선택합니다. |
| `month` | 연도와 월을 선택합니다. |
| `week` | 연도와 주 번호를 선택합니다. |
| `color` | 색상을 선택하는 컬러 피커를 제공합니다. |
| `email` | 이메일 주소를 입력받으며, 유효성 검사를 지원합니다. |
| `tel` | 전화번호를 입력받습니다. (형식은 브라우저마다 다름) |
| `url` | URL을 입력받으며, 유효성 검사를 지원합니다. |
| `search` | 검색어를 입력받으며, 검색 UI(예: X 버튼)를 제공할 수 있습니다. |

> `date`, `time` 등은 오래된 브라우저에서 텍스트 입력으로 대체될 수 있습니다.
> `email`, `url` 등은 HTML5 유효성 검사를 지원하며, `required`와 조합 가능.
> `button`, `image` 등은 스타일링으로 더 활용 가능.

```html
<input type="text" name="username" placeholder="사용자 이름">
```
- 설명: 일반 텍스트 입력 필드.

```html
<input type="password" name="password" placeholder="비밀번호">
```
- 설명: 입력값이 별표(*)로 표시됨.

```html
<input type="checkbox" name="hobby" value="reading"> 독서
<input type="checkbox" name="hobby" value="gaming"> 게임
```
- 설명: 여러 항목 선택 가능.

```html
<input type="radio" name="gender" value="male"> 남성
<input type="radio" name="gender" value="female"> 여성
```
- 설명: 동일 `name` 내에서 하나만 선택 가능.

```html
<input type="submit" value="제출하기">
```
- 설명: 폼 제출 버튼.

```html
<input type="reset" value="초기화">
```
- 설명: 폼 입력값 초기화.

```html
<input type="button" value="클릭" onclick="alert('버튼 클릭됨')">
```
- 설명: 기본 동작 없는 버튼.

```html
<input type="file" name="upload" accept=".jpg,.png">
```
- 설명: 파일 선택 UI, 특정 확장자 제한.

```html
<input type="hidden" name="user_id" value="12345">
```
- 설명: 사용자에게 보이지 않음, 데이터 전송용.

```html
<input type="image" src="submit-btn.png" alt="제출 버튼">
```
- 설명: 이미지를 제출 버튼으로 사용.

```html
<input type="number" name="age" min="0" max="100" value="20">
```
- 설명: 숫자 입력, 범위 설정 가능.

```html
<input type="range" name="volume" min="0" max="100" value="50">
```
- 설명: 슬라이더로 값 선택.

```html
<input type="date" name="birthdate">
```
- 설명: 날짜 선택 캘린더 제공.

```html
<input type="datetime-local" name="meeting">
```
- 설명: 날짜와 시간 선택.

```html
<input type="time" name="alarm">
```
- 설명: 시간 선택.

```html
<input type="month" name="start-month">
```
- 설명: 연도와 월 선택.

```html
<input type="week" name="vacation-week">
```
- 설명: 주 번호 선택.

```html
<input type="color" name="favorite-color" value="#ff0000">
```
- 설명: 색상 선택기 제공.

```html
<input type="email" name="email" placeholder="이메일 입력" required>
```
- 설명: 이메일 형식 검증.

```html
<input type="tel" name="phone" placeholder="전화번호 입력">
```
- 설명: 전화번호 입력 (형식은 브라우저별로 다름).

```html
<input type="url" name="website" placeholder="https://example.com" required>
```
- 설명: URL 형식 검증.

```html
<input type="search" name="query" placeholder="검색어 입력">
```
- 설명: 검색 입력, 브라우저에 따라 X 버튼 포함.



## label
| **속성** | **설명** |
|---|----|
| `for` | 연결할 입력 요소의 `id`를 지정합니다. |

```html
<label for="username">사용자 이름:</label>
<input id="username" type="text" name="username">
```
- 설명: 입력 필드와 연결된 레이블.

> `label`과 `for`는 스크린 리더 사용자에게 중요합니다.

## select
| **속성** | **설명** |
|---|----|
| `name` | 폼 제출 시 사용할 이름입니다. |
| `multiple` | 다중 선택을 허용합니다. (Boolean 속성) |
| `required` | 필수 선택임을 지정합니다. (Boolean 속성) |

```html
<select name="color" multiple>
  <option value="red">빨강</option>
  <option value="blue" selected>파랑</option>
</select>
```
- 설명: 다중 선택 가능한 드롭다운.

## option
| **속성** | **설명** |
|---|----|
| `value` | 폼 제출 시 전송될 값을 지정합니다. |
| `selected` | 기본 선택 상태를 지정합니다. (Boolean 속성) |
| `disabled` | 옵션을 비활성화합니다. (Boolean 속성) |

## optgroup
| **속성** | **설명** |
|---|----|
| `label` | 그룹의 이름을 지정합니다. |
| `disabled` | 그룹 내 모든 옵션을 비활성화합니다. (Boolean 속성) |

```html
<select name="food">
  <optgroup label="과일">
    <option value="apple">사과</option>
    <option value="banana">바나나</option>
  </optgroup>
  <optgroup label="야채">
    <option value="carrot">당근</option>
  </optgroup>
</select>
```
- 설명: 그룹화된 드롭다운 목록.

## datalist
```html
<input list="fruits" placeholder="과일을 입력하세요">
<datalist id="fruits">
  <option value="사과">
  <option value="바나나">
  <option value="오렌지">
</datalist>
```
- 설명: 입력 필드에 자동완성 옵션 제공.

## output
| **속성** | **설명** |
|---|----|
| `for` | 출력과 관련된 입력 요소의 `id`를 지정합니다. |

```html
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="number" id="a" name="a" value="5"> +
  <input type="number" id="b" name="b" value="3"> =
  <output name="result" for="a b">8</output>
</form>
```
- 설명: 입력값의 합계를 실시간 표시.

> `output`, `meter`, `progress`는 JavaScript와 함께 사용하면 효과적입니다.

## meter
| **속성** | **설명** |
|---|----|
| `value` | 현재 값을 지정합니다. |
| `min` | 최소값을 지정합니다. (기본값: 0) |
| `max` | 최대값을 지정합니다. (기본값: 1) |
| `low` | 낮은 범위의 경계를 지정합니다. |
| `high` | 높은 범위의 경계를 지정합니다. |

```html
<meter min="0" max="100" low="30" high="70" value="50">50%</meter>
```
- 설명: 0~100 범위에서 50을 표시.

## progress
| **속성** | **설명** |
|---|----|
| `value` | 현재 진행 값을 지정합니다. |
| `max` | 최대값을 지정합니다. (기본값: 1) |

```html
<progress value="75" max="100">75%</progress>
```
- 설명: 75% 진행 상황 표시.

## textarea
| **속성** | **설명** |
|---|----|
| `name` | 폼 제출 시 사용할 이름입니다. |
| `rows` | 표시할 행 수를 지정합니다. |
| `cols` | 표시할 열 수를 지정합니다. |
| `placeholder` | 입력 필드에 힌트를 표시합니다. |
| `required` | 필수 입력임을 지정합니다. (Boolean 속성) |

```html
<textarea name="message" rows="4" cols="50" placeholder="메시지를 입력하세요"></textarea>
```
- 설명: 여러 줄 텍스트 입력.