ರೂಪಗಳು

ಅವಲೋಕನ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳು ತರಗತಿಗಳೊಂದಿಗೆ ನಮ್ಮ ರೀಬೂಟ್ ಮಾಡಿದ ಫಾರ್ಮ್ ಶೈಲಿಗಳಲ್ಲಿ ವಿಸ್ತರಿಸುತ್ತವೆ . ಬ್ರೌಸರ್‌ಗಳು ಮತ್ತು ಸಾಧನಗಳಾದ್ಯಂತ ಹೆಚ್ಚು ಸ್ಥಿರವಾದ ರೆಂಡರಿಂಗ್‌ಗಾಗಿ ತಮ್ಮ ಕಸ್ಟಮೈಸ್ ಮಾಡಿದ ಡಿಸ್‌ಪ್ಲೇಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ಈ ತರಗತಿಗಳನ್ನು ಬಳಸಿ.

ಇಮೇಲ್ ಪರಿಶೀಲನೆ, ಸಂಖ್ಯೆ ಆಯ್ಕೆ ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳಂತಹ ಹೊಸ ಇನ್‌ಪುಟ್ ನಿಯಂತ್ರಣಗಳ ಲಾಭವನ್ನು ಪಡೆಯಲು typeಎಲ್ಲಾ ಇನ್‌ಪುಟ್‌ಗಳಲ್ಲಿ (ಉದಾ, emailಇಮೇಲ್ ವಿಳಾಸ ಅಥವಾ ಸಂಖ್ಯಾತ್ಮಕ ಮಾಹಿತಿಗಾಗಿ) ಸೂಕ್ತವಾದ ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಲು ಮರೆಯದಿರಿ .number

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಫಾರ್ಮ್ ಶೈಲಿಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು ತ್ವರಿತ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ. ಅಗತ್ಯವಿರುವ ತರಗತಿಗಳು, ಫಾರ್ಮ್ ಲೇಔಟ್ ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳ ದಾಖಲಾತಿಗಾಗಿ ಓದುವುದನ್ನು ಮುಂದುವರಿಸಿ.

<form>
  <div class="mb-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="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

ಫಾರ್ಮ್ ಪಠ್ಯ

ಬ್ಲಾಕ್-ಲೆವೆಲ್ ಅಥವಾ ಇನ್‌ಲೈನ್-ಲೆವೆಲ್ ಫಾರ್ಮ್ ಪಠ್ಯವನ್ನು ಬಳಸಿಕೊಂಡು ರಚಿಸಬಹುದು .form-text.

ಕೆಳಗಿನ ಇನ್‌ಪುಟ್‌ಗಳನ್ನು ಫಾರ್ಮ್ ಪಠ್ಯದೊಂದಿಗೆ ಶೈಲಿ ಮಾಡಬಹುದು .form-text. ಬ್ಲಾಕ್-ಲೆವೆಲ್ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಬಳಸಿದರೆ, ಮೇಲಿನ ಇನ್‌ಪುಟ್‌ಗಳಿಂದ ಸುಲಭ ಅಂತರಕ್ಕಾಗಿ ಉನ್ನತ ಅಂಚು ಸೇರಿಸಲಾಗುತ್ತದೆ.

<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>

ಇನ್‌ಲೈನ್ ಪಠ್ಯವು ಯಾವುದೇ ವಿಶಿಷ್ಟವಾದ ಇನ್‌ಲೈನ್ HTML ಅಂಶವನ್ನು ಬಳಸಬಹುದು (ಅದು <span>, <small>, ಅಥವಾ ಬೇರೆ ಯಾವುದಾದರೂ ಆಗಿರಬಹುದು) ವರ್ಗಕ್ಕಿಂತ ಹೆಚ್ಚೇನೂ ಇಲ್ಲ .form-text.

<div class="row g-3 align-items-center">
  <div class="col-auto">
    <label for="inputPassword6" class="col-form-label">Password</label>
  </div>
  <div class="col-auto">
    <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
  </div>
  <div class="col-auto">
    <span id="passwordHelpInline" class="form-text">
      Must be 8-20 characters long.
    </span>
  </div>
</div>

ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ರೂಪಗಳು

disabledಬಳಕೆದಾರರ ಸಂವಹನಗಳನ್ನು ತಡೆಯಲು ಮತ್ತು ಅದನ್ನು ಹಗುರವಾಗಿ ಕಾಣುವಂತೆ ಮಾಡಲು ಇನ್‌ಪುಟ್‌ನಲ್ಲಿ ಬೂಲಿಯನ್ ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸಿ .

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

