ଫର୍ମଗୁଡିକ

ସମୀକ୍ଷା

କ୍ଲାସ୍ ସହିତ ଆମର ପୁନ bo ବୁଟ୍ ଫର୍ମ ଶ yles ଳୀରେ ବୁଟଷ୍ଟ୍ରାପ୍ ଫର୍ମ ନିୟନ୍ତ୍ରଣ ବିସ୍ତାର ହୁଏ | ବ୍ରାଉଜର୍ ଏବଂ ଡିଭାଇସ୍ ମଧ୍ୟରେ ଅଧିକ ସ୍ଥିର ରେଣ୍ଡରିଂ ପାଇଁ ସେମାନଙ୍କର କଷ୍ଟୋମାଇଜଡ୍ ପ୍ରଦର୍ଶନକୁ ଚୟନ କରିବାକୁ ଏହି ଶ୍ରେଣୀଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ |

ଇମେଲ ଯାଞ୍ଚ, ସଂଖ୍ୟା ଚୟନ, ଏବଂ ଅନ୍ୟାନ୍ୟ ନୂତନ ଇନପୁଟ୍ ନିୟନ୍ତ୍ରଣଗୁଡ଼ିକର ଲାଭ ଉଠାଇବା ପାଇଁ ସମସ୍ତ ଇନପୁଟ୍ ଉପରେ ଏକ ଉପଯୁକ୍ତ ଗୁଣ ବ୍ୟବହାର କରିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ type(ଉଦାହରଣ ସ୍ୱରୂପ, emailଇମେଲ୍ ଠିକଣା ପାଇଁ କିମ୍ବା ସାଂଖ୍ୟିକ ସୂଚନା ପାଇଁ) |number

ବୁଟଷ୍ଟ୍ରାପ୍ ର ଫର୍ମ ଶ yles ଳୀ ପ୍ରଦର୍ଶନ କରିବାକୁ ଏଠାରେ ଏକ ଶୀଘ୍ର ଉଦାହରଣ | ଆବଶ୍ୟକ ଶ୍ରେଣୀ, ଫର୍ମ ଲେଆଉଟ୍, ଏବଂ ଅଧିକ ଉପରେ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ପାଇଁ ପ reading ଼ନ୍ତୁ |

<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>

ଇନଲାଇନ୍ ଟେକ୍ସଟ୍ ଯେକ any ଣସି ସାଧାରଣ ଇନଲାଇନ 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>

ଭିତରେ ଥିବା ସମସ୍ତ ନିୟନ୍ତ୍ରଣକୁ ଅକ୍ଷମ କରିବାକୁ disabledଆଟ୍ରିବ୍ୟୁଟ୍ ଯୋଡନ୍ତୁ | <fieldset>ବ୍ରାଉଜର୍ ଗୁଡିକ ସମସ୍ତ ଦେଶୀ ଫର୍ମ ନିୟନ୍ତ୍ରଣ ( <input>, <select>ଏବଂ <button>ଉପାଦାନଗୁଡିକ) <fieldset disabled>କୁ ଅକ୍ଷମ ଭାବରେ ବ୍ୟବହାର କରନ୍ତି, ଉଭୟ କୀବୋର୍ଡ୍ ଏବଂ ମାଉସ୍ ପାରସ୍ପରିକ କାର୍ଯ୍ୟକୁ ପ୍ରତିରୋଧ କରନ୍ତି |

ଯଦିଓ, ଯଦି ଆପଣଙ୍କର ଫର୍ମରେ କଷ୍ଟମ୍ ବଟନ୍ ପରି ଉପାଦାନଗୁଡିକ ମଧ୍ୟ ଅନ୍ତର୍ଭୂକ୍ତ ହୁଏ , ଏଗୁଡିକ କେବଳ ଏକ ଶ style ଳୀ <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>

ଅଭିଗମ୍ୟତା

ନିଶ୍ଚିତ କରନ୍ତୁ ଯେ ସମସ୍ତ ଫର୍ମ ନିୟନ୍ତ୍ରଣଗୁଡ଼ିକର ଏକ ଉପଯୁକ୍ତ ଉପଲବ୍ଧ ନାମ ଅଛି ଯାହା ଦ୍ their ାରା ସେମାନଙ୍କର ଉଦ୍ଦେଶ୍ୟ ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟାର ଉପଭୋକ୍ତାମାନଙ୍କ ନିକଟରେ ପହଞ୍ଚାଯାଇପାରିବ | ଏହାକୁ ହାସଲ କରିବାର ସରଳ ଉପାୟ ହେଉଛି ଏକ <label>ଉପାଦାନ ବ୍ୟବହାର କରିବା, କିମ୍ବା - ବଟନ୍ କ୍ଷେତ୍ରରେ - ବିଷୟବସ୍ତୁର ଏକ ଅଂଶ ଭାବରେ ଯଥେଷ୍ଟ ବର୍ଣ୍ଣନାକାରୀ ପାଠ୍ୟ ଅନ୍ତର୍ଭୂକ୍ତ କରିବା <button>...</button>|

