Source

ფორმები

ფორმის კონტროლის სტილის, განლაგების ვარიანტებისა და მორგებული კომპონენტების მაგალითები და გამოყენების ინსტრუქციები მრავალფეროვანი ფორმების შესაქმნელად.

მიმოხილვა

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

დარწმუნდით, რომ გამოიყენეთ შესაბამისი typeატრიბუტი ყველა შეყვანისთვის (მაგ., emailელფოსტის მისამართისთვის ან numberრიცხვითი ინფორმაციისთვის), რათა ისარგებლოთ შეყვანის უფრო ახალი კონტროლით, როგორიცაა ელფოსტის დადასტურება, ნომრის შერჩევა და სხვა.

აქ არის სწრაფი მაგალითი Bootstrap-ის ფორმის სტილის დემონსტრირებისთვის. განაგრძეთ კითხვა საჭირო კლასების დოკუმენტაციის, ფორმის განლაგების და სხვათა შესახებ.

ჩვენ არასოდეს გავუზიარებთ თქვენს ელფოსტას სხვას.
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="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>

ფორმის კონტროლი

ტექსტური ფორმის კონტროლი - როგორიცაა <input>s, <select>s და <textarea>s - სტილიზებულია .form-controlკლასთან ერთად. მოყვება სტილები ზოგადი გარეგნობის, ფოკუსირების მდგომარეობის, ზომისა და სხვა.

დარწმუნდით, რომ შეისწავლეთ ჩვენი მორგებული ფორმები შემდგომი სტილისთვის <select>.

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

ფაილის შეყვანისთვის, შეცვალეთ .form-control..form-control-file

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

გაზომვა

დააყენეთ სიმაღლეები კლასების გამოყენებით, როგორიცაა .form-control-lgდა .form-control-sm.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

Წაიკითხეთ მხოლოდ

დაამატეთ readonlyლოგიკური ატრიბუტი შეყვანაზე, რათა თავიდან აიცილოთ შეყვანის მნიშვნელობის შეცვლა. მხოლოდ წაკითხვადი შეყვანები უფრო მსუბუქია (ისევე, როგორც გამორთული შეყვანები), მაგრამ ინარჩუნებს სტანდარტულ კურსორს.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

მხოლოდ წაკითხვადი ტექსტი

თუ გსურთ, რომ <input readonly>ელემენტები თქვენს ფორმაში იყოს სტილიზებული, როგორც უბრალო ტექსტი, გამოიყენეთ .form-control-plaintextკლასი, რათა წაშალოთ ნაგულისხმევი ფორმის ველის სტილი და შეინარჩუნოთ სწორი მინდვრები და შიგთავსი.

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>
<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

ჩექმები და რადიოები

ნაგულისხმევი ყუთები და რადიოები გაუმჯობესებულია .form-check, ერთი კლასის დახმარებით ორივე შეყვანის ტიპისთვის , რომელიც აუმჯობესებს მათი HTML ელემენტების განლაგებას და ქცევას . მოსანიშნი ველები არის სიაში ერთი ან რამდენიმე ვარიანტის ასარჩევად, ხოლო რადიოები მრავალი ვარიანტიდან ერთის ასარჩევად.

გათიშული მოსანიშნი ველები და რადიოები მხარდაჭერილია, მაგრამ not-allowedკურსორის უზრუნველსაყოფად მშობლის გადასატანად <label>, თქვენ უნდა დაამატოთ disabledატრიბუტი .form-check-input. გამორთული ატრიბუტი გამოიყენებს უფრო ნათელ ფერს, რომელიც დაგეხმარებათ მიუთითოთ შეყვანის მდგომარეობა.

მოსანიშნი ველები და რადიოს გამოყენება შექმნილია HTML-ზე დაფუძნებული ფორმის ვალიდაციის მხარდასაჭერად და ლაკონური, ხელმისაწვდომი ლეიბლების უზრუნველსაყოფად. როგორც ასეთი, ჩვენი <input>s და <label>s არის ძმური ელემენტები, განსხვავებით <input>შიგნით <label>. ეს ოდნავ უფრო ვრცელია, რადგან თქვენ უნდა მიუთითოთ idდა forატრიბუტები <input>და <label>.

ნაგულისხმევი (დაწყობილი)

ნაგულისხმევად, ნებისმიერი რაოდენობის მოსანიშნი ველები და რადიოები, რომლებიც უშუალო და-ძმაა, იქნება ვერტიკალურად დაწყობილი და შესაბამისი ინტერვალით .form-check.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check disabled">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

