ਫਾਰਮ

ਸੰਖੇਪ ਜਾਣਕਾਰੀ

ਬੂਟਸਟਰੈਪ ਦੇ ਫਾਰਮ ਨਿਯੰਤਰਣ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਸਾਡੇ ਰੀਬੂਟ ਕੀਤੇ ਫਾਰਮ ਸਟਾਈਲ 'ਤੇ ਫੈਲਦੇ ਹਨ। ਬ੍ਰਾਊਜ਼ਰਾਂ ਅਤੇ ਡਿਵਾਈਸਾਂ ਵਿੱਚ ਵਧੇਰੇ ਇਕਸਾਰ ਰੈਂਡਰਿੰਗ ਲਈ ਉਹਨਾਂ ਦੇ ਅਨੁਕੂਲਿਤ ਡਿਸਪਲੇ ਨੂੰ ਚੁਣਨ ਲਈ ਇਹਨਾਂ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।

ਨਵੇਂ ਇਨਪੁਟ ਨਿਯੰਤਰਣ ਜਿਵੇਂ ਕਿ ਈਮੇਲ ਤਸਦੀਕ, ਨੰਬਰ ਚੋਣ, ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਦਾ ਲਾਭ ਲੈਣ ਲਈ 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>

ਅੰਦਰਲੇ ਸਾਰੇ ਨਿਯੰਤਰਣਾਂ ਨੂੰ ਅਯੋਗ ਕਰਨ disabledਲਈ a ਵਿੱਚ ਵਿਸ਼ੇਸ਼ਤਾ ਸ਼ਾਮਲ ਕਰੋ । <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;