मुख्य सामग्री पर जाएँ docs नेविगेशनं प्रति गच्छतु
Check
in English

प्रारूपं

अस्माकं प्रपत्रविन्यासविकल्पैः सह स्वस्य प्रपत्रेभ्यः किञ्चित् संरचनां ददातु-अन्तर्रेखातः क्षैतिजपर्यन्तं कस्टम् ग्रिड् कार्यान्वयनम् ।

इस पृष्ठ पर

रूपाणि

रूपक्षेत्राणां प्रत्येकं समूहः एकस्मिन् <form>तत्त्वे निवसतु। Bootstrap इत्यनेन तत्त्वस्य कृते पूर्वनिर्धारितं स्टाइलिंग् न प्रदत्तं <form>, परन्तु केचन शक्तिशालिनः ब्राउजर्-विशेषताः सन्ति ये पूर्वनिर्धारितरूपेण प्रदत्ताः सन्ति ।

  • ब्राउज़र-प्रपत्रेषु नूतनम्? उपलब्धविशेषतानां अवलोकनस्य सम्पूर्णसूच्यर्थं च MDN form docs इत्यस्य समीक्षां कर्तुं विचारयन्तु ।
  • <button>s within a <form>default to type="submit", अतः विशिष्टः भवितुं प्रयतस्व तथा सर्वदा a type.

यतः Bootstrap प्रवर्तते display: blockतथा च width: 100%अस्माकं प्रायः सर्वेषु form controls मध्ये, forms पूर्वनिर्धारितरूपेण vertically stack करिष्यन्ति । प्रतिरूपाधारेण एतत् विन्यासं परिवर्तयितुं अतिरिक्तवर्गाणां उपयोगः कर्तुं शक्यते ।

उपयोगिताएँ

रूपेषु किञ्चित् संरचनां योजयितुं मार्जिन-उपयोगिताः सर्वाधिकं सुलभाः उपायाः सन्ति । ते लेबल्, नियन्त्रणानि, वैकल्पिकरूपपाठः, रूपसत्यापनसन्देशप्रसारणं च मूलभूतसमूहीकरणं प्रदान्ति । वयं उपयोगितासु लम्बितुं अनुशंसयामः 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>

नालिकानि

By adding gutter modifier classes , भवन्तः gutter width इत्यस्य उपरि नियन्त्रणं कर्तुं शक्नुवन्ति तथा च inline तथा block direction इत्यत्र । अपि च $enable-grid-classesSass चर सक्षमीकरणम् आवश्यकम् (पूर्वनिर्धारितरूपेण चालू) ।

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भवतः <label>s मध्ये अपि योजयन्तु येन ते स्वसम्बद्धैः रूपनियन्त्रणैः सह लम्बवत् केन्द्रीकृताः भवन्ति ।

कदाचित्, भवन्तः सम्भवतः मार्जिनस्य अथवा पैडिंग् उपयोगितानां उपयोगं कर्तुं शक्नुवन्ति यत् भवन्तः आवश्यकं तत् सम्यक् संरेखणं निर्मातुं शक्नुवन्ति । उदाहरणार्थं, वयं 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>

क्षैतिज रूप लेबल आकारीकरण

तथा . .col-form-label-sm_ .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>

स्तम्भ आकारीकरणम्

यथा पूर्वोदाहरणेषु दर्शितं, अस्माकं जालप्रणाली भवन्तं a मध्ये किमपि संख्यां .cols स्थापयितुं शक्नोति .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>

स्वतः आकारीकरणम्

अधोलिखितं उदाहरणं सामग्रीं लम्बवत् केन्द्रीकृत्य flexbox उपयोगितायाः उपयोगं करोति तथा च परिवर्तयति .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-*प्रतिक्रियाशीलं क्षैतिजविन्यासं निर्मातुं वर्गाणां उपयोगं कुर्वन्तु । By adding gutter modifier classes , अस्माकं क्षैतिज-ऊर्ध्वाधर-दिशासु gutters भविष्यन्ति । संकीर्णमोबाइलदृश्यपोर्ट्स् इत्यत्र, the .col-12helps stack the form controls and more. The .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>