Ხაზში

დააჯგუფეთ მოსანიშნი ველები ან რადიოები იმავე ჰორიზონტალურ მწკრივზე .form-check-inlineნებისმიერის დამატებით .form-check.

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

ეტიკეტების გარეშე

დაამატეთ .position-staticიმ შენატებს .form-check, რომლებსაც არ აქვთ ლეიბლის ტექსტი. დაიმახსოვრეთ, რომ კვლავ მიაწოდოთ ეტიკეტის რაიმე ფორმა დამხმარე ტექნოლოგიებისთვის (მაგალითად, გამოყენებით aria-label).

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>

განლაგება

მას შემდეგ, რაც Bootstrap გამოიყენება display: blockდა width: 100%თითქმის ყველა ჩვენი ფორმის კონტროლისთვის, ფორმები ნაგულისხმევად დაწყობილი იქნება ვერტიკალურად. დამატებითი კლასების გამოყენება შესაძლებელია ამ განლაგების ცვალებადობისთვის თითოეული ფორმის საფუძველზე.

ჩამოაყალიბეთ ჯგუფები

კლასი არის უმარტივესი .form-groupგზა ფორმებში გარკვეული სტრუქტურის დასამატებლად. ის უზრუნველყოფს მოქნილ კლასს, რომელიც ხელს უწყობს ეტიკეტების, კონტროლის, არჩევითი დახმარების ტექსტისა და ფორმის დადასტურების შეტყობინებების სწორად დაჯგუფებას. ნაგულისხმევად ის მხოლოდ ვრცელდება margin-bottom, მაგრამ .form-inlineსაჭიროების შემთხვევაში ირჩევს დამატებით სტილებს. გამოიყენეთ იგი <fieldset>s, <div>s ან თითქმის ნებისმიერი სხვა ელემენტით.

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </div>
</form>

ფორმის ბადე

უფრო რთული ფორმების აგება შესაძლებელია ჩვენი ბადის კლასების გამოყენებით. გამოიყენეთ ისინი ფორმის განლაგებისთვის, რომლებიც საჭიროებენ მრავალ სვეტს, განსხვავებულ სიგანეს და გასწორების დამატებით ვარიანტებს.

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

მწკრივის ჩამოყალიბება

თქვენ ასევე შეგიძლიათ შეცვალოთ ჩვენი სტანდარტული ბადის მწკრივის .rowვარიაცია .form-row, რომელიც უგულებელყოფს სვეტის ნაგულისხმევ ღარები უფრო მჭიდრო და კომპაქტური განლაგებისთვის.

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

უფრო რთული განლაგება ასევე შეიძლება შეიქმნას ბადის სისტემით.

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <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>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

ჰორიზონტალური ფორმა

შექმენით ჰორიზონტალური ფორმები ბადით .rowკლასის დამატებით ჯგუფების შესაქმნელად და .col-*-*კლასების გამოყენებით თქვენი ლეიბლებისა და კონტროლის სიგანის დასაზუსტებლად. დარწმუნდით, რომ დაამატეთ .col-form-labelთქვენს <label>s-ებსაც, რათა ისინი ვერტიკალურად იყოს ორიენტირებული მათთან ასოცირებულ ფორმებთან.

ხანდახან, შესაძლოა დაგჭირდეთ გამოიყენოთ ზღვრული ან ბალიშის უტილიტები, რათა შექმნათ თქვენთვის სასურველი სრულყოფილი გასწორება. მაგალითად, ჩვენ წავშალეთ padding-topჩვენს დაწყობილ რადიოს შეყვანის ეტიკეტი, რათა უკეთ გავასწოროთ ტექსტის საბაზისო ხაზი.

რადიოები
მოსანიშნი ველი
<form>
  <div class="form-group row">
    <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" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <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" placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <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>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <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>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>
ჰორიზონტალური ფორმის ეტიკეტის ზომა

დარწმუნდით, რომ გამოიყენოთ .col-form-label-smან .col-form-label-lgთქვენი <label>s ან <legend>s სწორად დაიცვას ზომა .form-control-lgდა .form-control-sm.

<form>
  <div class="form-group row">
    <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="form-group row">
    <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="form-group 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>
</form>

სვეტის ზომა