ಎಲ್ಲಾ ನಿಯಂತ್ರಣಗಳನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲು disableda ಗೆ ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸಿ . <fieldset>ಬ್ರೌಸರ್‌ಗಳು ಎಲ್ಲಾ ಸ್ಥಳೀಯ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳನ್ನು ( <input>, <select>, ಮತ್ತು <button>ಅಂಶಗಳು) <fieldset disabled>ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ ಎಂದು ಪರಿಗಣಿಸುತ್ತದೆ, ಅವುಗಳ ಮೇಲೆ ಕೀಬೋರ್ಡ್ ಮತ್ತು ಮೌಸ್ ಪರಸ್ಪರ ಕ್ರಿಯೆಗಳನ್ನು ತಡೆಯುತ್ತದೆ.

ಆದಾಗ್ಯೂ, ನಿಮ್ಮ ಫಾರ್ಮ್ ಕಸ್ಟಮ್ ಬಟನ್-ತರಹದ ಅಂಶಗಳನ್ನು ಒಳಗೊಂಡಿದ್ದರೆ <a class="btn btn-*">...</a>, ಇವುಗಳಿಗೆ ಕೇವಲ ಒಂದು ಶೈಲಿಯನ್ನು ನೀಡಲಾಗುತ್ತದೆ pointer-events: none, ಅಂದರೆ ಅವುಗಳು ಇನ್ನೂ ಕೇಂದ್ರೀಕೃತವಾಗಿರುತ್ತವೆ ಮತ್ತು ಕೀಬೋರ್ಡ್ ಬಳಸಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ. tabindex="-1"ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಫೋಕಸ್ ಪಡೆಯುವುದನ್ನು ತಡೆಯಲು ಮತ್ತು aria-disabled="disabled"ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ತಮ್ಮ ಸ್ಥಿತಿಯನ್ನು ಸೂಚಿಸಲು ನೀವು ಈ ನಿಯಂತ್ರಣಗಳನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಮಾರ್ಪಡಿಸಬೇಕು .

<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <div class="mb-3">
      <label for="disabledTextInput" class="form-label">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="mb-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="mb-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>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

ಪ್ರವೇಶಿಸುವಿಕೆ

ಎಲ್ಲಾ ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳು ಸೂಕ್ತವಾದ ಪ್ರವೇಶಿಸಬಹುದಾದ ಹೆಸರನ್ನು ಹೊಂದಿವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ ಇದರಿಂದ ಅವುಗಳ ಉದ್ದೇಶವನ್ನು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳ ಬಳಕೆದಾರರಿಗೆ ತಿಳಿಸಬಹುದು. ಇದನ್ನು ಸಾಧಿಸಲು ಸರಳವಾದ ಮಾರ್ಗವೆಂದರೆ ಒಂದು ಅಂಶವನ್ನು ಬಳಸುವುದು , ಅಥವಾ-ಬಟನ್‌ಗಳ ಸಂದರ್ಭದಲ್ಲಿ- ವಿಷಯದ <label>ಭಾಗವಾಗಿ ಸಾಕಷ್ಟು ವಿವರಣಾತ್ಮಕ ಪಠ್ಯವನ್ನು ಸೇರಿಸುವುದು .<button>...</button>

ಗೋಚರಿಸುವ ಅಥವಾ ಸೂಕ್ತವಾದ ಪಠ್ಯ ವಿಷಯವನ್ನು ಸೇರಿಸಲು ಸಾಧ್ಯವಾಗದ ಸಂದರ್ಭಗಳಲ್ಲಿ <label>, ಇನ್ನೂ ಪ್ರವೇಶಿಸಬಹುದಾದ ಹೆಸರನ್ನು ಒದಗಿಸುವ ಪರ್ಯಾಯ ಮಾರ್ಗಗಳಿವೆ, ಅವುಗಳೆಂದರೆ:

• <label>.visually-hiddenವರ್ಗವನ್ನು ಬಳಸಿಕೊಂಡು ಅಂಶಗಳನ್ನು ಮರೆಮಾಡಲಾಗಿದೆ
• ಬಳಸಿಕೊಂಡು ಲೇಬಲ್ ಆಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸಬಹುದಾದ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಅಂಶವನ್ನು ಸೂಚಿಸುವುದುaria-labelledby
• titleಗುಣಲಕ್ಷಣವನ್ನು ಒದಗಿಸುವುದು
• ಬಳಸಿಕೊಂಡು ಒಂದು ಅಂಶದಲ್ಲಿ ಪ್ರವೇಶಿಸಬಹುದಾದ ಹೆಸರನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ಹೊಂದಿಸುವುದುaria-label

