Forms

.form-group, .input-text, .textarea, .select-box, .checkbox-group, .radio-group

사용자 입력을 받기 위한 폼 컴포넌트 모음입니다.

Text Input

기본 텍스트 입력 필드입니다.

Basic Text Input

form-group으로 감싸고 input-text 클래스를 사용합니다.

<div class="form-group"> <label>이메일 주소</label> <input type="email" class="input-text" placeholder="[email protected]"> </div>

Textarea

여러 줄의 텍스트를 입력받는 필드입니다.

Textarea Field

긴 텍스트 입력에 사용합니다.

<div class="form-group"> <label>메시지</label> <textarea class="textarea" placeholder="메시지를 입력하세요..."></textarea> </div>

Select Box

드롭다운 선택 필드입니다.

Select Dropdown

여러 옵션 중 하나를 선택할 때 사용합니다.

<div class="form-group"> <label>국가 선택</label> <select class="select-box"> <option>국가를 선택하세요</option> <option>대한민국</option> ... </select> </div>

Radio Buttons

단일 선택을 위한 라디오 버튼입니다. 커스텀 스타일이 적용됩니다.

Radio Group

같은 name 속성으로 그룹화하여 단일 선택을 강제합니다. .radio-custom 요소가 커스텀 스타일을 제공합니다.

<label class="radio-group"> <input type="radio" name="plan" checked> <span class="radio-custom"></span> <span class="radio-label">Basic - 무료</span> </label>

Horizontal Radio Group

.radio-list-horizontal 클래스로 가로 정렬합니다.

<div class="radio-list-horizontal"> <label class="radio-group">...</label> <label class="radio-group">...</label> </div>

Disabled State

disabled 속성으로 비활성화 상태를 표시합니다.

<label class="radio-group"> <input type="radio" disabled> <span class="radio-custom"></span> <span class="radio-label">비활성화</span> </label>

Checkbox

다중 선택을 위한 체크박스입니다. 커스텀 스타일이 적용됩니다.

Checkbox Group

여러 옵션을 동시에 선택할 수 있습니다. .checkbox-custom 요소가 커스텀 스타일을 제공합니다.

<label class="checkbox-group"> <input type="checkbox" checked> <span class="checkbox-custom"></span> <span class="checkbox-label">프론트엔드 개발</span> </label>

Horizontal Checkbox Group

.checkbox-list-horizontal 클래스로 가로 정렬합니다.

<div class="checkbox-list-horizontal"> <label class="checkbox-group">...</label> <label class="checkbox-group">...</label> </div>

Disabled State

disabled 속성으로 비활성화 상태를 표시합니다.

<label class="checkbox-group"> <input type="checkbox" disabled> <span class="checkbox-custom"></span> <span class="checkbox-label">비활성화</span> </label>

Complete Form Example

여러 필드를 조합한 완성된 폼 예제입니다.

문의하기