როგორც წინა მაგალითებშია ნაჩვენები, ჩვენი ბადის სისტემა საშუალებას გაძლევთ მოათავსოთ ნებისმიერი რიცხვი .cols-ში .rowან .form-row. ისინი თანაბრად გაყოფენ ხელმისაწვდომ სიგანეს მათ შორის. თქვენ ასევე შეგიძლიათ აირჩიოთ თქვენი სვეტების ქვეჯგუფი, რომ დაიკავოს მეტ-ნაკლებად სივრცე, ხოლო დანარჩენებმა .colთანაბრად გაყოთ დანარჩენი, სვეტების კონკრეტული კლასებით, როგორიცაა .col-7.

<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>

ავტომატური ზომა

ქვემოთ მოყვანილი მაგალითი იყენებს flexbox უტილიტას შიგთავსის ვერტიკალურად ცენტრისთვის და ცვლის .colისე .col-auto, რომ თქვენი სვეტები დაიკავონ მხოლოდ იმდენი სივრცე, რამდენიც საჭიროა. სხვაგვარად რომ ვთქვათ, სვეტი თავად ზომავს შიგთავსს.

@
<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <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 mb-2">Submit</button>
    </div>
  </div>
</form>

ამის შემდეგ შეგიძლიათ ხელახლა აურიოთ ეს სვეტის ზომის სპეციფიკური კლასებით.

@
<form>
  <div class="form-row align-items-center">
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputName">Name</label>
      <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
    </div>
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
      </div>
    </div>
    <div class="col-auto my-1">
      <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 my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

და რა თქმა უნდა , მხარდაჭერილია პერსონალური ფორმის კონტროლი .

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2" for="inlineFormCustomSelect">Preference</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <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 my-1">
      <div class="custom-control custom-checkbox mr-sm-2">
        <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
        <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

ჩართული ფორმები

გამოიყენეთ .form-inlineკლასი ეტიკეტების, ფორმის კონტროლისა და ღილაკების სერიის გამოსატანად ერთ ჰორიზონტალურ მწკრივზე. ფორმატის კონტროლი ხაზში მყოფ ფორმებში ოდნავ განსხვავდება მათი ნაგულისხმევი მდგომარეობიდან.

  • კონტროლი არის display: flex, არღვევს HTML-ის ნებისმიერ თეთრ სივრცეს და საშუალებას გაძლევთ უზრუნველყოთ გასწორების კონტროლი ინტერვალისა და flexbox უტილიტაებით .
  • კონტროლი და შეყვანის ჯგუფები იღებენ width: autoBootstrap-ის ნაგულისხმევის გადაფარვას width: 100%.
  • მართვის ღილაკები ჩნდება მხოლოდ ხედის პორტებში, რომელთა სიგანე მინიმუმ 576 პიქსელია , რათა მოხდეს მობილური მოწყობილობების ვიწრო ნახვის პორტები.

შეიძლება დაგჭირდეთ ხელით მიმართოთ ფორმის ცალკეული სამართავის სიგანე და გასწორება ინტერვალის უტილიტებთან (როგორც ნაჩვენებია ქვემოთ). და ბოლოს, დარწმუნდით, რომ ყოველთვის შეიყვანეთ <label>ფორმა თითოეულ კონტროლთან ერთად, მაშინაც კი, თუ მისი დამალვა გჭირდებათ ეკრანის წამკითხველი ვიზიტორებისგან .sr-only.

@
<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>

  <div class="form-check mb-2 mr-sm-2">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">
      Remember me
    </label>
  </div>

  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

მორგებული ფორმის კონტროლი და არჩევა ასევე მხარდაჭერილია.

<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlInline">
    <label class="custom-control-label" for="customControlInline">Remember my preference</label>
  </div>

  <button type="submit" class="btn btn-primary my-1">Submit</button>
</form>
ფარული ეტიკეტების ალტერნატივები

დამხმარე ტექნოლოგიები, როგორიცაა ეკრანის წამკითხველები, პრობლემები ექნებათ თქვენს ფორმებთან დაკავშირებით, თუ არ ჩაურთავთ ეტიკეტს ყველა შეყვანისთვის. ამ ხაზოვანი ფორმებისთვის შეგიძლიათ დაიმალოთ ეტიკეტები .sr-onlyკლასის გამოყენებით. არსებობს დამხმარე ტექნოლოგიებისთვის ეტიკეტის მიწოდების სხვა ალტერნატიული მეთოდები, როგორიცაა aria-label, aria-labelledbyან titleატრიბუტი. თუ არცერთი მათგანი არ არის, დამხმარე ტექნოლოგიებმა შეიძლება მიმართონ placeholderატრიბუტის გამოყენებას, თუ არსებობს, მაგრამ გაითვალისწინეთ, რომ placeholderეტიკეტირების სხვა მეთოდების შემცვლელად გამოყენება არ არის რეკომენდებული.