ପରିସ୍ଥିତି ପାଇଁ ଯେଉଁଠାରେ ଏକ ଦୃଶ୍ୟମାନ କିମ୍ବା ଉପଯୁକ୍ତ ପାଠ୍ୟ ବିଷୟବସ୍ତୁ ଅନ୍ତର୍ଭୂକ୍ତ କରିବା ସମ୍ଭବ ନୁହେଁ <label>, ତଥାପି ଏକ ଉପଲବ୍ଧ ନାମ ପ୍ରଦାନ କରିବାର ବିକଳ୍ପ ଉପାୟ ଅଛି, ଯେପରିକି:

• <label>.visually-hiddenଉପାଦାନଗୁଡିକ ଶ୍ରେଣୀ ବ୍ୟବହାର କରି ଲୁକ୍କାୟିତ |
• ଏକ ବିଦ୍ୟମାନ ଉପାଦାନକୁ ସୂଚାଇଥାଏ ଯାହା ବ୍ୟବହାର କରି ଏକ ଲେବଲ୍ ଭାବରେ କାର୍ଯ୍ୟ କରିପାରିବ |aria-labelledby
• ଏକ titleଗୁଣ ପ୍ରଦାନ
• ବ୍ୟବହାର କରୁଥିବା ଏକ ଉପାଦାନରେ ଉପଲବ୍ଧ ନାମକୁ ସ୍ପଷ୍ଟ ଭାବରେ ସେଟିଂ କରନ୍ତୁ |aria-label

ଯଦି ଏଥିରୁ କ none ଣସିଟି ଉପସ୍ଥିତ ନଥାଏ, ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ଆକ୍ସେସିବଲ୍ ନାମ ଏବଂ ଉପାଦାନଗୁଡ଼ିକ placeholderପାଇଁ ଗୁଣକୁ ଏକ ଫଲବ୍ୟାକ୍ ଭାବରେ ବ୍ୟବହାର କରିପାରେ | ଏହି ବିଭାଗର ଉଦାହରଣଗୁଡ଼ିକ କିଛି ପରାମର୍ଶିତ, କେସ୍-ନିର୍ଦ୍ଦିଷ୍ଟ ଆଭିମୁଖ୍ୟ ପ୍ରଦାନ କରେ |<input><textarea>

ଭିଜୁଆଲ୍ ଲୁକ୍କାୟିତ ବିଷୟବସ୍ତୁ ବ୍ୟବହାର କରିବାବେଳେ ( .visually-hidden, aria-labelଏବଂ ଏପରିକି placeholderବିଷୟବସ୍ତୁ, ଯାହା ଏକ ଫର୍ମ ଫିଲ୍ଡର ବିଷୟବସ୍ତୁ ଥରେ ଅଦୃଶ୍ୟ ହୁଏ) ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା ଉପଭୋକ୍ତାଙ୍କୁ ଲାଭଦାୟକ କରିବ, ଦୃଶ୍ୟମାନ ଲେବଲ୍ ପାଠ୍ୟର ଅଭାବ କିଛି ଉପଭୋକ୍ତାମାନଙ୍କ ପାଇଁ ସମସ୍ୟା ହୋଇପାରେ | ଦୃଶ୍ୟମାନ ଲେବଲ୍ ର କିଛି ଫର୍ମ ସାଧାରଣତ the ସର୍ବୋତ୍ତମ ଉପାୟ, ଉଭୟ ଉପଲବ୍ଧତା ଏବଂ ଉପଯୋଗିତା ପାଇଁ |

ସାସ୍ |

ଅନେକ ଫର୍ମ ଭେରିଏବଲ୍ ଗୁଡିକ ସାଧାରଣ ସ୍ତରରେ ପୁନ set ବ୍ୟବହାର ଏବଂ ବ୍ୟକ୍ତିଗତ ଫର୍ମ ଉପାଦାନଗୁଡ଼ିକ ଦ୍ୱାରା ବିସ୍ତାରିତ ହେବା ପାଇଁ ସେଟ୍ ହୋଇଛି | ଆପଣ ଏହାକୁ ପ୍ରାୟତ as $input-btn-*ଏବଂ $input-*ଭେରିଏବଲ୍ ଭାବରେ ଦେଖିବେ |

ଭେରିଏବଲ୍ |

$input-btn-*ଭେରିଏବଲ୍ ଗୁଡିକ ଆମର ବଟନ୍ ଏବଂ ଆମର ଫର୍ମ ଉପାଦାନଗୁଡ଼ିକ ମଧ୍ୟରେ ଗ୍ଲୋବାଲ୍ ଭେରିଏବଲ୍ ଗୁଡିକ ଅଂଶୀଦାର | ଅନ୍ୟାନ୍ୟ ଉପାଦାନ-ନିର୍ଦ୍ଦିଷ୍ଟ ଭେରିଏବଲ୍ ପାଇଁ ମୂଲ୍ୟ ଭାବରେ ତୁମେ ବାରମ୍ବାର ପୁନ ass ନ୍ୟସ୍ତ ହେବ |

$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;