Тарҳ

Бо имконоти тарҳбандии формаи мо ба шаклҳои худ як сохтор диҳед - аз сатр то уфуқӣ то татбиқи шабакаи фармоишӣ.

Дар ин саҳифа

Шаклҳо

Ҳар як гурӯҳи майдонҳои форма бояд дар як <form>элемент ҷойгир бошад. Bootstrap услуби пешфарзро барои <form>элемент таъмин намекунад, аммо баъзе хусусиятҳои пурқуввати браузер мавҷуданд, ки бо нобаёнӣ таъмин карда мешаванд.

Дар шаклҳои браузер нав? Баррасии ҳуҷҷатҳои шакли MDN-ро барои шарҳи умумӣ ва рӯйхати пурраи атрибутҳои дастрас баррасӣ кунед.
<button>s дар доираи <form>пешфарз ба type="submit", бинобар ин кӯшиш кунед, ки мушаххас бошед ва ҳамеша як type.

Азбаски Bootstrap 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>

Шабакаи форма

Бо истифода аз синфҳои шабакаи мо шаклҳои мураккабтар сохтан мумкин аст. Инҳоро барои тарҳбандиҳои шакл истифода баред, ки сутунҳои сершумор, паҳнои гуногун ва имконоти ҳамоҳангсозии иловагиро талаб мекунанд. Тақозо мекунад, ки $enable-grid-classesтағирёбандаи Sass фаъол карда шавад (бо нобаёнӣ фаъол аст).

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>

Чуйборхо

Бо илова кардани синфҳои тағирдиҳандаи ҷӯйбор , шумо метавонед бар паҳнои ҷӯйбор ва инчунин самти блокро назорат кунед. Инчунин талаб мекунад, ки $enable-grid-classesтағирёбандаи Sass фаъол карда шавад (бо нобаёнӣ фаъол бошад).

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-*-*синфҳо барои муайян кардани паҳнои тамғакоғазҳо ва назорати худ, шаклҳои уфуқӣ бо шабака эҷод кунед . Боварӣ ҳосил кунед, ки ба s-и худ низ илова .col-form-labelкунед <label>, то онҳо амудӣ бо назорати шакли алоқаманди худ мутамарказ шаванд.

Баъзан, ба шумо лозим меояд, ки аз маржа ё утилитаҳои пуркунӣ истифода баред, то он ҳамоҳангсозии комилеро, ки ба шумо лозим аст, эҷод кунед. Масалан, мо padding-topтамғаи вурудоти радиоии stacked-ро хориҷ кардем, то хатти асоси матнро беҳтар мувофиқ созем.

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>s ё <legend>s худ барои дуруст риоя кардани андозаи .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ки дар дохили як .row. Онҳо паҳнои дастрасро дар байни онҳо баробар тақсим мекунанд. Шумо инчунин метавонед як зермаҷмӯи сутунҳои худро интихоб кунед, то ҷойгоҳи бештар ё камтарро ишғол кунад, дар ҳоле ки боқимондаҳо .colбоқимондаро бо синфҳои мушаххаси сутунҳо ба монанди .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>

Шаклҳои inline

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