<form><divclass="form-group"><labelfor="exampleInputEmail1">Email address</label><inputtype="email"class="form-control"id="exampleInputEmail1"aria-describedby="emailHelp"placeholder="Enter email"><smallid="emailHelp"class="form-text text-muted">We'll never share your email with anyone else.</small></div><divclass="form-group"><labelfor="exampleInputPassword1">Password</label><inputtype="password"class="form-control"id="exampleInputPassword1"placeholder="Password"></div><divclass="form-group form-check"><inputtype="checkbox"class="form-check-input"id="exampleCheck1"><labelclass="form-check-label"for="exampleCheck1">Check me out</label></div><buttontype="submit"class="btn btn-primary">Submit</button></form>
<form><divclass="form-group"><labelfor="formControlRange">Example Range input</label><inputtype="range"class="form-control-range"id="formControlRange"></div></form>
<divclass="form-check"><inputclass="form-check-input"type="radio"name="exampleRadios"id="exampleRadios1"value="option1"checked><labelclass="form-check-label"for="exampleRadios1">
Default radio
</label></div><divclass="form-check"><inputclass="form-check-input"type="radio"name="exampleRadios"id="exampleRadios2"value="option2"><labelclass="form-check-label"for="exampleRadios2">
Second default radio
</label></div><divclass="form-check"><inputclass="form-check-input"type="radio"name="exampleRadios"id="exampleRadios3"value="option3"disabled><labelclass="form-check-label"for="exampleRadios3">
Disabled radio
</label></div>
<form><divclass="form-row"><divclass="form-group col-md-6"><labelfor="inputEmail4">Email</label><inputtype="email"class="form-control"id="inputEmail4"placeholder="Email"></div><divclass="form-group col-md-6"><labelfor="inputPassword4">Password</label><inputtype="password"class="form-control"id="inputPassword4"placeholder="Password"></div></div><divclass="form-group"><labelfor="inputAddress">Address</label><inputtype="text"class="form-control"id="inputAddress"placeholder="1234 Main St"></div><divclass="form-group"><labelfor="inputAddress2">Address 2</label><inputtype="text"class="form-control"id="inputAddress2"placeholder="Apartment, studio, or floor"></div><divclass="form-row"><divclass="form-group col-md-6"><labelfor="inputCity">City</label><inputtype="text"class="form-control"id="inputCity"></div><divclass="form-group col-md-4"><labelfor="inputState">State</label><selectid="inputState"class="form-control"><optionselected>Choose...</option><option>...</option></select></div><divclass="form-group col-md-2"><labelfor="inputZip">Zip</label><inputtype="text"class="form-control"id="inputZip"></div></div><divclass="form-group"><divclass="form-check"><inputclass="form-check-input"type="checkbox"id="gridCheck"><labelclass="form-check-label"for="gridCheck">
Check me out
</label></div></div><buttontype="submit"class="btn btn-primary">Sign in</button></form>
가로 폼
<form><divclass="form-group row"><labelfor="inputEmail3"class="col-sm-2 col-form-label">Email</label><divclass="col-sm-10"><inputtype="email"class="form-control"id="inputEmail3"placeholder="Email"></div></div><divclass="form-group row"><labelfor="inputPassword3"class="col-sm-2 col-form-label">Password</label><divclass="col-sm-10"><inputtype="password"class="form-control"id="inputPassword3"placeholder="Password"></div></div><fieldsetclass="form-group"><divclass="row"><legendclass="col-form-label col-sm-2 pt-0">Radios</legend><divclass="col-sm-10"><divclass="form-check"><inputclass="form-check-input"type="radio"name="gridRadios"id="gridRadios1"value="option1"checked><labelclass="form-check-label"for="gridRadios1">
First radio
</label></div><divclass="form-check"><inputclass="form-check-input"type="radio"name="gridRadios"id="gridRadios2"value="option2"><labelclass="form-check-label"for="gridRadios2">
Second radio
</label></div><divclass="form-check disabled"><inputclass="form-check-input"type="radio"name="gridRadios"id="gridRadios3"value="option3"disabled><labelclass="form-check-label"for="gridRadios3">
Third disabled radio
</label></div></div></div></fieldset><divclass="form-group row"><divclass="col-sm-2">Checkbox</div><divclass="col-sm-10"><divclass="form-check"><inputclass="form-check-input"type="checkbox"id="gridCheck1"><labelclass="form-check-label"for="gridCheck1">
Example checkbox
</label></div></div></div><divclass="form-group row"><divclass="col-sm-10"><buttontype="submit"class="btn btn-primary">Sign in</button></div></div></form>
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
<labelfor="inputPassword5">Password</label><inputtype="password"id="inputPassword5"class="form-control"aria-describedby="passwordHelpBlock"><smallid="passwordHelpBlock"class="form-text text-muted">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>
<formclass="form-inline"><divclass="form-group"><labelfor="inputPassword6">Password</label><inputtype="password"id="inputPassword6"class="form-control mx-sm-3"aria-describedby="passwordHelpInline"><smallid="passwordHelpInline"class="text-muted">
Must be 8-20 characters long.
</small></div></form>
<formclass="needs-validation"novalidate><divclass="form-row"><divclass="col-md-4 mb-3"><labelfor="validationCustom01">First name</label><inputtype="text"class="form-control"id="validationCustom01"placeholder="First name"value="Mark"required><divclass="valid-feedback">
Looks good!
</div></div><divclass="col-md-4 mb-3"><labelfor="validationCustom02">Last name</label><inputtype="text"class="form-control"id="validationCustom02"placeholder="Last name"value="Otto"required><divclass="valid-feedback">
Looks good!
</div></div><divclass="col-md-4 mb-3"><labelfor="validationCustomUsername">Username</label><divclass="input-group"><divclass="input-group-prepend"><spanclass="input-group-text"id="inputGroupPrepend">@</span></div><inputtype="text"class="form-control"id="validationCustomUsername"placeholder="Username"aria-describedby="inputGroupPrepend"required><divclass="invalid-feedback">
Please choose a username.
</div></div></div></div><divclass="form-row"><divclass="col-md-6 mb-3"><labelfor="validationCustom03">City</label><inputtype="text"class="form-control"id="validationCustom03"placeholder="City"required><divclass="invalid-feedback">
Please provide a valid city.
</div></div><divclass="col-md-3 mb-3"><labelfor="validationCustom04">State</label><inputtype="text"class="form-control"id="validationCustom04"placeholder="State"required><divclass="invalid-feedback">
Please provide a valid state.
</div></div><divclass="col-md-3 mb-3"><labelfor="validationCustom05">Zip</label><inputtype="text"class="form-control"id="validationCustom05"placeholder="Zip"required><divclass="invalid-feedback">
Please provide a valid zip.
</div></div></div><divclass="form-group"><divclass="form-check"><inputclass="form-check-input"type="checkbox"value=""id="invalidCheck"required><labelclass="form-check-label"for="invalidCheck">
Agree to terms and conditions
</label><divclass="invalid-feedback">
You must agree before submitting.
</div></div></div><buttonclass="btn btn-primary"type="submit">Submit form</button></form><script>// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles tovar forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submissionvar 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>
브라우저 기본 검증 사용
<form><divclass="form-row"><divclass="col-md-4 mb-3"><labelfor="validationDefault01">First name</label><inputtype="text"class="form-control"id="validationDefault01"placeholder="First name"value="Mark"required></div><divclass="col-md-4 mb-3"><labelfor="validationDefault02">Last name</label><inputtype="text"class="form-control"id="validationDefault02"placeholder="Last name"value="Otto"required></div><divclass="col-md-4 mb-3"><labelfor="validationDefaultUsername">Username</label><divclass="input-group"><divclass="input-group-prepend"><spanclass="input-group-text"id="inputGroupPrepend2">@</span></div><inputtype="text"class="form-control"id="validationDefaultUsername"placeholder="Username"aria-describedby="inputGroupPrepend2"required></div></div></div><divclass="form-row"><divclass="col-md-6 mb-3"><labelfor="validationDefault03">City</label><inputtype="text"class="form-control"id="validationDefault03"placeholder="City"required></div><divclass="col-md-3 mb-3"><labelfor="validationDefault04">State</label><inputtype="text"class="form-control"id="validationDefault04"placeholder="State"required></div><divclass="col-md-3 mb-3"><labelfor="validationDefault05">Zip</label><inputtype="text"class="form-control"id="validationDefault05"placeholder="Zip"required></div></div><divclass="form-group"><divclass="form-check"><inputclass="form-check-input"type="checkbox"value=""id="invalidCheck2"required><labelclass="form-check-label"for="invalidCheck2">
Agree to terms and conditions
</label></div></div><buttonclass="btn btn-primary"type="submit">Submit form</button></form>
서버사이드 검증 반영
<form><divclass="form-row"><divclass="col-md-4 mb-3"><labelfor="validationServer01">First name</label><inputtype="text"class="form-control is-valid"id="validationServer01"placeholder="First name"value="Mark"required><divclass="valid-feedback">
Looks good!
</div></div><divclass="col-md-4 mb-3"><labelfor="validationServer02">Last name</label><inputtype="text"class="form-control is-valid"id="validationServer02"placeholder="Last name"value="Otto"required><divclass="valid-feedback">
Looks good!
</div></div><divclass="col-md-4 mb-3"><labelfor="validationServerUsername">Username</label><divclass="input-group"><divclass="input-group-prepend"><spanclass="input-group-text"id="inputGroupPrepend3">@</span></div><inputtype="text"class="form-control is-invalid"id="validationServerUsername"placeholder="Username"aria-describedby="inputGroupPrepend3"required><divclass="invalid-feedback">
Please choose a username.
</div></div></div></div><divclass="form-row"><divclass="col-md-6 mb-3"><labelfor="validationServer03">City</label><inputtype="text"class="form-control is-invalid"id="validationServer03"placeholder="City"required><divclass="invalid-feedback">
Please provide a valid city.
</div></div><divclass="col-md-3 mb-3"><labelfor="validationServer04">State</label><inputtype="text"class="form-control is-invalid"id="validationServer04"placeholder="State"required><divclass="invalid-feedback">
Please provide a valid state.
</div></div><divclass="col-md-3 mb-3"><labelfor="validationServer05">Zip</label><inputtype="text"class="form-control is-invalid"id="validationServer05"placeholder="Zip"required><divclass="invalid-feedback">
Please provide a valid zip.
</div></div></div><divclass="form-group"><divclass="form-check"><inputclass="form-check-input is-invalid"type="checkbox"value=""id="invalidCheck3"required><labelclass="form-check-label"for="invalidCheck3">
Agree to terms and conditions
</label><divclass="invalid-feedback">
You must agree before submitting.
</div></div></div><buttonclass="btn btn-primary"type="submit">Submit form</button></form>
안내 텍스트
<formclass="was-validated"><divclass="mb-3"><labelfor="validationTextarea">Textarea</label><textareaclass="form-control is-invalid"id="validationTextarea"placeholder="Required example textarea"required></textarea><divclass="invalid-feedback">
Please enter a message in the textarea.
</div></div><divclass="custom-control custom-checkbox mb-3"><inputtype="checkbox"class="custom-control-input"id="customControlValidation1"required><labelclass="custom-control-label"for="customControlValidation1">Check this custom checkbox</label><divclass="invalid-feedback">Example invalid feedback text</div></div><divclass="custom-control custom-radio"><inputtype="radio"class="custom-control-input"id="customControlValidation2"name="radio-stacked"required><labelclass="custom-control-label"for="customControlValidation2">Toggle this custom radio</label></div><divclass="custom-control custom-radio mb-3"><inputtype="radio"class="custom-control-input"id="customControlValidation3"name="radio-stacked"required><labelclass="custom-control-label"for="customControlValidation3">Or toggle this other custom radio</label><divclass="invalid-feedback">More example invalid feedback text</div></div><divclass="form-group"><selectclass="custom-select"required><optionvalue="">Open this select menu</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select><divclass="invalid-feedback">Example invalid custom select feedback</div></div><divclass="custom-file"><inputtype="file"class="custom-file-input"id="validatedCustomFile"required><labelclass="custom-file-label"for="validatedCustomFile">Choose file...</label><divclass="invalid-feedback">Example invalid custom file feedback</div></div></form>
툴팁
<formclass="needs-validation"novalidate><divclass="form-row"><divclass="col-md-4 mb-3"><labelfor="validationTooltip01">First name</label><inputtype="text"class="form-control"id="validationTooltip01"placeholder="First name"value="Mark"required><divclass="valid-tooltip">
Looks good!
</div></div><divclass="col-md-4 mb-3"><labelfor="validationTooltip02">Last name</label><inputtype="text"class="form-control"id="validationTooltip02"placeholder="Last name"value="Otto"required><divclass="valid-tooltip">
Looks good!
</div></div><divclass="col-md-4 mb-3"><labelfor="validationTooltipUsername">Username</label><divclass="input-group"><divclass="input-group-prepend"><spanclass="input-group-text"id="validationTooltipUsernamePrepend">@</span></div><inputtype="text"class="form-control"id="validationTooltipUsername"placeholder="Username"aria-describedby="validationTooltipUsernamePrepend"required><divclass="invalid-tooltip">
Please choose a unique and valid username.
</div></div></div></div><divclass="form-row"><divclass="col-md-6 mb-3"><labelfor="validationTooltip03">City</label><inputtype="text"class="form-control"id="validationTooltip03"placeholder="City"required><divclass="invalid-tooltip">
Please provide a valid city.
</div></div><divclass="col-md-3 mb-3"><labelfor="validationTooltip04">State</label><inputtype="text"class="form-control"id="validationTooltip04"placeholder="State"required><divclass="invalid-tooltip">
Please provide a valid state.
</div></div><divclass="col-md-3 mb-3"><labelfor="validationTooltip05">Zip</label><inputtype="text"class="form-control"id="validationTooltip05"placeholder="Zip"required><divclass="invalid-tooltip">
Please provide a valid zip.
</div></div></div><buttonclass="btn btn-primary"type="submit">Submit form</button></form>
커스텀 폼
체크박스
<divclass="custom-control custom-checkbox"><inputtype="checkbox"class="custom-control-input"id="customCheck1"><labelclass="custom-control-label"for="customCheck1">Check this custom checkbox</label></div>
라디오 버튼
<divclass="custom-control custom-radio"><inputtype="radio"id="customRadio1"name="customRadio"class="custom-control-input"><labelclass="custom-control-label"for="customRadio1">Toggle this custom radio</label></div><divclass="custom-control custom-radio"><inputtype="radio"id="customRadio2"name="customRadio"class="custom-control-input"><labelclass="custom-control-label"for="customRadio2">Or toggle this other custom radio</label></div>
인라인
<divclass="custom-control custom-radio custom-control-inline"><inputtype="radio"id="customRadioInline1"name="customRadioInline1"class="custom-control-input"><labelclass="custom-control-label"for="customRadioInline1">Toggle this custom radio</label></div><divclass="custom-control custom-radio custom-control-inline"><inputtype="radio"id="customRadioInline2"name="customRadioInline1"class="custom-control-input"><labelclass="custom-control-label"for="customRadioInline2">Or toggle this other custom radio</label></div>
비활성 상태
<divclass="custom-control custom-checkbox"><inputtype="checkbox"class="custom-control-input"id="customCheckDisabled1"disabled><labelclass="custom-control-label"for="customCheckDisabled1">Check this custom checkbox</label></div><divclass="custom-control custom-radio"><inputtype="radio"name="radioDisabled"id="customRadioDisabled2"class="custom-control-input"disabled><labelclass="custom-control-label"for="customRadioDisabled2">Toggle this custom radio</label></div>
스위치
<divclass="custom-control custom-switch"><inputtype="checkbox"class="custom-control-input"id="customSwitch1"><labelclass="custom-control-label"for="customSwitch1">Toggle this switch element</label></div><divclass="custom-control custom-switch"><inputtype="checkbox"class="custom-control-input"disabledid="customSwitch2"><labelclass="custom-control-label"for="customSwitch2">Disabled switch element</label></div>
셀렉트 메뉴
<selectclass="custom-select"><optionselected>Open this select menu</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select>
<selectclass="custom-select custom-select-lg mb-3"><optionselected>Open this select menu</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select><selectclass="custom-select custom-select-sm"><optionselected>Open this select menu</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select>
<selectclass="custom-select"multiple><optionselected>Open this select menu</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select>
<selectclass="custom-select"size="3"><optionselected>Open this select menu</option><optionvalue="1">One</option><optionvalue="2">Two</option><optionvalue="3">Three</option></select>