Form Layout | HTML Components

세로

레이블이 입력 위에 오는 기본 레이아웃입니다. form_vertical을 명시하거나 form_field만 나열해도 동일하게 동작합니다.

<form class="form form_vertical">
  <div class="form_field">
    <label class="form_field-label" for="fl-name">이름</label>
    <input type="text" class="input" id="fl-name" placeholder="이름을 입력하세요">
    <p class="form_field-hint">2~20자 이내로 입력해 주세요.</p>
  </div>
  <div class="form_field">
    <label class="form_field-label" for="fl-email">이메일</label>
    <input type="email" class="input" id="fl-email" placeholder="name@example.com">
  </div>
  <div class="form_field">
    <label class="form_field-label" for="fl-role">역할</label>
    <select class="input" id="fl-role">
      <option value="">선택하세요</option>
      <option>관리자</option>
      <option>편집자</option>
      <option>뷰어</option>
    </select>
  </div>
</form>

가로

레이블이 왼쪽, 입력이 오른쪽에 배치됩니다. 레이블은 기본적으로 오른쪽 정렬됩니다.

<form class="form form_horizontal">
  <div class="form_field">
    <label class="form_field-label" for="fl-h-name">이름</label>
    <input type="text" class="input" id="fl-h-name" placeholder="이름">
  </div>
  <div class="form_field">
    <label class="form_field-label" for="fl-h-email">이메일</label>
    <input type="email" class="input" id="fl-h-email" placeholder="name@example.com">
    <p class="form_field-hint">업무용 이메일을 입력해 주세요.</p>
  </div>
  <div class="form_field">
    <label class="form_field-label" for="fl-h-bio">소개</label>
    <textarea class="textarea" id="fl-h-bio" rows="3" placeholder="간단한 자기소개">
    </textarea>
  </div>
</form>

가로 — 레이블 정렬·너비

form_label-align-start로 레이블을 왼쪽 정렬하고, form_label-width-sm · form_label-width-lg로 레이블 너비를 조절합니다.

레이블 왼쪽 정렬 · sm

form_label-align-start · form_label-width-sm

레이블 너비 lg

form_label-width-lg — 라벨 열이 넓어져 입력 시작 위치가 달라집니다.

<!-- 도시 -->

<div class="demo_preview-block">
  <h3 class="typo_overline">레이블 왼쪽 정렬 · sm</h3>
  <p class="typo_caption">form_label-align-start · form_label-width-sm</p>
  <form class="form form_horizontal form_label-align-start form_label-width-sm">
    <div class="form_field">
      <label class="form_field-label" for="fl-hs-city">도시</label>
      <input type="text" class="input" id="fl-hs-city" placeholder="서울">
    </div>
    <div class="form_field">
      <label class="form_field-label" for="fl-hs-zip">우편번호</label>
      <input type="text" class="input" id="fl-hs-zip" placeholder="00000">
    </div>
  </form>
</div>

<!-- 회사명 -->

<div class="demo_preview-block">
  <h3 class="typo_overline">레이블 너비 lg</h3>
  <p class="typo_caption">form_label-width-lg — 라벨 열이 넓어져 입력 시작 위치가 달라집니다.</p>
  <form class="form form_horizontal form_label-width-lg">
    <div class="form_field">
      <label class="form_field-label" for="fl-hl-company">회사명</label>
      <input type="text" class="input" id="fl-hl-company" placeholder="UXKM">
    </div>
    <div class="form_field">
      <label class="form_field-label" for="fl-hl-dept">부서</label>
      <input type="text" class="input" id="fl-hl-dept" placeholder="디자인팀">
    </div>
  </form>
</div>

인라인

검색·필터처럼 필드를 한 줄에 나란히 배치합니다. 공간이 부족하면 자동으로 줄바꿈됩니다.

<form class="form form_inline">
  <div class="form_field">
    <label class="form_field-label" for="fl-i-keyword">키워드</label>
    <input type="search" class="input" id="fl-i-keyword" placeholder="검색어">
  </div>
  <div class="form_field">
    <label class="form_field-label" for="fl-i-status">상태</label>
    <select class="input" id="fl-i-status">
      <option>전체</option>
      <option>활성</option>
      <option>비활성</option>
    </select>
  </div>
  <div class="form_field">
    <label class="form_field-label" for="fl-i-date">기간</label>
    <input type="date" class="input" id="fl-i-date">
  </div>
  <div class="form_actions">
    <button type="submit" class="btn btn_filled color_primary">
      <span class="btn_label">검색</span>
    </button>
    <button type="reset" class="btn btn_ghost">
      <span class="btn_label">초기화</span>
    </button>
  </div>