დახმარების ტექსტი

ბლოკის დონის დახმარების ტექსტი ფორმებში შეიძლება შეიქმნას გამოყენებით .form-text(ადრე ცნობილი როგორც .help-blockv3). Inline დახმარების ტექსტი შეიძლება მოქნილად განხორციელდეს ნებისმიერი inline HTML ელემენტისა და სასარგებლო კლასების გამოყენებით, როგორიცაა .text-muted.

დახმარების ტექსტის ასოცირება ფორმის კონტროლებთან

დახმარების ტექსტი აშკარად უნდა იყოს დაკავშირებული ფორმის კონტროლთან, რომელსაც ის ეხება aria-describedbyატრიბუტის გამოყენებით. ეს უზრუნველყოფს, რომ დამხმარე ტექნოლოგიები, როგორიცაა ეკრანის წამკითხველები, გამოაცხადებენ ამ დახმარების ტექსტს, როდესაც მომხმარებელი ფოკუსირებულია ან კონტროლზე შედის.

დამხმარე ტექსტის ქვემოთ შენატანი შეიძლება იყოს სტილიზებული .form-text. ეს კლასი მოიცავს display: blockდა ამატებს ზედა ზღვარს ზემოაღნიშნული შენატანებიდან მარტივი დაშორებისთვის.

თქვენი პაროლი უნდა შედგებოდეს 8-20 სიმბოლოსგან, შეიცავდეს ასოებსა და ციფრებს და არ უნდა შეიც���ვდეს ინტერვალებს, სპეციალურ სიმბოლოებს ან ემოციებს.
<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

Inline ტექსტს შეუძლია გამოიყენოს ნებისმიერი ტიპიური inline HTML ელემენტი (იქნება ეს <small>, <span>, ან რაიმე სხვა) არაფრით მეტი სასარგებლო კლასით.

უნდა იყოს 8-20 სიმბოლო.
<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">Password</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

გამორთული ფორმები

დაამატეთ disabledლოგიკური ატრიბუტი შეყვანაზე, რათა თავიდან აიცილოთ მომხმარებლის ურთიერთქმედება და უფრო მსუბუქი გამოჩნდეს.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

დაამატეთ disabledატრიბუტი a-ს <fieldset>, რათა გამორთოთ ყველა კონტროლი შიგნით.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <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>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>
გაფრთხილება წამყვანებით

ნაგულისხმევად, ბრაუზერები განიხილავენ ყველა ძირითადი ფორმის კონტროლს ( <input>, <select>და <button>ელემენტებს) შიგნით, <fieldset disabled>როგორც გათიშულად, რაც ხელს უშლის მათზე კლავიატურისა და მაუსის ურთიერთქმედებას. თუმცა, თუ თქვენი ფორმა ასევე შეიცავს <a ... class="btn btn-*">ელემენტებს, მათ მიენიჭებათ მხოლოდ pointer-events: none. როგორც აღინიშნა ღილაკების გამორთული მდგომარეობის შესახებ განყოფილებაში (და კონკრეტულად წამყვანი ელემენტების ქვეგანყოფილებაში), ეს CSS თვისება ჯერ არ არის სტანდარტიზებული და არ არის სრულად მხარდაჭერილი Opera 18-ში და ქვემოთ, ან Internet Explorer 10-ში და გაიმარჯვა. არ აიცილოთ კლავიატურის მომხმარებლებს ამ ბმულების ფოკუსირება ან გააქტიურება. ასე რომ, რომ იყოთ უსაფრთხო, გამოიყენეთ მორგებული JavaScript, რომ გამორთოთ ასეთი ბმულები.

ჯვარედინი ბრაუზერის თავსებადობა

მიუხედავად იმისა, რომ Bootstrap გამოიყენებს ამ სტილებს ყველა ბრაუზერში, Internet Explorer 11 და ქვემოთ არ არის სრულად მხარდაჭერილი disabledატრიბუტის შესახებ <fieldset>. გამოიყენეთ მორგებული JavaScript ამ ბრაუზერებში ველების ნაკრების გასათიშად.

