ਮੁੱਖ ਸਮੱਗਰੀ ਤੇ ਜਾਓ ਡੌਕਸ ਨੈਵੀਗੇਸ਼ਨ 'ਤੇ ਜਾਓ
Check
in English

ਖਾਕਾ

ਸਾਡੇ ਫਾਰਮ ਲੇਆਉਟ ਵਿਕਲਪਾਂ ਦੇ ਨਾਲ-ਇਨਲਾਈਨ ਤੋਂ ਲੈ ਕੇ ਹਰੀਜੱਟਲ ਤੱਕ ਕਸਟਮ ਗਰਿੱਡ ਲਾਗੂਕਰਨ ਤੱਕ-ਆਪਣੇ ਫਾਰਮਾਂ ਨੂੰ ਕੁਝ ਢਾਂਚਾ ਦਿਓ।

ਫਾਰਮ

ਫਾਰਮ ਖੇਤਰਾਂ ਦੇ ਹਰੇਕ ਸਮੂਹ ਨੂੰ ਇੱਕ <form>ਤੱਤ ਵਿੱਚ ਰਹਿਣਾ ਚਾਹੀਦਾ ਹੈ। ਬੂਟਸਟਰੈਪ ਤੱਤ ਲਈ ਕੋਈ ਡਿਫੌਲਟ ਸਟਾਈਲਿੰਗ ਪ੍ਰਦਾਨ ਨਹੀਂ ਕਰਦਾ <form>, ਪਰ ਕੁਝ ਸ਼ਕਤੀਸ਼ਾਲੀ ਬ੍ਰਾਊਜ਼ਰ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਹਨ ਜੋ ਡਿਫੌਲਟ ਰੂਪ ਵਿੱਚ ਪ੍ਰਦਾਨ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ।

  • ਬ੍ਰਾਊਜ਼ਰ ਫਾਰਮ ਲਈ ਨਵੇਂ? ਇੱਕ ਸੰਖੇਪ ਜਾਣਕਾਰੀ ਅਤੇ ਉਪਲਬਧ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਪੂਰੀ ਸੂਚੀ ਲਈ MDN ਫਾਰਮ ਦਸਤਾਵੇਜ਼ਾਂ ਦੀ ਸਮੀਖਿਆ ਕਰਨ 'ਤੇ ਵਿਚਾਰ ਕਰੋ ।
  • <button><form>ਦੇ ਡਿਫੌਲਟ ਦੇ ਅੰਦਰ ਹੈ type="submit", ਇਸ ਲਈ ਖਾਸ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ ਅਤੇ ਹਮੇਸ਼ਾ ਇੱਕ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ type

ਕਿਉਂਕਿ ਬੂਟਸਟਰੈਪ ਲਾਗੂ ਹੁੰਦਾ ਹੈ display: blockਅਤੇ width: 100%ਸਾਡੇ ਲਗਭਗ ਸਾਰੇ ਫਾਰਮ ਨਿਯੰਤਰਣਾਂ 'ਤੇ, ਫਾਰਮ ਡਿਫੌਲਟ ਤੌਰ 'ਤੇ ਵਰਟੀਕਲ ਸਟੈਕ ਹੋਣਗੇ। ਪ੍ਰਤੀ-ਫਾਰਮ ਦੇ ਆਧਾਰ 'ਤੇ ਇਸ ਲੇਆਉਟ ਨੂੰ ਬਦਲਣ ਲਈ ਵਾਧੂ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ।

ਸਹੂਲਤ

ਮਾਰਜਿਨ ਉਪਯੋਗਤਾਵਾਂ ਫਾਰਮਾਂ ਵਿੱਚ ਕੁਝ ਢਾਂਚੇ ਨੂੰ ਜੋੜਨ ਦਾ ਸਭ ਤੋਂ ਆਸਾਨ ਤਰੀਕਾ ਹੈ। ਉਹ ਲੇਬਲਾਂ, ਨਿਯੰਤਰਣਾਂ, ਵਿਕਲਪਿਕ ਫਾਰਮ ਟੈਕਸਟ, ਅਤੇ ਫਾਰਮ ਪ੍ਰਮਾਣਿਕਤਾ ਮੈਸੇਜਿੰਗ ਦਾ ਮੁਢਲਾ ਸਮੂਹ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ। ਅਸੀਂ ਉਪਯੋਗਤਾਵਾਂ ਨਾਲ ਜੁੜੇ ਰਹਿਣ margin-bottom, ਅਤੇ ਇਕਸਾਰਤਾ ਲਈ ਪੂਰੇ ਫਾਰਮ ਵਿੱਚ ਇੱਕ ਦਿਸ਼ਾ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਸਿਫਾਰਸ਼ ਕਰਦੇ ਹਾਂ।

