# 폼 (form)

| 항목 | 경로 |
|------|------|
| 데모 | `form.html` |
| CSS | `css/form.css` |
| JS | `js/common.js` (비번·파일·토글·주소·nice-select) |
| 추가 JS | `js/jquery.nice-select.js` (셀렉트) |
| CDN | 다음 우편번호 `postcode.v2.js` (주소) |
| 이미지 | `eye.svg`, `eye-off.svg`, `calendar.png`, `time.png` |

---

## 공통 규칙

```html
<label for="필드id" class="dn">숨김라벨</label>
<!-- 또는 -->
<label for="필드id" class="form-label">노출라벨</label>
<div class="form-field">
  <input class="form-input" id="필드id" ...>
</div>
```

- 색/크기는 `.form-field`의 CSS 변수 (`--input-*` 등)
- placeholder만으로 라벨 대체 금지

---

## 비밀번호 보기

```html
<div class="form-field">
  <input type="password" id="pw" class="form-input" autocomplete="current-password">
  <button type="button" class="btn-pw-view"
    aria-label="비밀번호 보기" aria-pressed="false" aria-controls="pw">비밀번호 보기</button>
</div>
```

- 필요 파일: `img/eye.svg`, `img/eye-off.svg`
- 동작: `common.js` → `.btn-pw-view` 클릭 시 type 토글 + `.is-on`

---

## Select (nice-select)

```html
<div class="form-field select-box h48">
  <select name="cate" id="cate">
    <option value="">선택</option>
    <option value="1">옵션1</option>
  </select>
</div>
```

| 클래스 | 의미 |
|--------|------|
| `.select-box.h48` | 높이 맞춤 |
| `.wide` | 부모 너비 100% |
| `.scroll` | 옵션 많을 때 스크롤 |
| `select.ignore` | 네이티브 select 유지 |

필요: `jquery.nice-select.js` + `common.js` 초기화

---

## Radio / Checkbox

```html
<fieldset class="radio-box">
  <legend class="dn">구분</legend>
  <div class="items">
    <input type="radio" name="g" id="g1" checked>
    <label for="g1">항목1</label>
  </div>
</fieldset>

<fieldset class="check-box">
  <div class="items">
    <input type="checkbox" name="c" id="c1">
    <label for="c1">동의</label>
  </div>
</fieldset>
```

- 테이블 안: `.radio-box.tbl` / `.check-box.tbl` + `label.blank`

---

## Toggle (switch)

```html
<div class="toggle-box">
  <div class="items">
    <input type="checkbox" id="tg1" role="switch" aria-checked="false">
    <label for="tg1" class="blank"><span class="dn">알림</span></label>
  </div>
</div>
```

- `common.js`가 `aria-checked` 동기화

---

## 파일

```html
<div class="file-box" data-placeholder="선택된 파일 없음">
  <input type="file" id="f1" class="file-input">
  <span class="file_name" aria-live="polite">선택된 파일 없음</span>
  <label for="f1" class="file_btn">파일선택</label>
</div>
```

---

## 주소 (우편번호)

```html
<fieldset class="address-box">
  <legend class="dn">주소</legend>
  <!-- form.html 마크업 그대로 복사 -->
</fieldset>
```

- CDN: `//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js`
- `common.js` → `.btn-postcode` / `openAddressPostcode`

---

## 캘린더

```html
<input type="date" class="form-input form-calendar" id="d1">
```

- 아이콘: `img/calendar.png`, `img/time.png`