ვალიდაცია

მიაწოდეთ ღირებული, ქმედითი გამოხმაურება თქვენს მომხმარებლებს HTML5 ფორმის დადასტურებით – ხელმისაწვდომია ყველა ჩვენს მხარდაჭერილ ბრაუზერში . აირჩიეთ ბრაუზერის ნაგულისხმევი ვალიდაციის გამოხმაურება, ან განახორციელეთ მორგებული შეტყობინებები ჩვენი ჩაშენებული კლასებით და დამწყები JavaScript-ით.

ჩვენ უაღრესად გირჩევთ პერსონალური ვალიდაციის სტილებს, რადგან მშობლიური ბრაუზერის ნაგულისხმევი პარამეტრები არ არის გამოცხადებული ეკრანის მკითხველებისთვის.

Როგორ მუშაობს

აი, როგორ მუშაობს ფორმის ვალიდაცია Bootstrap-თან:

  • HTML ფორმის ვალიდაცია გამოიყენება CSS-ის ორი ფსევდო კლასის მეშვეობით :invalidდა :valid. ეს ეხება <input>, <select>და <textarea>ელემენტებს.
  • Bootstrap ახორციელებს :invalidდა :validსტილებს მშობელთა .was-validatedკლასში, ჩვეულებრივ გამოიყენება <form>. წინააღმდეგ შემთხვევაში, ნებისმიერი საჭირო ველი მნიშვნელობის გარეშე გამოჩნდება, როგორც არასწორი გვერდის ჩატვირთვაზე. ამ გზით, თქვენ შეგიძლიათ აირჩიოთ როდის გაააქტიუროთ ისინი (როგორც წესი, ფორმის წარდგენის მცდელობის შემდეგ).
  • როგორც სარეზერვო, .is-invalidდა .is-validკლასები შეიძლება გამოყენებულ იქნას ფსევდო-კლასების ნაცვლად სერვერის მხრიდან ვალიდაციისთვის . მათ არ სჭირდებათ .was-validatedმშობლის კლასი.
  • შეზღუდვების გამო, თუ როგორ მუშაობს CSS, ჩვენ არ შეგვიძლია (ამჟამად) გამოვიყენოთ სტილები <label>DOM-ში ფორმის კონტროლის წინ, მორგებული JavaScript-ის დახმარების გარეშე.
  • ყველა თანამედროვე ბრაუზერი მხარს უჭერს შეზღუდვის ვალიდაციის API- ს, JavaScript მეთოდების სერიას ფორმის კონტროლის დასადასტურებლად.
  • გამოხმაურების შეტყობინებებმა შეიძლება გამოიყენოს ბრაუზერის ნაგულისხმევი პარამეტრები (განსხვავებული თითოეული ბრაუზერისთვის და არასტილაციური CSS-ის საშუალებით) ან ჩვენი მორგებული გამოხმაურების სტილი დამატებითი HTML და CSS.
  • თქვენ შეგიძლიათ მიაწოდოთ პირადი მოქმედების შეტყობინებები setCustomValidityJavaScript-ში.

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

მორგებული სტილები

მორგებული Bootstrap ფორმის ვალიდაციის შეტყობინებებისთვის, თქვენ უნდა დაამატოთ novalidateლოგიკური ატრიბუტი თქვენს <form>. ეს გათიშავს ბრაუზერის ნაგულისხმევი გამოხმაურების ინსტრუმენტებს, მაგრამ მაინც უზრუნველყოფს JavaScript-ში ფორმის ვალიდაციის API-ებზე წვდომას. შეეცადეთ გამოაგზავნოთ ქვემოთ მოცემული ფორმა; ჩვენი JavaScript წყვეტს გაგზავნის ღილაკს და გამოხმაურებს თქვენ.

გაგზავნის მცდელობისას დაინახავთ :invalidდა :validსტილებს, რომლებიც გამოიყენება თქვენი ფორმის კონტროლისთვის.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting.
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustomUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

ბრაუზერის ნაგულისხმევი

არ გაინტერესებთ მორგებული ვალიდაციის გამოხმაურება ან JavaScript-ის დაწერა ფორმის ქცევის შესაცვლელად? ყველაფერი კარგია, შეგიძლიათ გამოიყენოთ ბრაუზერის ნაგულისხმევი პარამეტრები. სცადეთ ქვემოთ მოცემული ფორმის გაგზავნა. თქვენი ბრაუზერისა და OS-დან გამომდინარე, თქვენ იხილავთ გამოხმაურების ოდნავ განსხვავებულ სტილს.

