Loading...

Search Form

  • Default : 3열 / 팝업 : 2열
  • Label 글자수 : 1~9자, 좌측정렬 합니다.
  • 입력값이 긴경우 예외적으로 2 cell, 3 cell을 병합하여 사용합니다.
  • resizing 시 Label 영역은 고정되며, 입력 영역이 가변됩니다.

Default Search Form

Label
Label
Label
          
    <div class="formSearch">
      <div class="formSearch__content">
        <div class="formSearch__item">
          <div class="formSearch__title"><div class="is-requirement">Label</div></div>
          <div class="formSearch__form">
            <div class="formControl">
              <input type="text" placeholder="입력하세요" class="form__input">
            </div>
          </div>
        </div>
        <div class="formSearch__item">
          <div class="formSearch__title">Label</div>
          <div class="formSearch__form">
            <div class="formControl">
              <input type="text" placeholder="입력하세요" class="form__input">
            </div>
          </div>
        </div>
        <div class="formSearch__item">
          <div class="formSearch__title">Label</div>
          <div class="formSearch__form">
            <div class="formControl">
              <input type="text" placeholder="입력하세요" class="form__input">
            </div>
          </div>
        </div>
      </div>
      <div class="formSearch__btn">
        <button class="btn is-search"><span class="icon is-search"></span>조회</button>
      </div>
    </div>
        

Search Form : 2줄

  • height : 104px (1줄 42px씩 증가)
Label
Label
          
    <div class="formSearch">
      <div class="formSearch__content">
        <div class="formSearch__item is-col3">
          <div class="formSearch__title"><div class="is-requirement">Label</div></div>
          <div class="formSearch__form">
            <div class="formControl">
              <input type="text" placeholder="입력하세요" class="form__input flex-grow-1">
            </div>
          </div>
        </div>
        <div class="formSearch__item is-col2">
          <div class="formSearch__title"><div class="is-requirement">Label</div></div>
          <div class="formSearch__form">
            <div class="formControl">
              <input type="text" placeholder="입력하세요" class="form__input flex-grow-1">
            </div>
          </div>
        </div>
      </div>
      <div class="formSearch__btn">
        <button class="btn is-search"><span class="icon is-search"></span>조회</button>
      </div>
    </div>