Source: dist/css/cardiosmart_boot.css, line 11282
3.6 Forms
Out of the box bootstrap forms.
Example
Default styling
Overview
DocumentationDisabled forms
DocumentationSizing
DocumentationInput group
Documentation@
@example.com
https://example.com/users/
$
.00
With
textarea
Floating labels
DocumentationValidation
Documentation<article class="m-y_3"
id="overview">
<div
class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start mt-5 m-b_3 mt-xl-0 mb-xl-2">
<h3>Overview</h3><a
class="d-flex align-items-center"
target="_blank"
href="https://getbootstrap.com/docs/5.0/forms/overview/">Documentation</a>
</div>
<div>
<div class="bd-example">
<form>
<div class="m-b_3"><label
for="exampleInputEmail1"
class="form-label">Email
address</label> <input type="email"
class="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp">
<div id="emailHelp"
class="form-text">We'll never share
your email with anyone else.</div>
</div>
<div class="m-b_3"><label
for="exampleInputPassword1"
class="form-label">Password</label>
<input type="password"
class="form-control"
id="exampleInputPassword1"></div>
<div class="m-b_3 form-check"><input
type="checkbox"
class="form-check-input"
id="exampleCheck1"> <label
class="form-check-label"
for="exampleCheck1">Check me
out</label></div>
<fieldset class="m-b_3">
<legend>Radios buttons</legend>
<div class="form-check"><input
type="radio"
name="radios"
class="form-check-input"
id="exampleRadio1"> <label
class="form-check-label"
for="exampleRadio1">Default
radio</label></div>
<div class="m-b_3 form-check"><input
type="radio"
name="radios"
class="form-check-input"
id="exampleRadio2"> <label
class="form-check-label"
for="exampleRadio2">Another
radio</label></div>
</fieldset>
<div class="m-b_3"><label class="form-label"
for="customFile">Upload</label>
<input type="file"
class="form-control"
id="customFile"></div>
<div class="m-b_3 form-check form-switch">
<input class="form-check-input"
type="checkbox"
id="flexSwitchCheckChecked"
checked> <label
class="form-check-label"
for="flexSwitchCheckChecked">Checked
switch checkbox input</label></div>
<div class="m-b_3"><label for="customRange3"
class="form-label">Example
range</label> <input type="range"
class="form-range"
min="0"
max="5"
step="0.5"
id="customRange3"></div><button
type="submit"
class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</article>
<article class="m-y_3"
id="disabled-forms">
<div
class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start mt-5 m-b_3 mt-xl-0 mb-xl-2">
<h3>Disabled forms</h3><a
class="d-flex align-items-center"
target="_blank"
href="https://getbootstrap.com/docs/5.0/forms/overview/#disabled-forms">Documentation</a>
</div>
<div>
<div class="bd-example">
<form>
<fieldset disabled
aria-label="Disabled fieldset example">
<div class="m-b_3"><label
for="disabledTextInput"
class="form-label">Disabled
input</label> <input type="text"
id="disabledTextInput"
class="form-control"
placeholder="Disabled input">
</div>
<div class="m-b_3"><label
for="disabledSelect"
class="form-label">Disabled
select menu</label> <select
id="disabledSelect"
class="form-select">
<option>Disabled select</option>
</select></div>
<div class="m-b_3">
<div class="form-check"><input
class="form-check-input"
type="checkbox"
id="disabledFieldsetCheck"
disabled> <label
class="form-check-label"
for="disabledFieldsetCheck">Can't
check this</label></div>
</div>
<fieldset class="m-b_3">
<legend>Disabled radios buttons
</legend>
<div class="form-check"><input
type="radio"
name="radios"
class="form-check-input"
id="disabledRadio1"
disabled> <label
class="form-check-label"
for="disabledRadio1">Disabled
radio</label></div>
<div class="m-b_3 form-check"><input
type="radio"
name="radios"
class="form-check-input"
id="disabledRadio2"
disabled> <label
class="form-check-label"
for="disabledRadio2">Another
radio</label></div>
</fieldset>
<div class="m-b_3"><label
class="form-label"
for="disabledCustomFile">Upload</label>
<input type="file"
class="form-control"
id="disabledCustomFile"
disabled></div>
<div
class="m-b_3 form-check form-switch">
<input class="form-check-input"
type="checkbox"
id="disabledSwitchCheckChecked"
checked
disabled> <label
class="form-check-label"
for="disabledSwitchCheckChecked">Disabled
checked switch checkbox
input</label></div>
<div class="m-b_3"><label
for="disabledRange"
class="form-label">Disabled
range</label> <input
type="range"
class="form-range"
min="0"
max="5"
step="0.5"
id="disabledRange"></div>
<button type="submit"
class="btn btn-primary">Submit</button>
</fieldset>
</form>
</div>
</div>
</article>
<article class="m-y_3"
id="sizing">
<div
class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start mt-5 m-b_3 mt-xl-0 mb-xl-2">
<h3>Sizing</h3><a class="d-flex align-items-center"
target="_blank"
href="https://getbootstrap.com/docs/5.0/forms/form-control/#sizing">Documentation</a>
</div>
<div>
<div class="bd-example">
<div class="m-b_3"><input
class="form-control form-control-lg"
type="text"
placeholder=".form-control-lg"
aria-label=".form-control-lg example">
</div>
<div class="m-b_3"><select
class="form-select form-select-lg m-b_3"
aria-label=".form-select-lg example">
<option selected>Open this select menu
</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select></div>
<div class="m-b_3"><input type="file"
class="form-control form-control-lg"
aria-label="Large file input example">
</div>
</div>
<div class="bd-example">
<div class="m-b_3"><input
class="form-control form-control-sm"
type="text"
placeholder=".form-control-sm"
aria-label=".form-control-sm example">
</div>
<div class="m-b_3"><select
class="form-select form-select-sm"
aria-label=".form-select-sm example">
<option selected>Open this select menu
</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select></div>
<div class="m-b_3"><input type="file"
class="form-control form-control-sm"
aria-label="Small file input example">
</div>
</div>
</div>
</article>
<article class="m-y_3"
id="input-group">
<div
class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start mt-5 m-b_3 mt-xl-0 mb-xl-2">
<h3>Input group</h3><a
class="d-flex align-items-center"
target="_blank"
href="https://getbootstrap.com/docs/5.0/forms/input-group/">Documentation</a>
</div>
<div>
<div class="bd-example">
<div class="input-group m-b_3"><span
class="input-group-text"
id="basic-addon1">@</span> <input
type="text"
class="form-control"
placeholder="Username"
aria-label="Username"
aria-describedby="basic-addon1">
</div>
<div class="input-group m-b_3"><input type="text"
class="form-control"
placeholder="Recipient's username"
aria-label="Recipient's username"
aria-describedby="basic-addon2">
<span class="input-group-text"
id="basic-addon2">@example.com</span>
</div><label for="basic-url"
class="form-label">Your vanity
URL</label>
<div class="input-group m-b_3"><span
class="input-group-text"
id="basic-addon3">https://example.com/users/</span>
<input type="text"
class="form-control"
id="basic-url"
aria-describedby="basic-addon3">
</div>
<div class="input-group m-b_3"><span
class="input-group-text">$</span>
<input type="text"
class="form-control"
aria-label="Amount (to the nearest dollar)">
<span class="input-group-text">.00</span>
</div>
<div class="input-group"><span
class="input-group-text">With
textarea</span> <textarea
class="form-control"
aria-label="With textarea"></textarea>
</div>
</div>
</div>
</article>
<article class="m-y_3"
id="floating-labels">
<div
class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start mt-5 m-b_3 mt-xl-0 mb-xl-2">
<h3>Floating labels</h3><a
class="d-flex align-items-center"
target="_blank"
href="https://getbootstrap.com/docs/5.0/forms/floating-labels/">Documentation</a>
</div>
<div>
<div class="bd-example">
<form>
<div class="form-floating m-b_3 input-group-lg"><input
type="email"
class="form-control"
id="floatingInput"
placeholder="name@example.com">
<label for="floatingInput">Email
address</label></div>
<div class="form-floating"><input
type="password"
class="form-control"
id="floatingPassword"
placeholder="Password"> <label
for="floatingPassword">Password</label>
</div>
</form>
</div>
</div>
</article>
<article class="m-y_3"
id="validation">
<div
class="bd-heading sticky-xl-top m-y_3 bg_white p_3 br-b_1 br_solid br_black-1 shadow_overlap-light m-x_n4 align-self-start mt-5 m-b_3 mt-xl-0 mb-xl-2">
<h3>Validation</h3><a
class="d-flex align-items-center"
target="_blank"
href="https://getbootstrap.com/docs/5.0/forms/validation/">Documentation</a>
</div>
<div>
<div class="bd-example">
<form class="row g-3">
<div class="col-md-4"><label
for="validationServer01"
class="form-label">First
name</label> <input type="text"
class="form-control is-valid"
id="validationServer01"
value="Mark"
required>
<div class="valid-feedback">Looks good!
</div>
</div>
<div class="col-md-4"><label
for="validationServer02"
class="form-label">Last
name</label> <input type="text"
class="form-control is-valid"
id="validationServer02"
value="Otto"
required>
<div class="valid-feedback">Looks good!
</div>
</div>
<div class="col-md-4"><label
for="validationServerUsername"
class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text"
id="inputGroupPrepend3">@</span>
<input type="text"
class="form-control is-invalid"
id="validationServerUsername"
aria-describedby="inputGroupPrepend3"
required>
<div class="invalid-feedback">Please
choose a username.</div>
</div>
</div>
<div class="col-md-6 input-group-lg"><label
for="validationServer03"
class="form-label">City</label>
<input type="text"
class="form-control is-invalid"
id="validationServer03"
required>
<div class="invalid-feedback">Please
provide a valid city.</div>
</div>
<div class="col-md-3"><label
for="validationServer04"
class="form-label">State</label>
<select class="form-select is-invalid"
id="validationServer04"
required>
<option selected
disabled
value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-feedback">Please
select a valid state.</div>
</div>
<div class="col-md-3"><label
for="validationServer05"
class="form-label">Zip</label>
<input type="text"
class="form-control is-invalid"
id="validationServer05"
required>
<div class="invalid-feedback">Please
provide a valid zip.</div>
</div>
<div class="col-12">
<div class="form-check"><input
class="form-check-input is-invalid"
type="checkbox"
value=""
id="invalidCheck3"
required> <label
class="form-check-label"
for="invalidCheck3">Agree to
terms and conditions</label>
<div class="invalid-feedback">You
must agree before submitting.
</div>
</div>
</div>
<div class="col-12"><button
class="btn btn-primary"
type="submit">Submit
form</button></div>
</form>
</div>
</div>
</article>