</form>

그리드

Grid 유틸리티와 조합해 2열·3열 폼을 구성합니다. grid_item-span-6이면 12열 기준 한 행에 2개씩 배치됩니다.

<form class="form form_vertical">
  <div class="grid grid_item-span-6">
    <div class="form_field">
      <label class="form_field-label" for="fl-g-first">이름</label>
      <input type="text" class="input" id="fl-g-first" placeholder="이름">
    </div>
    <div class="form_field">
      <label class="form_field-label" for="fl-g-last">성</label>
      <input type="text" class="input" id="fl-g-last" placeholder="성">
    </div>
    <div class="form_field">
      <label class="form_field-label" for="fl-g-phone">전화번호</label>
      <input type="tel" class="input" id="fl-g-phone" placeholder="010-0000-0000">
    </div>
    <div class="form_field">
      <label class="form_field-label" for="fl-g-mobile">휴대폰</label>
      <input type="tel" class="input" id="fl-g-mobile" placeholder="010-0000-0000">
    </div>
    <div class="form_field grid_col-span-12">
      <label class="form_field-label" for="fl-g-address">주소</label>
      <input type="text" class="input" id="fl-g-address" placeholder="도로명 주소">
    </div>
  </div>
</form>

너비

폼 필드는 기본적으로 부모 너비 100%를 사용합니다. form_fit을 사용하면 --input-max-width(320px)로 제한할 수 있습니다.

기본 너비

부모 컨테이너 100%

form_fit

최대 320px로 제한

가로 레이아웃

입력 열이 남은 공간을 채움

<!-- 기본 너비 -->

<div class="demo_preview-block">
  <h3 class="typo_overline">기본 너비</h3>
  <p class="typo_caption">부모 컨테이너 100%</p>
  <form class="form form_vertical">
    <div class="form_field">
      <label class="form_field-label" for="fl-w-default">기본 너비</label>
      <input type="text" class="input" id="fl-w-default" placeholder="부모 100%">
    </div>
  </form>
</div>

<!-- 제한 너비 -->

<div class="demo_preview-block">
  <h3 class="typo_overline">form_fit</h3>
  <p class="typo_caption">최대 320px로 제한</p>
  <form class="form form_vertical form_fit">
    <div class="form_field">
      <label class="form_field-label" for="fl-w-fit">제한 너비</label>
      <input type="text" class="input" id="fl-w-fit" placeholder="form_fit — 최대 320px">
    </div>
  </form>
</div>

<!-- 가로 레이아웃 -->

<div class="demo_preview-block">
  <h3 class="typo_overline">가로 레이아웃</h3>
  <p class="typo_caption">입력 열이 남은 공간을 채움</p>
  <form class="form form_horizontal">
    <div class="form_field">
      <label class="form_field-label" for="fl-w-h-full">가로 레이아웃</label>
      <input type="text" class="input" id="fl-w-h-full" placeholder="입력 열이 남은 공간을 채움">
    </div>
  </form>
</div>

액션 영역

form_actions로 제출·취소 버튼을 그룹화합니다. 가로 레이아웃에서는 레이블 열 너비만큼 들여쓰기됩니다.

세로

가로

<!-- 제목 -->

<div class="demo_preview-block">
  <h3 class="typo_overline">세로</h3>
  <form class="form form_vertical">
    <div class="form_field">
      <label class="form_field-label" for="fl-a-title">제목</label>
      <input type="text" class="input" id="fl-a-title" placeholder="제목">
    </div>
    <div class="form_actions">
      <button type="submit" class="btn btn_filled color_primary">
        <span class="btn_label">저장</span>
      </button>
      <button type="button" class="btn btn_ghost">
        <span class="btn_label">취소</span>
      </button>
    </div>
  </form>
</div>

<!-- 제목 -->

