Bootstrap 5 ਫਾਰਮ

ਸਟੈਕਡ ਫਾਰਮ

ਸਾਰੇ .form-control ਕਲਾਸ ਵਾਲੇ <input> ਅਤੇ <textarea> ਇਲੈਕਟ੍ਰੌਨਿਕ ਫਾਰਮ ਸਟਾਈਲ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਨ:

ਉਦਾਹਰਣ

<form action="/action_page.php">
  <div class="mb-3 mt-3">
    <label for="email" class="form-label">ਈਮੇਲ：</label>
    <input type="email" class="form-control" id="email" placeholder="ਪ੍ਰਸਤਾਵਿਤ ਈਮੇਲ ਠਿਕਾਣ" name="email">
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">ਪਾਸਵਰਡ:</label>
    <input type="password" class="form-control" id="pwd" placeholder="ਪਾਸਵਰਡ ਇਨਪੁਟ ਕਰੋ" name="pswd">
  </div>
  <div class="form-check mb-3">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember"> ਯਾਦ ਰੱਖੋ
    </label>
  </div>
  <button type="submit" class="btn btn-primary">ਸੰਤੋਖ ਦੇਣਾ</button>
</form>

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

ਇਲਾਵਾ ਤੁਹਾਨੂੰ ਧਿਆਨ ਦੇਣਾ ਹੈ ਕਿ ਅਸੀਂ ਹਰ ਲੇਬਲ ਐਲੀਮੈਂਟ ਲਈ .form-label ਕਲਾਸ ਦੇ ਰਾਹੀਂ ਸਹੀ ਫਿਲਟਰਿੰਗ ਲਈ。

ਚੈੱਕ ਬਕਸ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਮਾਰਕਰਸ ਹਨ।ਉਹ ਸੈਟ ਕੀਤੇ ਗਏ ਹਨ .form-check ਕਲਾਸ ਦੇ ਕੰਟੇਨਰ ਐਲੀਮੈਂਟ ਦੇ ਚੱਕਰ ਵਿੱਚ ਘੇਰਿਆ ਜਾਂਦਾ ਹੈ।label ਸੈਟਿੰਗ .form-check-label ਕਲਾਸ ਦਾ ਉਪਯੋਗ ਕਰੋ, ਜਦਕਿ ਚੈੱਕ ਬਕਸ ਅਤੇ ਰੇਡੀਓ ਬਟਨ ਨੂੰ .form-check-input。

Textarea

ਉਦਾਹਰਣ

<label for="comment">ਕਮੇਂਟ:</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

ਫਾਰਮ ਰੋਜ਼ / ਗ੍ਰਿੱਡ (ਇਨਲਾਈਨ ਫਾਰਮ)

ਜੇਕਰ ਤੁਸੀਂ ਫਾਰਮ ਐਲੀਮੈਂਟਸ ਨੂੰ ਬਾਰੀਕੇ ਵਿੱਚ ਦਿਖਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ .row ਅਤੇ .col：

ਉਦਾਹਰਣ

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="ਈਮੇਲ ਐਡਰੈੱਸ ਇਨਪੁਟ ਕਰੋ" name="email">
    </div>
    <div class="col">
      <input type="password" class="form-control" placeholder="ਪਾਸਵਰਡ ਇਨਪੁਟ ਕਰੋ" name="pswd">
    </div>
  </div>
</form>

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

ਤੁਸੀਂ ਕਿਉਂਕਿ ਹੋਵੇਗੇ Bootstrap ਗ੍ਰਿੱਡ ਪੰਨੇ ਵਿੱਚ ਸਿੱਖੇ ਗਏ ਕੋਲਮ ਅਤੇ ਰੋਜ਼ਾਂ ਬਾਰੇ ਹੋਰ ਸਮਾਚਾਰ ਮਿਲੇ

ਫਾਰਮ ਕੰਟਰੋਲ ਸਾਈਜ਼

ਤੁਸੀਂ ਵਰਤ ਸਕਦੇ ਹੋ .form-control-lg ਜਾਂ .form-control-sm ਬਦਲੋ .form-control ਇਨਪੁਟ ਕੰਟਰੋਲ ਦਾ ਸਾਈਜ਼:

ਉਦਾਹਰਣ

<input type="text" class="form-control form-control-lg" placeholder="ਵੱਡੇ ਇਨਪੁਟ ਕੰਟਰੋਲ">
<input type="text" class="form-control" placeholder="ਆਮ ਇਨਪੁਟ ਕੰਟਰੋਲ">
<input type="text" class="form-control form-control-sm" placeholder="ਛੋਟੇ ਇਨਪੁਟ ਕੰਟਰੋਲ">

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

ਨਾਬਾਲਗ ਅਤੇ ਪੜ੍ਹੇ ਜਾਣਯੋਗ

disabled ਅਤੇ/ਜਾਂ readonly ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨਾਲ ਇਨਪੁਟ ਫੀਲਡ ਨੂੰ ਨਾਬਾਲਗ ਕਰੋ:

ਉਦਾਹਰਣ

<input type="text" class="form-control" placeholder="ਆਮ ਇਨਪੁਟ ਕੰਟਰੋਲ">
<input type="text" class="form-control" placeholder="ਨਾਬਾਲਗ ਇਨਪੁਟ ਕੰਟਰੋਲ" disabled>
<input type="text" class="form-control" placeholder="ਪੜ੍ਹੇ ਜਾਣਯੋਗ ਇਨਪੁਟ ਕੰਟਰੋਲ" readonly>

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

ਸਿਰਫ ਟੈਕਸਟ ਇਨਪੁਟ

ਵਰਤੋਂ ਕਰੋ .form-control-plaintext ਬੋਰਡਰ ਰਹਿਤ ਇਨਪੁਟ ਫੀਲਡ ਦੇ ਸਟਾਈਲ ਨੂੰ ਸੈਟ ਕਰਨ ਲਈ ਵਰਤੋਂ ਕਰੋ ਪਰ ਉਚਿਤ ਬਾਹਰੀ ਅਤੇ ਅੰਦਰੂਨੀ ਮਾਰਜਿਨ ਰੱਖੋ:

ਉਦਾਹਰਣ

<input type="text" class="form-control-plaintext" placeholder="ਸਿਰਫ ਟੈਕਸਟ ਇਨਪੁਟ">
<input type="text" class="form-control" placeholder="ਆਮ ਇਨਪੁਟ ਕੰਟਰੋਲ">

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ

ਚੋਣਕਾਰ

type="color" ਦੇ ਇਨਪੁਟ ਸਟਾਈਲ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਸੈਟ ਕਰਨ ਲਈ ਵਰਤੋਂ ਕਰੋ .form-control-color ਵਰਗ:

ਉਦਾਹਰਣ

<input type="color" class="form-control form-control-color" value="#CCCCCC">

ਆਪਣੇ ਅਨੁਸਾਰ ਕਰੋ