부트스트랩 4 양식
부트스트랩 4의 기본 설정
양식 컨트롤은 Bootstrap을 사용하여 일부 전역 스타일을 자동으로 수신합니다.
클래스가 있는 모든 텍스트 <input>, <textarea>및
<select>요소 .form-control의 너비는 100%입니다.
부트스트랩 4 양식 레이아웃
부트스트랩은 두 가지 유형의 양식 레이아웃을 제공합니다.
- 스택(전체 너비) 양식
- 인라인 양식
부트스트랩 4 스택 형식
다음 예제에서는 두 개의 입력 필드, 하나의 확인란 및 제출 버튼이 있는 스택 양식을 만듭니다.
.form-group적절한 여백을 보장하기 위해 각 양식 컨트롤 주위 에 로 래퍼 요소를 추가합니다 .
예시
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control"
placeholder="Enter email" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control"
placeholder="Enter password" id="pwd">
</div>
<div class="form-group form-check">
<label
class="form-check-label">
<input
class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
부트스트랩 인라인 양식
인라인 양식에서 모든 요소는 인라인되고 왼쪽 정렬됩니다.
참고: 이는 너비가 576px 이상인 뷰포트 내의 양식에만 적용됩니다. 576px보다 작은 화면에서는 가로로 쌓입니다.
인라인 양식에 대한 추가 규칙:
- 요소
.form-inline에 클래스 추가<form>
다음 예제에서는 두 개의 입력 필드, 하나의 확인란 및 하나의 제출 버튼이 있는 인라인 양식을 만듭니다.
예시
<form class="form-inline" action="/action_page.php">
<label for="email">Email address:</label>
<input type="email" class="form-control"
placeholder="Enter email" id="email">
<label for="pwd">Password:</label>
<input type="password" class="form-control"
placeholder="Enter password" id="pwd">
<div class="form-check">
<label
class="form-check-label">
<input
class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
유틸리티가 포함된 인라인 양식
위의 인라인 형식은 "압축된" 느낌이 들며 Bootstrap의 간격 유틸리티를 사용하면 훨씬 보기 좋습니다. 다음 예는 .mr-sm-2모든 장치(소형 및 상급)의 각 입력에 오른쪽 여백( )을 추가합니다. 그리고 여백 하단 클래스( .mb-2)는 입력 필드가 깨졌을 때 스타일을 지정하는 데 사용됩니다(공간/너비 부족으로 인해 가로에서 세로로 이동).
예시
<form class="form-inline" action="/action_page.php">
<label for="email"
class="mr-sm-2">Email address:</label>
<input type="email" class="form-control
mb-2 mr-sm-2" placeholder="Enter email" id="email">
<label for="pwd"
class="mr-sm-2">Password:</label>
<input type="password" class="form-control
mb-2 mr-sm-2" placeholder="Enter password" id="pwd">
<div class="form-check mb-2 mr-sm-2">
<label
class="form-check-label">
<input
class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary
mb-2">Submit</button>
</form>
부트스트랩 4 유틸리티 장 에서 간격 및 기타 "도우미" 클래스에 대해 자세히 알아볼 것 입니다.
양식 행/그리드
열( .col)을 사용하여 간격 유틸리티를 사용하지 않고 양식 입력의 너비와 정렬을 제어할 수도 있습니다. .row용기 에 넣는 것을 잊지 마십시오.
아래 예에서는 나란히 표시될 두 개의 열을 사용합니다. 부트스트랩 그리드 장 에서 열과 행에 대해 더 많이 배울 것 입니다.
예시
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" id="email" placeholder="Enter email"
name="email">
</div>
<div
class="col">
<input type="password"
class="form-control" placeholder="Enter password" name="pswd">
</div>
</div>
</form>
그리드 여백을 줄이려면(기본 열 여백 재정의) 다음 .form-row대신 .row다음을 사용하십시오.
예시
<form>
<div class="form-row">
<div class="col">
<input type="text" class="form-control" id="email" placeholder="Enter email"
name="email">
</div>
<div
class="col">
<input type="password"
class="form-control" placeholder="Enter password" name="pswd">
</div>
</div>
</form>
양식 유효성 검사
다양한 유효성 검사 클래스를 사용하여 사용자에게 귀중한 피드백을 제공할 수 있습니다. 양식을 제출하기 전이나 후에 검증 피드백을 제공할 것인지 여부에 따라 .was-validated또는 요소에 또는 하나 .needs-validation를 추가하십시오 . <form>입력 필드에는 양식에 누락된 항목을 나타내는 녹색(유효) 또는 빨간색(유효하지 않은) 테두리가 있습니다. .valid-feedback또는 메시지를 추가
.invalid-feedback하여 사용자에게 누락된 항목이나 양식을 제출하기 전에 수행해야 할 작업을 명시적으로 알릴 수도 있습니다.
예시
이 예에서는 .was-validated양식을 제출하기 전에 누락된 항목을 나타내는 데 사용합니다.
<form action="/action_page.php" class="was-validated">
<div class="form-group">
<label
for="uname">Username:</label>
<input type="text"
class="form-control" id="uname" placeholder="Enter username" name="uname"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
<label
for="pwd">Password:</label>
<input type="password"
class="form-control" id="pwd" placeholder="Enter password" name="pswd"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input
class="form-check-input" type="checkbox" name="remember" required> I agree on
blabla.
<div
class="valid-feedback">Valid.</div>
<div
class="invalid-feedback">Check this checkbox to continue.</div>
</label>
</div>
<button type="submit" class="btn
btn-primary">Submit</button>
</form>
예시
이 예에서는 .needs-validation양식이 제출된 후 유효성 검사 효과를 추가하는 를 사용합니다(누락된 것이 있는 경우). 이 예제가 제대로 작동하려면 몇 가지 jQuery 코드도 추가해야 합니다.
<form action="/action_page.php" class="needs-validation"
novalidate>
<div class="form-group">
<label
for="uname">Username:</label>
<input type="text"
class="form-control" id="uname" placeholder="Enter username" name="uname"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
<label
for="pwd">Password:</label>
<input type="password"
class="form-control" id="pwd" placeholder="Enter password" name="pswd"
required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input
class="form-check-input" type="checkbox" name="remember" required> I agree on
blabla.
<div
class="valid-feedback">Valid.</div>
<div
class="invalid-feedback">Check this checkbox to continue.</div>
</label>
</div>
<button type="submit" class="btn
btn-primary">Submit</button>
</form>
<script>
//
Disable form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Get the
forms we want to add validation styles to
var forms =
document.getElementsByClassName('needs-validation');
//
Loop over them and prevent submission
var validation =
Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
},
false);
});
}, false);
})();
</script>