개요

입력, 선택, 체크/라디오 컨트롤을 위한 기본 폼 컴포넌트입니다.

HTML 구조

<!-- 기본 입력 -->
<form class="dewp-form">
  <div class="dewp-form-group">
    <label class="dewp-form-label" for="name">이름</label>
    <input id="name" type="text" class="dewp-form-input" placeholder="이름" />
    <small class="dewp-form-help">실명으로 입력해 주세요.</small>
  </div>

  <!-- 체크박스 -->
  <div class="dewp-form-check dewp-form-checkbox">
    <input type="checkbox" class="dewp-form-check-input" id="agree" />
    <label class="dewp-form-check-label" for="agree">약관 동의</label>
  </div>

  <!-- 라디오(그룹은 name 속성으로 묶음) -->
  <div class="dewp-form-check dewp-form-radio">
    <input type="radio" class="dewp-form-check-input" name="gender" id="g-m" />
    <label class="dewp-form-check-label" for="g-m">남성</label>
  </div>
  <div class="dewp-form-check dewp-form-radio">
    <input type="radio" class="dewp-form-check-input" name="gender" id="g-f" />
    <label class="dewp-form-check-label" for="g-f">여성</label>
  </div>

  <!-- 셀렉트 -->
  <div class="dewp-form-group">
    <label class="dewp-form-label" for="country">국가</label>
    <select id="country" class="dewp-form-select">
      <option>Korea</option>
      <option>USA</option>
    </select>
  </div>

  <!-- 텍스트영역 -->
  <div class="dewp-form-group">
    <label class="dewp-form-label" for="memo">메모</label>
    <textarea id="memo" class="dewp-form-textarea" rows="4" placeholder="내용을 입력하세요"></textarea>
  </div>

  <!-- 체크 그룹 -->
  <div class="dewp-form-check-group">
    <div class="dewp-form-check dewp-form-checkbox">
      <input type="checkbox" class="dewp-form-check-input" id="opt1" />
      <label class="dewp-form-check-label" for="opt1">옵션 1</label>
    </div>
    <div class="dewp-form-check dewp-form-checkbox">
      <input type="checkbox" class="dewp-form-check-input" id="opt2" />
      <label class="dewp-form-check-label" for="opt2">옵션 2</label>
    </div>
  </div>

  <!-- 라디오 그룹 -->
  <div class="dewp-form-check-group">
    <div class="dewp-form-check dewp-form-radio">
      <input type="radio" class="dewp-form-check-input" name="pay" id="pay-card" />
      <label class="dewp-form-check-label" for="pay-card">카드</label>
    </div>
    <div class="dewp-form-check dewp-form-radio">
      <input type="radio" class="dewp-form-check-input" name="pay" id="pay-bank" />
      <label class="dewp-form-check-label" for="pay-bank">계좌이체</label>
    </div>
  </div>

  <!-- 파일 업로드 -->
  <div class="dewp-form-file">
    <input id="file" type="file" class="dewp-form-file-input" />
    <label class="dewp-form-file-label" for="file">
      <span class="dewp-form-file-icon">📁</span> 파일 선택
    </label>
  </div>

  <!-- 입력 그룹 -->
  <div class="dewp-form-input-group">
    <span class="dewp-form-input-group-text">https://</span>
    <input type="text" class="dewp-form-input" placeholder="domain.com" />
    <button type="button" class="dewp-btn dewp-btn-secondary">확인</button>
  </div>

  <!-- 상태 표시 -->
  <div class="dewp-form-group has-error">
    <label class="dewp-form-label" for="email2">이메일</label>
    <input id="email2" type="email" class="dewp-form-input form-input-error" />
    <small class="dewp-form-error">유효한 이메일을 입력해 주세요.</small>
  </div>
</form>
        

워드프레스 호환

관리자 화면에서는 기본 스타일 우선순위를 이기기 위해 일부 속성에 !important가 적용됩니다.