ფორმები

მიმოხილვა

Bootstrap-ის ფორმის კონტროლი აფართოებს ჩვენი გადატვირთული ფორმის სტილებს კლასებით. გამოიყენეთ ეს კლასები, რათა აირჩიოთ მათი მორგებული დისპლეები ბრაუზერებსა და მოწყობილობებში უფრო თანმიმდევრული რენდერისთვის.

დარწმუნდით, რომ გამოიყენეთ შესაბამისი 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>

Inline ტექსტს შეუძლია გამოიყენოს ნებისმიერი ტიპიური inline 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ატრიბუტი a-ს <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კონტენტიც კი, რომელიც ქრება მას შემდეგ, რაც ფორმის ველს აქვს შინაარსი) სასარგებლო იქნება დამხმარე ტექნოლოგიების მომხმარებლებისთვის, ხილული ლეიბლის ტექსტის ნაკლებობა მაინც პრობლემურია გარკვეული მომხმარებლებისთვის. ხილული ეტიკეტის ზოგიერთი ფორმა ზოგადად საუკეთესო მიდგომაა, როგორც ხელმისაწვდომობის, ისე გამოყენებადობის თვალსაზრისით.

სას

მრავალი ფორმის ცვლადი დაყენებულია ზოგად დონეზე, რათა ხელახლა გამოიყენებოდეს და გაფართოვდეს ცალკეული ფორმის კომპონენტებით. თქვენ ნახავთ ამ ყველაზე ხშირად როგორც $btn-input-*და $input-*ცვლადებს.

ცვლადები

$btn-input-*ცვლადები არის გაზიარებული გლობალური ცვლადები ჩვენს ღილაკებსა და ჩვენი ფორმის კომპონენტებს შორის. თქვენ იხილავთ ამ ხშირად გადანაწილებულ მნიშვნელობებს სხვა კომპონენტის სპეციფიკურ ცვლადებს.

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