• 회원가입
  • 로그인
  • 구글아이디로 로그인

[form] BS5 - Form (BS폼양식)

목차
  1. Fom 수직 정렬 (= 세로 나열)
  2. Fom 수평 정렬 (= 가로 나열)
  3. Fom 크기 제어
  4. 입력창 비활성화 / 읽기전용
  5. 입력창 테두리 제거
  6. 색상 선택 입력창

 

Fom 수직 정렬 (= 세로 나열)

 

.form-control 클래스 갖는 <input>/<textarea> 요소는 수직 정렬 (= 해당 요소가 한 줄 전체 차지) 됨.

 

PS1.  일반 폼요소의 <label> 경우

  • .form-label 클래스 - 하단 마진 (margin-bottom: 0.5rem;)

 

PS2. (체크박스/라디오) 요소의 <label> 경우

  • .form-check 클래스 - 컨테이너에 사용
  • .form-check-label - 라벨 요소에 사용.
  • .form-check-input - (체크박스/라디오) 해당 요소에 사용.

 


[예제1] - <input> 요소 경우

 

<form action="/action_page.php">

    <div class="mb-3 mt-3">

        <label for="email" class="form-label">이메일:</label>

        <input type="email" class="form-control" id="email" placeholder="Email 입력" name="email">

    </div>

    <div class="mb-3">

        <label for="pwd" class="form-label">패스워드:</label>

        <input type="password" class="form-control" id="pwd" placeholder="Password 입력" name="pwd">

    </div>

    <div class="form-check mb-3">

        <label class="form-check-label">

            <input class="form-check-input" type="checkbox" name="auto"> 자동로그인

        </label>

</div>

<button type="submit" class="btn btn-primary">확인</button>

</form>

  


[예제2] - <textarea> 요소 경우

 

<form action="/action_page.php">

    <div class="mb-3 mt-3">

        <label for="self">자기소개:</label>

        <textarea class="form-control" rows="5" id="self" name="self"></textarea>

    </div>

    <button type="submit" class="btn btn-primary">확인</button>

</form>

 

 

Fom 수평 정렬 (= 가로 나열)

 

 


[예제]

 

<form>

    <div class="row">

        <div class="col">

            <input type="text" class="form-control" placeholder="Email 입력" name="email">

        </div>

        <div class="col">

            <input type="password" class="form-control" placeholder="Password 입력" name="pwd">

        </div>

    </div>

</form>


 

Fom 크기 제어

 

  • .form-control-lg 클래스 - 큰 입력창
  • .form-control-sm 클래스 - 작은 입력창

 


[예제]

 

<form>

    <input type="text" class="form-control form-control-lg" placeholder="Large input">

    <input type="text" class="form-control mt-3" placeholder="Normal input">

    <input type="text" class="form-control form-control-sm mt-3" placeholder="Small input">

</form>

 

 

입력창 비활성화 / 읽기전용

 

  • disabled 속성 - 비활성화
  • readonly 속성 - 읽기전용

 


[예제]

 

<form>

    <input type="text" class="form-control" placeholder="보통 input">

    <input type="text" class="form-control mt-3" placeholder="비활성화 input" disabled>

    <input type="text" class="form-control mt-3" placeholder="읽기전용 input" readonly>

</form>

 

 

입력창 테두리 제거

 

.form-control-plaintext 클래스 - 입력창의 테두리는 제거하는 대신, 적당한 margin과 padding은 유지.

 


[예제]

 

<form>

    <input type="text" class="form-control-plaintext" placeholder="테두리 없는 input">

    <input type="text" class="form-control" placeholder="보통 input">

</form>

 

 

색상 선택 입력창

 

.form-control-color 클래스 - type="color" 속성 갖는 INPUT 태그 꾸밈.

 


[예제]

 

<form>

    <label for="hz" class="form-label">색상 선택</label>

    <input type="color" class="form-control form-control-color" id="hz" value="red" title="색상 선택">

