문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.

====== Bootstrap Form groups & Input group  ======
<WRAP left notice 80%>
  * description : Bootstrap Form groups & Input group
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2023-01-30 Mon
</WRAP>
<WRAP clear></WRAP>
\\
===== Form groups =====
The **''%%.form-group%%''** class is the easiest way to add some structure to forms.\\
It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging.\\
By default it only applies margin-bottom, but it picks up additional styles in .form-inline as needed.\\
Use it with <fieldset>s, <div>s, or nearly any other element.\\

**''%%.form-group%%''** 클래스는 forms에 일부 구조를 추가하는 가장 쉬운 방법입니다.\\
**''%%.form-group%%''** 클래스는 labels, controls, optional help text(선택적 도움말 텍스트) 및 form 유효성 메시지에 대해 적합한 그룹화를 하는 flexible 클래스를 제공합니다.\\
**''%%.form-group%%''** 클래스는 기본으로 %%margin-bottom%%만 적용되지만, 필요에 따라 **''%%.form-inline%%''**에서 추가 스타일을 선택합니다.\\
%%<fieldset>%%, %%<div>%% 또는 거의 모든 다른 요소들과 **''%%.form-group%%''** 클래스를 사용하세요.\\

<code html>
    <form>
        <div class="form-group">
          <label for="formGroupExampleInput">Example label</label>
          <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
        </div>
        <div class="form-group">
          <label for="formGroupExampleInput2">Another label</label>
          <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
        </div>
      </form>
</code>
\\
{{:wiki:bootstrap:bootstrap_note:form-groups.png?600|form-group basic example}}\\
\\
===== Inline forms =====
Use the ''**%%.form-inline%%**'' class to display a series of labels, form controls, and buttons on a single horizontal row.\\
Form controls within inline forms vary slightly from their default states.\\
\\
''**%%.form-inline%%**'' 클래스를 사용하여, 단 하나의 수평선에 일련의 labels, form controls, 그리고 buttons을 표시합니다.\\
인라인 form 내부의 Form controls는 Form controls의 기본 상태와 약간 상이합니다.\\









==== Ref Link ====
[[https://getbootstrap.com/docs/4.6/components/forms/#form-groups|Form groups]]\\
[[https://getbootstrap.com/docs/4.6/components/input-group/|Input group]]\\
[[https://getbootstrap.com/docs/4.6/components/forms/#inline-forms|Inline forms]]\\





{{tag>오션 bootstrap-select}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구