<fieldset>s, <div>s, ਜਾਂ ਲਗਭਗ ਕਿਸੇ ਹੋਰ ਤੱਤ ਦੇ ਨਾਲ, ਆਪਣੀ ਪਸੰਦ ਦੇ ਰੂਪ ਵਿੱਚ ਆਪਣੇ ਫਾਰਮ ਬਣਾਉਣ ਲਈ ਬੇਝਿਜਕ ਮਹਿਸੂਸ ਕਰੋ ।

html
<div class="mb-3">
  <label for="formGroupExampleInput" class="form-label">Example label</label>
  <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
</div>
<div class="mb-3">
  <label for="formGroupExampleInput2" class="form-label">Another label</label>
  <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
</div>

ਫਾਰਮ ਗਰਿੱਡ

ਸਾਡੀਆਂ ਗਰਿੱਡ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਵਧੇਰੇ ਗੁੰਝਲਦਾਰ ਫਾਰਮ ਬਣਾਏ ਜਾ ਸਕਦੇ ਹਨ। ਇਹਨਾਂ ਨੂੰ ਫਾਰਮ ਲੇਆਉਟ ਲਈ ਵਰਤੋ ਜਿਹਨਾਂ ਲਈ ਕਈ ਕਾਲਮਾਂ, ਵੱਖ-ਵੱਖ ਚੌੜਾਈਆਂ, ਅਤੇ ਵਾਧੂ ਅਲਾਈਨਮੈਂਟ ਵਿਕਲਪਾਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। Sass ਵੇਰੀਏਬਲ ਨੂੰ ਸਮਰੱਥ ਕਰਨ ਦੀ ਲੋੜ$enable-grid-classes ਹੈ (ਮੂਲ ਰੂਪ ਵਿੱਚ ਚਾਲੂ)।

html
<div class="row">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  </div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  </div>
</div>

ਗਟਰਸ

ਗਟਰ ਮੋਡੀਫਾਇਰ ਕਲਾਸਾਂ ਨੂੰ ਜੋੜ ਕੇ , ਤੁਸੀਂ ਗਟਰ ਦੀ ਚੌੜਾਈ ਦੇ ਨਾਲ-ਨਾਲ ਬਲਾਕ ਦਿਸ਼ਾ ਦੇ ਨਾਲ ਨਾਲ ਇਨਲਾਈਨ 'ਤੇ ਵੀ ਨਿਯੰਤਰਣ ਪਾ ਸਕਦੇ ਹੋ। Sass ਵੇਰੀਏਬਲ ਨੂੰ ਸਮਰੱਥ ਕਰਨ ਦੀ ਵੀ ਲੋੜ$enable-grid-classes ਹੈ (ਮੂਲ ਰੂਪ ਵਿੱਚ ਚਾਲੂ)।

html
<div class="row g-3">
  <div class="col">
    <input type="text" class="form-control" placeholder="First name" aria-label="First name">
  </div>
  <div class="col">
    <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
  </div>
</div>

ਗਰਿੱਡ ਸਿਸਟਮ ਨਾਲ ਹੋਰ ਗੁੰਝਲਦਾਰ ਲੇਆਉਟ ਵੀ ਬਣਾਏ ਜਾ ਸਕਦੇ ਹਨ।

html
<form class="row g-3">
  <div class="col-md-6">
    <label for="inputEmail4" class="form-label">Email</label>
    <input type="email" class="form-control" id="inputEmail4">
  </div>
  <div class="col-md-6">
    <label for="inputPassword4" class="form-label">Password</label>
    <input type="password" class="form-control" id="inputPassword4">
  </div>
  <div class="col-12">
    <label for="inputAddress" class="form-label">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="col-12">
    <label for="inputAddress2" class="form-label">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="col-md-6">
    <label for="inputCity" class="form-label">City</label>
    <input type="text" class="form-control" id="inputCity">
  </div>
  <div class="col-md-4">
    <label for="inputState" class="form-label">State</label>
    <select id="inputState" class="form-select">
      <option selected>Choose...</option>
      <option>...</option>
    </select>
  </div>
  <div class="col-md-2">
    <label for="inputZip" class="form-label">Zip</label>
    <input type="text" class="form-control" id="inputZip">
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Sign in</button>
  </div>
</form>

ਖਿਤਿਜੀ ਰੂਪ

