Формалар

Гомуми күзәтү

Bootstrap формасы белән идарә итү класслар белән Rebooted форма стильләрендә киңәя. Браузерлар һәм җайланмалар арасында эзлекле күрсәтү өчен, бу классларны кулланыгыз.

Электрон почта тикшерүе, номер сайлау һ.б. кебек яңа кертү контроллерыннан файдалану өчен type, барлык керемнәрдә тиешле атрибутны кулланыгыз (мәсәлән, emailэлектрон почта адресы яки санлы мәгълүмат өчен).number

Bootstrap формасының стильләрен күрсәтү өчен тиз мисал. Кирәкле класслар, форма макеты һәм башкалар турында документлар өчен укуны дәвам итегез.

<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атрибутны өстәгез . <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эчтәлек, форма кыры булганнан соң юкка чыга) ярдәмче технология кулланучыларына файда китерәчәк, билгеле ярлык тексты булмау кайбер кулланучылар өчен проблемалы булырга мөмкин. Күренгән ярлыкның кайбер формасы, гадәттә, куллану өчен дә, куллану өчен дә иң яхшы ысул.

Сасс

Күпчелек форма үзгәрүчәннәре гомуми дәрәҗәдә куелган, аерым форма компонентлары белән кабат куллану һәм киңәйтү өчен. Сез моны еш $input-btn-*һәм $input-*үзгәрүчән итеп күрерсез.

Variзгәрешләр

$input-btn-*үзгәрүләр безнең төймәләр һәм форма компонентлары арасында глобаль үзгәрешләр. Сез аларны еш кына компонентка хас үзгәрүчәннәргә кыйммәт итеп билгеләячәксез.

$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;