მიუხედავად იმისა, რომ ამ უკუკავშირის სტილის სტილისტიკა შეუძლებელია CSS-ით, თქვენ მაინც შეგიძლიათ შეცვალოთ გამოხმაურების ტექსტი JavaScript-ის საშუალებით.

@
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Mark" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefaultUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend2">@</span>
        </div>
        <input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" placeholder="City" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

სერვერის მხარე

ჩვენ გირჩევთ გამოიყენოთ კლიენტის მხარის ვალიდაცია, მაგრამ თუ თქვენ გჭირდებათ სერვერის მხარე, შეგიძლიათ მიუთითოთ არასწორი და სწორი ფორმის ველები .is-invalidდა .is-valid. გაითვალისწინეთ, რომ .invalid-feedbackასევე მხარდაჭერილია ამ კლასებში.

Კარგად გამოიყურება!
Კარგად გამოიყურება!
@
გთხოვთ, აირჩიოთ მომხმარებლის სახელი.
გთხოვთ, მიუთითოთ მოქმედი ქალაქი.
გთხოვთ, მიუთითოთ სწორი მდგომარეობა.
გთხოვთ, მოგვაწოდოთ მოქმედი zip.
გაგზავნამდე უნდა დაეთანხმოთ.
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

მხარდაჭერილი ელემენტები

ჩვენი მაგალითის ფორმები გვიჩვენებს მშობლიურ ტექსტურ <input>s-ებს ზემოთ, მაგრამ ფორმის დადასტურების სტილები ხელმისაწვდომია ჩვენი მორგებული ფორმის კონტროლისთვისაც.

არასწორი გამოხმაურების ტექსტის მაგალითი
სხვა არასწორი გამოხმაურების ტექსტის მაგალითი
არასწორი მორგებული არჩევის გამოხმაურების მაგალითი
არასწორი მორგებული ფაილის გამოხმაურების მაგალითი
<form class="was-validated">
  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>

  <div class="form-group">
    <select class="custom-select" required>
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

  <div class="custom-file">
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
    <div class="invalid-feedback">Example invalid custom file feedback</div>
  </div>
</form>

ინსტრუმენტების რჩევები

თუ თქვენი ფორმის განლაგება ამის საშუალებას იძლევა, შეგიძლიათ შეცვალოთ .{valid|invalid}-feedbackკლასები .{valid|invalid}-tooltipკლასებით, რათა აჩვენოთ ვალიდაციის გამოხმაურება სტილიზებული ხელსაწყოს მინიშნებაში. დარწმუნდით, რომ თან იქონიეთ მშობელი position: relativeხელსაწყოების პოზიციონირებისთვის. ქვემოთ მოცემულ მაგალითში, ჩვენს სვეტის კლასებს ეს უკვე აქვთ, მაგრამ თქვენს პროექტს შეიძლება დასჭირდეს ალტერნატიული დაყენება.

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" placeholder="First name" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" placeholder="Last name" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltipUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationTooltipUsername" placeholder="Username" aria-describedby="validationTooltipUsernamePrepend" required>
        <div class="invalid-tooltip">
          Please choose a unique and valid username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="form-control" id="validationTooltip03" placeholder="City" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <input type="text" class="form-control" id="validationTooltip04" placeholder="State" required>
      <div class="invalid-tooltip">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" placeholder="Zip" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

მორგებული ფორმები

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

ჩექმები და რადიოები

თითოეული მოსანიშნი ველი და რადიო შეფუთულია და <div>-ძმასთან ერთად, <span>რათა შეიქმნას ჩვენი მორგებული კონტროლი და <label>თანმხლები ტექსტისთვის. სტრუქტურულად, ეს არის იგივე მიდგომა, როგორც ჩვენი ნაგულისხმევი .form-check.

ჩვენ ვიყენებთ და-ძმის ამომრჩეველს ( ~) ყველა ჩვენი <input>მდგომარეობისთვის, მაგალითად, :checkedჩვენი მორგებული ფორმის ინდიკატორის სწორად სტილისთვის. კლასთან .custom-control-labelშერწყმისას, ჩვენ ასევე შეგვიძლია ტექსტის სტილისტიკა თითოეული ელემენტისთვის <input>'-ის მდგომარეობის მიხედვით.