.rowਗਰੁੱਪ ਬਣਾਉਣ ਲਈ ਕਲਾਸ ਨੂੰ ਜੋੜ ਕੇ .col-*-*ਅਤੇ ਆਪਣੇ ਲੇਬਲਾਂ ਅਤੇ ਨਿਯੰਤਰਣਾਂ ਦੀ ਚੌੜਾਈ ਨੂੰ ਨਿਸ਼ਚਿਤ ਕਰਨ ਲਈ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਗਰਿੱਡ ਦੇ ਨਾਲ ਹਰੀਜੱਟਲ ਫਾਰਮ ਬਣਾਓ। .col-form-labelਆਪਣੇ s ਵਿੱਚ ਵੀ ਸ਼ਾਮਲ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ <label>ਤਾਂ ਜੋ ਉਹ ਉਹਨਾਂ ਦੇ ਸੰਬੰਧਿਤ ਫਾਰਮ ਨਿਯੰਤਰਣਾਂ ਨਾਲ ਲੰਬਕਾਰੀ ਤੌਰ 'ਤੇ ਕੇਂਦਰਿਤ ਹੋਣ।

ਕਦੇ-ਕਦੇ, ਤੁਹਾਨੂੰ ਲੋੜੀਂਦੇ ਸੰਪੂਰਣ ਅਲਾਈਨਮੈਂਟ ਬਣਾਉਣ ਲਈ ਹਾਸ਼ੀਏ ਜਾਂ ਪੈਡਿੰਗ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ। ਉਦਾਹਰਨ ਲਈ, ਅਸੀਂ padding-topਟੈਕਸਟ ਬੇਸਲਾਈਨ ਨੂੰ ਬਿਹਤਰ ਢੰਗ ਨਾਲ ਇਕਸਾਰ ਕਰਨ ਲਈ ਸਾਡੇ ਸਟੈਕ ਕੀਤੇ ਰੇਡੀਓ ਇਨਪੁਟਸ ਲੇਬਲ ਨੂੰ ਹਟਾ ਦਿੱਤਾ ਹੈ।

ਰੇਡੀਓ
html
<form>
  <div class="row mb-3">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="row mb-3">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="row mb-3">
    <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
        <label class="form-check-label" for="gridRadios1">
          First radio
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
        <label class="form-check-label" for="gridRadios2">
          Second radio
        </label>
      </div>
      <div class="form-check disabled">
        <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
        <label class="form-check-label" for="gridRadios3">
          Third disabled radio
        </label>
      </div>
    </div>
  </fieldset>
  <div class="row mb-3">
    <div class="col-sm-10 offset-sm-2">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

ਹਰੀਜ਼ੱਟਲ ਫਾਰਮ ਲੇਬਲ ਦਾ ਆਕਾਰ

ਅਤੇ ਦੇ ਆਕਾਰ ਦਾ ਸਹੀ ਢੰਗ ਨਾਲ ਪਾਲਣ ਕਰ��� ਲਈ ਆਪਣੇ s ਜਾਂ .col-form-label-sms ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ ।.col-form-label-lg<label><legend>.form-control-lg.form-control-sm

html
<div class="row mb-3">
  <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
  <div class="col-sm-10">
    <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
  </div>
</div>
<div class="row mb-3">
  <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
  <div class="col-sm-10">
    <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
  </div>
</div>
<div class="row">
  <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
  <div class="col-sm-10">
    <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
  </div>
</div>

ਕਾਲਮ ਦਾ ਆਕਾਰ

ਜਿਵੇਂ ਕਿ ਪਿਛਲੀਆਂ ਉਦਾਹਰਣਾਂ ਵਿੱਚ ਦਿਖਾਇਆ ਗਿਆ ਹੈ, ਸਾਡਾ ਗਰਿੱਡ ਸਿਸਟਮ ਤੁਹਾਨੂੰ .colਇੱਕ ਦੇ ਅੰਦਰ s ਦੀ ਕੋਈ ਵੀ ਸੰਖਿਆ ਰੱਖਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ .row। ਉਹ ਉਪਲਬਧ ਚੌੜਾਈ ਨੂੰ ਉਹਨਾਂ ਵਿਚਕਾਰ ਬਰਾਬਰ ਵੰਡਣਗੇ। ਤੁਸੀਂ ਵੱਧ ਜਾਂ ਘੱਟ ਥਾਂ ਲੈਣ ਲਈ ਆਪਣੇ ਕਾਲਮਾਂ ਦਾ ਇੱਕ ਸਬਸੈੱਟ ਵੀ ਚੁਣ ਸਕਦੇ ਹੋ, ਜਦੋਂ ਕਿ ਬਾਕੀ .cols ਬਾਕੀ ਨੂੰ ਬਰਾਬਰ ਵੰਡ ਸਕਦੇ ਹੋ, ਜਿਵੇਂ ਕਿ ਖਾਸ ਕਾਲਮ ਕਲਾਸਾਂ ਨਾਲ .col-sm-7

html
<div class="row g-3">
  <div class="col-sm-7">
    <input type="text" class="form-control" placeholder="City" aria-label="City">
  </div>
  <div class="col-sm">
    <input type="text" class="form-control" placeholder="State" aria-label="State">
  </div>
  <div class="col-sm">
    <input type="text" class="form-control" placeholder="Zip" aria-label="Zip">
  </div>
