왕진 블로그
부트스트랩 폼 완전 정리
Bootstrap 3 폼 클래스와 입력 요소 변형을 기본 폼, 인라인 폼, 수평 폼 흐름으로 정리합니다.
<form role="form">
<div class="form-group">
<label for="Name">이름</label>
<input type="text" class="form-control" placeholder="이름">
</div>
<div class="form-group">
<label for="emailaddress">이메일</label>
<input type="email" class="form-control" placeholder="이메일">
</div>
</form>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-xs-2 col-lg-2 control-label">이름</label>
<div class="col-xs-10 col-lg-10">
<input type="text" class="form-control" placeholder="이름">
</div>
</div>
</form>원문은 먼저 클래스가 없는 기본 HTML5 폼을 보여 주고, 다음에 form-group과 form-control을 붙인 Bootstrap 폼으로 변형합니다. 핵심 차이는 입력 요소의 폭, 여백, 테두리, 정렬이 일관되게 바뀐다는 점입니다.
- 기본 폼은 브라우저 기본 스타일에 의존합니다.
- Bootstrap 폼은 form-control로 입력 UI를 통일합니다.
- form-group은 label과 input 사이 간격을 정리합니다.
- container 안에 넣으면 좌우 여백도 함께 안정됩니다.
form-control은 text, password, email, date, textarea, select 같은 폼 요소에 공통 스타일을 적용합니다. 원문은 다양한 HTML5 input type에 같은 클래스를 붙여 비교합니다.
| 클래스 | 역할 | 주의 |
|---|---|---|
| input type=text | 일반 텍스트 입력 | 가장 기본적인 입력입니다. |
| input type=password | 비밀번호 입력 | 문자가 가려집니다. |
| input type=date | 날짜 입력 | 브라우저별 UI가 다릅니다. |
| textarea | 여러 줄 입력 | rows로 높이를 조절합니다. |
| select | 목록 선택 | multiple을 붙이면 다중 선택입니다. |
form-group은 label, input, 도움말, 상태 메시지를 하나의 단위로 묶습니다. 검증 상태 클래스인 has-success, has-warning, has-error도 보통 form-group에 붙습니다.
- label을 먼저 배치합니다.
- 입력 요소에 form-control을 붙입니다.
- 필요하면 help-block을 함께 둡니다.
- 검증 결과에 따라 has-success 같은 상태 클래스를 form-group에 붙입니다.
form-inline은 폼 요소를 한 줄에 나란히 배치합니다. 공간이 좁은 화면에서는 줄바꿈될 수 있으므로 짧은 검색 폼이나 로그인 폼에 적합합니다.
| 클래스 | 역할 | 주의 |
|---|---|---|
| form-inline | 폼 요소를 가로 배치 | 긴 폼에는 부적합합니다. |
| sr-only | label을 시각적으로 숨김 | placeholder만 label 대체로 쓰지 않습니다. |
| form-group | 각 입력 묶음 | 인라인에서도 묶음은 유지합니다. |
| button | 제출 동작 | type을 명확히 합니다. |
sr-only는 화면에서는 보이지 않지만 스크린리더에는 읽히게 하는 클래스입니다. 인라인 폼에서 label을 숨기고 placeholder만 보이게 할 때 접근성을 보완합니다.
form-horizontal은 label과 입력칸을 Bootstrap 그리드로 배치합니다. label에는 col-xs-2 col-lg-2 control-label, 입력 영역에는 col-xs-10 col-lg-10 같은 컬럼 클래스를 붙입니다.
| 클래스 | 역할 | 주의 |
|---|---|---|
| form-horizontal | 수평 폼 활성화 | Bootstrap 3 방식입니다. |
| control-label | label 정렬 | label 컬럼에 붙입니다. |
| col-xs-2 | 작은 화면 label 폭 | 전체 12칸 중 2칸입니다. |
| col-xs-offset-2 | 버튼 위치 들여쓰기 | label 폭만큼 맞춥니다. |
체크박스는 여러 개를 동시에 선택할 수 있고, 라디오는 같은 name 그룹 안에서 하나만 선택합니다. Bootstrap은 checkbox, radio 클래스로 간격과 label 클릭 영역을 정리합니다.
| 클래스 | 역할 | 주의 |
|---|---|---|
| checkbox | 블록형 체크박스 | 다중 선택에 사용합니다. |
| radio | 블록형 라디오 | 같은 name 그룹으로 묶습니다. |
| checkbox-inline | 가로 체크박스 | 짧은 선택지에 적합합니다. |
| radio-inline | 가로 라디오 | 같은 name을 유지해야 합니다. |
select에도 form-control을 붙이면 폭과 높이, 테두리가 Bootstrap 스타일로 맞춰집니다. multiple 속성을 붙이면 여러 항목을 선택할 수 있는 목록이 됩니다.
- 기본 select는 한 항목 선택입니다.
- multiple select는 Ctrl 또는 Shift 선택이 필요할 수 있습니다.
- 목록이 길면 size 속성이나 별도 UI를 고려합니다.
- 선택값 처리는 서버나 JavaScript 로직과 함께 설계합니다.
수평 폼 안에서 입력칸 대신 고정 텍스트를 보여 줄 때 form-control-static을 씁니다. 원문은 이메일 값을 p 태그로 표시하며, 이 클래스를 붙였을 때와 붙이지 않았을 때 정렬 차이를 보여 줍니다.
| 클래스 | 역할 | 주의 |
|---|---|---|
| form-control-static | 입력칸 위치에 정적 텍스트 표시 | 수평 폼 정렬 유지에 유리합니다. |
| p 태그만 사용 | 브라우저 기본 문단 | label과 수직 정렬이 어긋날 수 있습니다. |
| control-label | label 쪽 정렬 | static 텍스트와 함께 맞춥니다. |
| col-sm-10 | 내용 컬럼 | 텍스트와 입력 모두 같은 폭을 씁니다. |
disabled 속성은 특정 input을 비활성화할 수 있고, fieldset disabled는 내부 폼 요소 전체를 비활성화합니다. 원문은 부가정보 fieldset을 통째로 비활성화하는 예제를 보여 줍니다.
- input disabled는 해당 입력만 막습니다.
- fieldset disabled는 그룹 전체를 막습니다.
- 비활성 필드는 사용자가 수정할 수 없습니다.
- 서버 전송 여부는 폼 처리 시 별도로 이해해야 합니다.
has-success, has-warning, has-error는 입력 상태를 색상과 테두리로 표현합니다. label에도 control-label을 붙이면 상태 색상이 함께 반영됩니다.
| 클래스 | 역할 | 주의 |
|---|---|---|
| has-success | 문제없는 입력 | 성공 메시지와 함께 쓰면 명확합니다. |
| has-warning | 주의가 필요한 입력 | 오류 전 경고 상태에 적합합니다. |
| has-error | 잘못된 입력 | 수정 방법 안내가 필요합니다. |
| help-block | 도움말 문구 | 상태 이유를 설명합니다. |
input-lg와 input-sm은 입력칸의 높이와 글자 크기를 조절합니다. 그리드 시스템을 사용하면 같은 form-control도 col-sm-2, col-sm-3, col-sm-4처럼 폭을 다르게 배치할 수 있습니다.
| 클래스 | 역할 | 주의 |
|---|---|---|
| input-lg | 큰 입력칸 | 중요 입력이나 넓은 화면에 적합합니다. |
| 기본 form-control | 기본 크기 | 대부분의 폼에 적합합니다. |
| input-sm | 작은 입력칸 | 조밀한 UI에 적합합니다. |
| col-sm-4 | 그리드 폭 | 12칸 중 4칸을 차지합니다. |
- 폼이 세로형인지 인라인인지 수평형인지 먼저 정합니다.
- 각 입력을 form-group 단위로 묶습니다.
- 입력 요소에는 form-control을 붙입니다.
- label을 숨겨야 하면 sr-only로 접근성을 유지합니다.
- 검증 결과가 있으면 has-error와 help-block을 함께 제공합니다.
- 버튼 위치는 form 구조와 그리드 offset에 맞춥니다.
- bootstrap.min.css와 custom CSS 경로가 맞습니다.
- input, textarea, select에 form-control이 필요한지 확인합니다.
- radio 그룹의 name이 동일한지 확인합니다.
- 인라인 폼에서 label을 숨길 때 sr-only를 사용합니다.
- 수평 폼의 label 컬럼과 input 컬럼 합이 12칸인지 확인합니다.
- disabled 상태와 검증 상태가 실제 입력 흐름과 맞는지 확인합니다.
| 폼 종류 | 적합한 상황 | 피해야 할 상황 |
|---|---|---|
| 기본 세로 폼 | 입력 항목이 여러 개이고 설명이 필요한 화면 | 한 줄 검색처럼 매우 짧은 폼 |
| 인라인 폼 | 검색, 로그인, 필터처럼 짧은 입력 | 모바일에서 긴 label과 입력이 많은 화면 |
| sr-only 인라인 폼 | 화면 공간을 아끼되 label 의미를 유지해야 할 때 | placeholder만으로 의미 전달이 어려운 입력 |
| 수평 폼 | 관리자 화면처럼 label과 입력을 정렬해 비교해야 할 때 | 폭이 매우 좁은 단일 컬럼 모바일 화면 |
| fieldset disabled | 권한이나 단계에 따라 그룹 전체를 잠글 때 | 일부 입력만 잠그면 되는 경우 |
원문 예제는 Bootstrap 3 문법입니다. form-horizontal, control-label, col-xs-* 조합, sr-only, input-lg/input-sm 같은 표현을 Bootstrap 3 기준으로 읽으면 자연스럽습니다.
- Bootstrap 4/5에서는 일부 폼 레이아웃 클래스 사용 방식이 바뀌었습니다.
- form-horizontal은 Bootstrap 3의 대표적인 수평 폼 패턴입니다.
- col-xs-*는 Bootstrap 3의 가장 작은 화면 기준 그리드 클래스입니다.
- 최신 버전으로 옮길 때는 row, col, form-label, form-control 조합을 다시 확인해야 합니다.
- 예제 학습에서는 원문 버전의 클래스 의미를 먼저 익히는 것이 좋습니다.
- CSS 로드: Network 탭에서 bootstrap.min.css가 200으로 로드되는지 확인합니다.
- 클래스 확인: input에 form-control이 실제로 붙었는지 Elements 탭에서 봅니다.
- 그리드 확인: 수평 폼의 label과 입력 영역 컬럼 합이 12를 넘지 않는지 봅니다.
- 상태 확인: has-error가 form-group에 붙었는지, help-block이 같은 묶음 안에 있는지 확인합니다.
- 접근성 확인: label의 for와 input id가 연결되어 있는지 확인합니다.
- 브라우저 폭을 줄여 인라인 폼이 줄바꿈될 때도 읽기 쉬운지 확인합니다.
- disabled 필드가 키보드 포커스를 받지 않는지 확인합니다.
- help-block 문구가 오류 원인과 수정 방법을 함께 설명하는지 확인합니다.
- 필수 입력에는 시각 표시와 함께 실제 검증 로직을 연결합니다.
- 수평 폼에서 버튼이 입력 컬럼 시작점과 맞는지 offset 클래스를 확인합니다.
| 실수 | 문제 | 해결 |
|---|---|---|
| form-control 누락 | 입력칸이 Bootstrap 스타일로 보이지 않습니다. | input, textarea, select에 form-control을 붙입니다. |
| radio name 불일치 | 라디오가 여러 개 동시에 선택됩니다. | 같은 그룹은 name을 동일하게 둡니다. |
| placeholder만 label로 사용 | 접근성이 떨어집니다. | label 또는 sr-only label을 유지합니다. |
| 수평 폼 컬럼 합 오류 | 정렬이 어긋납니다. | label과 입력 영역을 12칸 기준으로 맞춥니다. |
| Bootstrap 버전 혼동 | form-horizontal 등 일부 클래스 동작이 다릅니다. | 예제는 Bootstrap 3 기준으로 읽습니다. |
핵심 한 줄 요약
Tags
'php' 카테고리의 다른 글
| 부트스트랩 타이포그래피 · 반응형 유틸리티 완전 정리 (0) | 2026.07.17 |
|---|---|
| 부트스트랩 그리드 완전 정리 (0) | 2026.07.17 |
| 부트스트랩 버튼 · 타이포그래피 완전 정리 (0) | 2026.07.17 |
| localStorage 실습 앱 완전 정리 (0) | 2026.07.17 |
| 웹 스토리지 실습 완전 정리 (0) | 2026.07.17 |
댓글