ಇವುಗಳಲ್ಲಿ ಯಾವುದೂ ಇಲ್ಲದಿದ್ದರೆ, ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳು placeholderಆಟ್ರಿಬ್ಯೂಟ್ ಅನ್ನು ಪ್ರವೇಶಿಸಬಹುದಾದ ಹೆಸರು <input>ಮತ್ತು <textarea>ಅಂಶಗಳಿಗೆ ಫಾಲ್‌ಬ್ಯಾಕ್ ಆಗಿ ಬಳಸುವುದನ್ನು ಆಶ್ರಯಿಸಬಹುದು. ಈ ವಿಭಾಗದಲ್ಲಿನ ಉದಾಹರಣೆಗಳು ಕೆಲವು ಸೂಚಿಸಿದ, ಕೇಸ್-ನಿರ್ದಿಷ್ಟ ವಿಧಾನಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ.

ದೃಷ್ಟಿಗೋಚರವಾಗಿ ಮರೆಮಾಡಿದ ವಿಷಯವನ್ನು ಬಳಸುತ್ತಿರುವಾಗ ( .visually-hidden, aria-label, ಮತ್ತು placeholderಫಾರ್ಮ್ ಕ್ಷೇತ್ರವು ವಿಷಯವನ್ನು ಹೊಂದಿದ್ದರೆ ಒಮ್ಮೆ ಕಣ್ಮರೆಯಾಗುವ ವಿಷಯವೂ ಸಹ) ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನ ಬಳಕೆದಾರರಿಗೆ ಪ್ರಯೋಜನವನ್ನು ನೀಡುತ್ತದೆ, ಗೋಚರ ಲೇಬಲ್ ಪಠ್ಯದ ಕೊರತೆಯು ಕೆಲವು ಬಳಕೆದಾರರಿಗೆ ಇನ್ನೂ ಸಮಸ್ಯೆಯಾಗಿರಬಹುದು. ಕೆಲವು ರೀತಿಯ ಗೋಚರ ಲೇಬಲ್ ಸಾಮಾನ್ಯವಾಗಿ ಪ್ರವೇಶ ಮತ್ತು ಉಪಯುಕ್ತತೆಗಾಗಿ ಉತ್ತಮ ವಿಧಾನವಾಗಿದೆ.

ಸಾಸ್

ಅನೇಕ ಫಾರ್ಮ್ ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಸಾಮಾನ್ಯ ಮಟ್ಟದಲ್ಲಿ ಮರುಬಳಕೆ ಮಾಡಲು ಮತ್ತು ಪ್ರತ್ಯೇಕ ರೂಪದ ಘಟಕಗಳಿಂದ ವಿಸ್ತರಿಸಲು ಹೊಂದಿಸಲಾಗಿದೆ. ನೀವು ಇವುಗಳನ್ನು ಹೆಚ್ಚಾಗಿ $btn-input-*ಮತ್ತು $input-*ಅಸ್ಥಿರಗಳನ್ನು ನೋಡುತ್ತೀರಿ.

ಅಸ್ಥಿರ

$btn-input-*ವೇರಿಯೇಬಲ್‌ಗಳು ನಮ್ಮ ಬಟನ್‌ಗಳು ಮತ್ತು ನಮ್ಮ ಫಾರ್ಮ್ ಘಟಕಗಳ ನಡುವೆ ಜಾಗತಿಕ ಅಸ್ಥಿರಗಳನ್ನು ಹಂಚಿಕೊಳ್ಳಲಾಗಿದೆ . ಇತರ ಘಟಕ-ನಿರ್ದಿಷ್ಟ ಅಸ್ಥಿರಗಳಿಗೆ ಮೌಲ್ಯಗಳಾಗಿ ಮರುಹೊಂದಿಸಲಾದ ಇವುಗಳನ್ನು ನೀವು ಕಾಣುತ್ತೀರಿ.

$input-btn-padding-y:         .375rem;
$input-btn-padding-x:         .75rem;
$input-btn-font-family:       null;
$input-btn-font-size:         $font-size-base;
$input-btn-line-height:       $line-height-base;

$input-btn-focus-width:         .25rem;
$input-btn-focus-color-opacity: .25;
$input-btn-focus-color:         rgba($component-active-bg, $input-btn-focus-color-opacity);
$input-btn-focus-blur:          0;
$input-btn-focus-box-shadow:    0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color;

$input-btn-padding-y-sm:      .25rem;
$input-btn-padding-x-sm:      .5rem;
$input-btn-font-size-sm:      $font-size-sm;

$input-btn-padding-y-lg:      .5rem;
$input-btn-padding-x-lg:      1rem;
$input-btn-font-size-lg:      $font-size-lg;

$input-btn-border-width:      $border-width;