ჩვენ ვმალავთ ნაგულისხმევს <input>და opacityვიყენებთ .custom-control-labelმის ადგილას ახალი მორგებული ფორმის ინდიკატორის შესაქმნელად ::beforeდა ::after. სამწუხაროდ, ჩვენ ვერ ავაშენებთ მორგებულს მხოლოდ <input>იმიტომ, რომ CSS contentარ მუშაობს ამ ელემენტზე.

შემოწმებულ მდგომარეობებში ჩვენ ვიყენებთ base64 ჩაშენებულ SVG ხატულებს Open Iconic- დან . ეს გვაძლევს საუკეთესო კონტროლს სტილისა და პოზიციონირების შესახებ ბრაუზერებსა და მოწყობილობებში.

მოსანიშნი ველები

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

მორგებულ ჩეკ ველებს ასევე შეუძლიათ გამოიყენონ :indeterminateფსევდო კლასი, როდესაც ხელით დაყენებულია JavaScript-ის საშუალებით (არ არის ხელმისაწვდომი HTML ატრიბუტი მის დასაზუსტებლად).

თუ იყენებთ jQuery-ს, ასეთი რაღაც საკმარისი იქნება:

$('.your-checkbox').prop('indeterminate', true)

რადიოები

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

Ხაზში

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

გამორთულია

მორგებული ყუთები და რადიოები ასევე შეიძლება გამორთოთ. დაამატეთ disabledლოგიკური ატრიბუტი <input>და მორგებული ინდიკატორი და ეტიკეტის აღწერა ავტომატურად იქნება სტილიზებული.

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled>
  <label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" id="radio3" name="radioDisabled" id="customRadioDisabled" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled">Toggle this custom radio</label>
</div>

აირჩიეთ მენიუ

მორგებულ <select>მენიუებს სჭირდებათ მხოლოდ მორგებული კლასი, .custom-selectმორგებული სტილის გასააქტიურებლად.

<select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

თქვენ ასევე შეგიძლიათ აირჩიოთ მცირე და დიდი საბაჟო არჩევიდან, რათა შეესაბამებოდეს ჩვენი მსგავსი ზომის ტექსტის შეყვანას.

<select class="custom-select custom-select-lg mb-3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

multipleატრიბუტი ასევე მხარდაჭერილია :

<select class="custom-select" multiple>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

როგორც არის sizeატრიბუტი:

<select class="custom-select" size="3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

ფაილის ბრაუზერი

ფაილის შეყვანა არის ყველაზე მკაფიო ჯგუფიდან და საჭიროებს დამატებით JavaScript-ს, თუ გსურთ დააკავშიროთ ისინი ფუნქციური ფაილის არჩევით… და ფაილის სახელის შერჩეული ტექსტით.

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

<input>ჩვენ ვმალავთ ნაგულისხმევ ფაილს opacityდა ამის ნაცვლად სტილში ვაყენებთ <label>. ღილაკი გენერირებულია და განლაგებულია ::after. და ბოლოს, ჩვენ ვაცხადებთ a widthand heighton <input>შესაბამისი ინტერვალით გარემომცველი შინაარსისთვის.

სტრიქონების თარგმნა ან მორგება

ფსევდოკლასი გამოიყენება „დათვალიერების“ ტექსტის სხვა ენებზე თარგმნის დასაშვებად :lang(). გააუქმეთ ან დაამატეთ ჩანაწერები $custom-file-textSass ცვლადში შესაბამისი ენის ტეგით და ლოკალიზებული სტრიქონებით. ინგლისური სტრიქონების მორგება შესაძლებელია იმავე გზით. მაგალითად, აი, როგორ შეიძლება დაამატოთ ესპანური თარგმანი (ესპანური ენის კოდია es):

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

აქ არის lang(es)მოქმედება პერსონალური ფაილის შეყვანის შესახებ ესპანური თარგმანისთვის:

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="es">
  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>

თქვენ უნდა დააყენოთ თქვენი დოკუმენტის (ან მისი ქვეხის) ენა სწორად, რათა სწორი ტექსტი იყოს ნაჩვენები. ეს შეიძლება გაკეთდეს ელემენტის langატრიბუტის<html> ან Content-LanguageHTTP სათაურის გამოყენებით , სხვა მეთოდებთან ერთად.