</form>

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
basic BS5 - HOME (BS소개)
basic BS5 - Start (BS시작) - BS5다운로드 / BS5CDN / BS5구문
basic BS5 - Container (BS컨테이너) - 박스형 vs 와이드형 (= .container vs. .co…
basic BS5 - Grid (BS그리드)
basic BS5 - Text/Typography (BS글자/BS텍스트)
basic BS5 - Color (BS색깔/BS색상) - 글자색 / 배경색
basic BS5 - Table (BS테이블) - 테이블테두리 / 테이블배경색 / 반응형테이블
basic BS5 - Image (BS이미지) - 이미지모양 / 이미지정렬 / 반응형이미지
basic BS5 - Jumbotron (BS점보트론) - 지원 X
basic BS5 - Alert (BS경고 = BS얼럿 = BS경보)
basic BS5 - Button (BS버튼) - 버튼색깔 + 버튼크기 + 버튼활성화 + 버튼비활성화
basic BS5 - Button Group (BS버튼그룹)
basic BS5 - Badge (BS배지)
basic BS5 - Progress Bar (BS진행바 = BS진도바 = BS프로그레스바)
basic BS5 - Spinner (BS스피너 = BS회전 = BS로더)
basic BS5 - Pagination (BS페이지매기기 = BS페이지번호 = BS페이징 = BS패지네이션) + BS…
basic BS5 - List Group (BS리스트그룹)
basic BS5 - Card (BS카드)
basic BS5 - Dropdown (BS드롭다운/BS드롭업 = BS드랍다운/BS드랍업)
basic BS5 - Collapse (BS접기 = BS컬랩스 = BS토글)
basic BS5 - Nav (네브) - 간단메뉴 + 일반탭 + 알약탭
basic BS5 - Navbar (메뉴바) - 네비게이션 메뉴바 (= 네브바 = 네비바) ※ BS5분기점
basic BS5 - Carousel (BS캐러셀) ※ Slideshow (슬라이드쇼)
basic BS5 - Modal (BS모달)
basic BS5 - Tooltip (BS툴팁 = BS말풍선 허버형)
basic BS5 - Popover (BS팝오버) ★ - 클릭형말풍선
basic BS5 - Toast (BS토스트) - 순간말풍선 (= 팝업상자 = 짧은경고창 = 스낵바)
basic BS5 - Scrollspy (BS스크롤스파이) - 원페이지메뉴링크 (= 내부링크)
basic BS5 - Offcanvas (오프캔버스) - 숨겨진 사이드바 메뉴
basic BS5 - Utilities (BS유틸클래스) ★★★★★
basic BS5 - Flex (BS플렉스박스) ★★★★★
form BS5 - Form (BS폼양식)
form BS5 - Select Menu (실렉트메뉴) / Datalist (데이터리스트)
form BS5 - Checkbox (체크박스) / Radio button (라디오버튼) / Toggle Switch…
form BS5 - Range (레인지: 범위지정)
form BS5 - Input Group (BS입력그룹 = BS인풋그룹)
form BS5 - Form Floating Labels (폼 플로팅 라벨) ※ placeholder (플레이스홀더)
form BS5 - Form Validation (폼유효성검사)
grid BS5 - Grid (BS그리드) - 반응형 레이아웃 ★★★
grid BS5 - Grid Stacked-to-horizontal (BS그리드 수직정렬 → 수평정렬)
grid BS5 - Grid Extra Small (BS그리드 초소형기기) - .col-숫자, .col 클래스
grid BS5 - Grid Small (BS그리드 소형기기) - .col-sm-숫자, .col-sm 클래스
grid BS5 - Grid Medium (BS그리드 중형기기) - .col-md-숫자, .col-md 클래스
grid BS5 - Grid Large (BS그리드 대형기기) - .col-lg-숫자, .col-lg 클래스
grid BS5 - Grid Extra Large (BS그리드 초대형기기) - .col-xl-숫자, .col-xl 클…
grid BS5 - Grid XXL (BS그리드 초초대형기기) - .col-xxl-숫자, .col-xxl 클래스
grid BS5 - Grid Example (BS그리드 예제) ★
theme BS5 - Basic Template (기본템플릿)
typography BS5 - .lead 클래스 - 단락 돋보이게 하기 (= 단락강조 = .lead클래스 = 리드클래스)
typography BS5 - .text-start 클래스 - 텍스트 왼쪽정렬 (= 글자 좌측정렬 = .text-start클래스…
typography BS5 - .text-break 클래스 - 긴 텍스트에 의한 레이아웃 깨짐 방지 (= .text-break클…
typography BS5 - .text-center 클래스 - 텍스트 중앙정렬 (= 글자 가운데정렬 = .text-center…
typography BS5 - .text-decoration-none 클래스 - 텍스트 장식선(=꾸밈선) 제거 (= .text-…
typography BS5 - .text-end 클래스 - 텍스트 오른쪽정렬 (= 글자 우측정렬 = .text-end클래스 = …
typography BS5 - .text-nowrap 클래스 - 텍스트 연속 공백 통합 후 한 줄로 표현 (= .text-now…
typography BS5 - .text-lowercase 클래스 - 텍스트를 소문자로 변환 (= .text-lowercase …
typography BS5 - .text-uppercase 클래스 - 텍스트를 대문자로 변환 (= .text-uppercase …
typography BS5 - .text-capitalize 클래스 - 영단어 각 첫글자만 대문자로 변환 (= .text-cap…
typography BS5 - .initialism 클래스 - <abbr> 태그 안 글씨를 대문자로 변환 후, 살짝 작은 글씨로…
list BS5 - .list-unstyled 클래스 - 리스트 기본스타일과 왼쪽 padding 제거 (= .list…
1/2
목록
찾아주셔서 감사합니다. Since 2012