</div>

ਆਟੋ-ਸਾਈਜ਼ਿੰਗ

ਹੇਠਾਂ ਦਿੱਤੀ ਉਦਾਹਰਨ ਸਮੱਗਰੀ ਨੂੰ ਲੰਬਕਾਰੀ ਤੌਰ 'ਤੇ ਕੇਂਦਰਿਤ ਕਰਨ ਲਈ ਇੱਕ ਫਲੈਕਸਬਾਕਸ ਉਪਯੋਗਤਾ ਦੀ ਵਰਤੋਂ ਕਰਦੀ ਹੈ ਅਤੇ ਇਸ ਵਿੱਚ ਤਬਦੀਲੀਆਂ .colਕਰਦੀ ਹੈ .col-autoਤਾਂ ਜੋ ਤੁਹਾਡੇ ਕਾਲਮ ਲੋੜ ਅਨੁਸਾਰ ਹੀ ਜ਼ਿਆਦਾ ਥਾਂ ਲੈ ਸਕਣ। ਹੋਰ ਤਰੀਕੇ ਨਾਲ ਕਹੋ, ਕਾਲਮ ਦਾ ਆਕਾਰ ਸਮੱਗਰੀ ਦੇ ਆਧਾਰ 'ਤੇ ਹੁੰਦਾ ਹੈ।

@
html
<form class="row gy-2 gx-3 align-items-center">
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingInput">Name</label>
    <input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">
  </div>
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingInputGroup">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username">
    </div>
  </div>
  <div class="col-auto">
    <label class="visually-hidden" for="autoSizingSelect">Preference</label>
    <select class="form-select" id="autoSizingSelect">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
  <div class="col-auto">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="autoSizingCheck">
      <label class="form-check-label" for="autoSizingCheck">
        Remember me
      </label>
    </div>
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

ਤੁਸੀਂ ਫਿਰ ਇਸਨੂੰ ਆਕਾਰ-ਵਿਸ਼ੇਸ਼ ਕਾਲਮ ਕਲਾਸਾਂ ਦੇ ਨਾਲ ਇੱਕ ਵਾਰ ਫਿਰ ਰੀਮਿਕਸ ਕਰ ਸਕਦੇ ਹੋ।

@
html
<form class="row gx-3 gy-2 align-items-center">
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeInputName">Name</label>
    <input type="text" class="form-control" id="specificSizeInputName" placeholder="Jane Doe">
  </div>
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeInputGroupUsername">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username">
    </div>
  </div>
  <div class="col-sm-3">
    <label class="visually-hidden" for="specificSizeSelect">Preference</label>
    <select class="form-select" id="specificSizeSelect">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
  <div class="col-auto">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
      <label class="form-check-label" for="autoSizingCheck2">
        Remember me
      </label>
    </div>
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

ਇਨਲਾਈਨ ਫਾਰਮ

.row-cols-*ਜਵਾਬਦੇਹ ਹਰੀਜੱਟਲ ਲੇਆਉਟ ਬਣਾਉਣ ਲਈ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ । ਗਟਰ ਮੋਡੀਫਾਇਰ ਕਲਾਸਾਂ ਨੂੰ ਜੋੜ ਕੇ , ਸਾਡੇ ਕੋਲ ਹਰੀਜੱਟਲ ਅਤੇ ਵਰਟੀਕਲ ਦਿਸ਼ਾਵਾਂ ਵਿੱਚ ਗਟਰ ਹੋਣਗੇ। ਤੰਗ ਮੋਬਾਈਲ ਵਿਊਪੋਰਟਾਂ 'ਤੇ, .col-12ਫਾਰਮ ਨਿਯੰਤਰਣਾਂ ਅਤੇ ਹੋਰ ਚੀਜ਼ਾਂ ਨੂੰ ਸਟੈਕ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ। .align-items-centerਫ਼ਾਰਮ ਐਲੀਮੈਂਟਸ ਨੂੰ ਮੱਧ ਵਿੱਚ ਅਲਾਈਨ ਕਰਦਾ ਹੈ, ਅਲਾਈਨ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਬਣਾਉਂਦਾ ਹੈ .form-check

@
html
<form class="row row-cols-lg-auto g-3 align-items-center">
  <div class="col-12">
    <label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
    <div class="input-group">
      <div class="input-group-text">@</div>
      <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
    </div>
  </div>

  <div class="col-12">
    <label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
    <select class="form-select" id="inlineFormSelectPref">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>

  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="inlineFormCheck">
      <label class="form-check-label" for="inlineFormCheck">
        Remember me
      </label>
    </div>
  </div>

  <div class="col-12">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>