<div class="demo_preview-block">
  <h3 class="typo_overline">가로</h3>
  <form class="form form_horizontal">
    <div class="form_field">
      <label class="form_field-label" for="fl-a2-title">제목</label>
      <input type="text" class="input" id="fl-a2-title" placeholder="제목">
    </div>
    <div class="form_actions">
      <button type="submit" class="btn btn_filled color_primary">
        <span class="btn_label">저장</span>
      </button>
      <button type="button" class="btn btn_ghost">
        <span class="btn_label">취소</span>
      </button>
    </div>
  </form>
</div>

전체 예시

세로 레이아웃 + 그리드 + 액션을 조합한 회원 정보 폼입니다.

<form class="form form_vertical form_compact">
  <div class="grid grid_item-span-6">
    <div class="form_field">
      <label class="form_field-label" for="fl-ex-id">아이디</label>
      <input type="text" class="input" id="fl-ex-id" placeholder="아이디">
      <p class="form_field-hint">영문·숫자 4~16자</p>
    </div>
    <div class="form_field">
      <label class="form_field-label" for="fl-ex-pw">비밀번호</label>
      <input type="password" class="input" id="fl-ex-pw" placeholder="비밀번호">
    </div>
    <div class="form_field">
      <label class="form_field-label" for="fl-ex-name">이름</label>
      <input type="text" class="input" id="fl-ex-name" placeholder="이름">
    </div>
    <div class="form_field">
      <label class="form_field-label" for="fl-ex-email">이메일</label>
      <input type="email" class="input" id="fl-ex-email" placeholder="name@example.com">
    </div>
    <div class="form_field grid_col-span-12">
      <label class="form_field-label" for="fl-ex-memo">메모</label>
      <textarea class="textarea" id="fl-ex-memo" rows="3" placeholder="추가 정보">
      </textarea>
    </div>
  </div>
  <div class="form_actions">
    <button type="submit" class="btn btn_filled color_primary">
      <span class="btn_label">가입하기</span>
    </button>
    <button type="button" class="btn btn_ghost">
      <span class="btn_label">취소</span>
    </button>
  </div>
</form>

클래스 · 속성

Nuxt와 Next 컴포넌트가 렌더하는 OOCSS 클래스와 루트 폼 속성입니다. HTML에서는 의미에 맞는 요소에 필요한 레이아웃 클래스를 직접 조합합니다.

클래스 · 속성	설명
`form`	폼 레이아웃 루트
`form_vertical · form_horizontal · form_inline`	세로·가로·인라인 필드 배치
`form_fit · form_compact`	입력 최대 너비 제한과 좁은 필드 간격
`form_label-align-start`	가로 레이아웃 레이블을 왼쪽 정렬
`form_label-width-sm · form_label-width-lg`	가로 레이아웃 레이블 열 너비
`form_field · form_field-control`	개별 필드 블록과 입력 컨트롤 영역
`form_field-label · form_field-hint · form_field-error`	레이블·도움말·오류 메시지
`form_required`	필수 입력 표시 마크
`form_actions`	제출·초기화·취소 버튼 묶음
`form · div`	제출 기능이 있으면 form, 레이아웃만 필요하면 div 등 의미에 맞는 루트 요소 사용
`action · method · enctype · novalidate`	form 루트에 전달하는 네이티브 제출 속성
`submit · reset`	폼 제출·초기화 이벤트. 필요하면 submit 기본 동작을 제어합니다.
`for · id`	레이블과 입력 컨트롤의 명시적 연결
`required · aria-required="true"`	네이티브 필수 입력과 사용자 정의 컨트롤의 필수 상태
`aria-describedby`	입력 컨트롤과 도움말·오류 메시지 연결

디자인 토큰

토큰	기본값	설명
`--form-label-width`	`7.5rem`	가로 레이아웃 기본 레이블 너비
`--form-label-width-sm · --form-label-width-lg`	`5rem · 10rem`	작은·큰 레이블 열 너비
`--form-field-gap`	`var(--space-lg)`	필드 사이 세로 간격
`--form-inline-field-min-width`	`8rem`	인라인 필드의 최소 너비
`--form-actions-gap`	`var(--space-sm)`	액션 버튼 사이 간격
`--input-max-width`	`320px`	form_fit에서 사용하는 입력 컨트롤 최대 너비