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-group 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-control-range.

<form>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
</form>

ប្រអប់ធីក និងវិទ្យុ

ប្រអប់ធីក និងវិទ្យុលំនាំដើមត្រូវបានកែលម្អដោយជំនួយពី ថ្នាក់តែមួយសម្រាប់ប្រភេទបញ្ចូលទាំងពីរ ដែលធ្វើអោយប្រសើរឡើងនូវប្លង់ និងឥរិយាបថនៃធាតុ HTML របស់.form-check ពួកគេ ។ ប្រអប់ធីកគឺសម្រាប់ជ្រើសរើសជម្រើសមួយ ឬច្រើននៅក្នុងបញ្ជីមួយ ខណៈពេលដែលវិទ្យុគឺសម្រាប់ជ្រើសរើសជម្រើសមួយពីមនុស្សជាច្រើន។

ប្រអប់ធីក និងវិទ្យុដែលបិទត្រូវបានគាំទ្រ ប៉ុន្តែដើម្បីផ្តល់ 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">
  <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>

ទំហំជួរឈរ

ដូចដែលបានបង្ហាញនៅក្នុងឧទាហរណ៍មុន ប្រព័ន្ធក្រឡាចត្រង្គរបស់យើងអនុញ្ញាតឱ្យអ្នកដាក់លេខណាមួយ .colនៅក្នុង a .rowឬ .form-row. ពួកវានឹងបែងចែកទទឹងដែលមានស្មើៗគ្នារវាងពួកវា។ អ្នកក៏អាចជ្រើសរើសសំណុំរងនៃជួរឈររបស់អ្នកដើម្បីយកកន្លែងទំនេរច្រើន ឬតិច ខណៈដែល .cols ដែលនៅសល់ត្រូវបែងចែកស្មើគ្នាជាមួយនឹងថ្នាក់ជួរឈរជាក់លាក់ដូចជា .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>

បន្ទាប់មក អ្នកអាច Remix ម្តងទៀតជាមួយនឹងថ្នាក់ជួរឈរជាក់លាក់នៃទំហំ។

@ 
<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 sr-only" 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: autoដើម្បីបដិសេធលំនាំដើម Bootstrap width: 100%។
  • ការគ្រប់គ្រង ​បង្ហាញ​ក្នុង​ជួរ​តែ​ក្នុង​ច្រក​មើល​ដែល​មាន​ទទឹង​យ៉ាង​ហោច​ណាស់ 576px ដើម្បី​គណនា​ច្រក​មើល​តូចចង្អៀត​នៅលើ​ឧបករណ៍​ចល័ត។

អ្នក​ប្រហែល​ជា​ត្រូវ​ដោះស្រាយ​ដោយ​ដៃ​នូវ​ទទឹង និង​ការ​តម្រឹម​នៃ​ការ​ត្រួត​ពិនិត្យ​ទម្រង់​បុគ្គល​ជាមួយ ​ឧបករណ៍​ប្រើប្រាស់​គម្លាត (ដូច​រូប​ខាងក្រោម)។ ជាចុងក្រោយ ត្រូវប្រាកដថាតែងតែរួមបញ្ចូល <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-blockនៅក្នុង v3) ។ អត្ថបទជំនួយក្នុងជួរអាចត្រូវបានអនុវត្តដោយភាពបត់បែនដោយប្រើធាតុ 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>

អត្ថបទក្នុងជួរអាចប្រើធាតុ 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 នេះមិនទាន់មានលក្ខណៈស្តង់ដារនៅឡើយ ហើយមិនត្រូវបានគាំទ្រពេញលេញនៅក្នុង Internet Explorer 10 ហើយនឹងមិនរារាំងអ្នកប្រើប្រាស់ក្តារចុចពីការក្លាយជា អាចផ្តោត ឬធ្វើឱ្យតំណទាំងនេះសកម្ម។ ដូច្នេះដើម្បីឱ្យមានសុវត្ថិភាព សូមប្រើ JavaScript ផ្ទាល់ខ្លួន ដើម្បីបិទតំណបែបនេះ។

ភាពឆបគ្នាឆ្លងកម្មវិធីរុករក

ខណៈពេលដែល Bootstrap នឹងអនុវត្តរចនាប័ទ្មទាំងនេះនៅក្នុងកម្មវិធីរុករកទាំងអស់ Internet Explorer 11 និងខាងក្រោមមិនគាំទ្រទាំងស្រុងនូវ disabledគុណលក្ខណៈនៅលើ <fieldset>. ប្រើ JavaScript ផ្ទាល់ខ្លួនដើម្បីបិទសំណុំវាលនៅក្នុងកម្មវិធីរុករកទាំងនេះ។

សុពលភាព

ផ្តល់មតិកែលម្អដ៏មានតម្លៃ និងអាចអនុវត្តបានដល់អ្នកប្រើប្រាស់របស់អ្នកជាមួយនឹងសុពលភាពទម្រង់ HTML5 – មាននៅក្នុងកម្មវិធីរុករកតាមអ៊ីនធឺណិតទាំងអស់របស់យើងដែលគាំទ្រ ។ ជ្រើសរើសពីមតិកែលម្អដែលមានសុពលភាពលំនាំដើមរបស់កម្មវិធីរុករកតាមអ៊ីនធឺណិត ឬអនុវត្តសារផ្ទាល់ខ្លួនជាមួយនឹងថ្នាក់ដែលភ្ជាប់មកជាមួយ និង JavaScript ចាប់ផ្តើមរបស់យើង។

បច្ចុប្បន្ន យើងសូមណែនាំឱ្យប្រើរចនាប័ទ្មសុពលភាពផ្ទាល់ខ្លួន ដោយសារសារសុពលភាពលំនាំដើមរបស់កម្មវិធីរុករកតាមអ៊ីនធឺណិតមិនត្រូវបានបង្ហាញជាប់លាប់ទៅនឹងបច្ចេកវិទ្យាជំនួយនៅក្នុងកម្មវិធីរុករកទាំងអស់ (ជាពិសេសគឺ Chrome នៅលើកុំព្យូទ័រលើតុ និងទូរស័ព្ទ)។

របៀបដែលវាដំណើរការ

នេះជារបៀបដែលការផ្ទៀងផ្ទាត់ទម្រង់ដំណើរការជាមួយ Bootstrap៖

  • សុពលភាពទម្រង់ HTML ត្រូវបានអនុវត្តតាមរយៈ CSS's pseudo-classes :invalidនិង :valid. វាអនុវត្តចំពោះ <input>, <select>, និង <textarea>ធាតុ។
  • Bootstrap វិសាលភាព :invalidនិង :validរចនាប័ទ្មទៅ .was-validatedថ្នាក់មេ ដែលជាធម្មតាត្រូវបានអនុវត្តទៅ <form>. បើមិនដូច្នេះទេ វាលដែលត្រូវការណាមួយដែលគ្មានតម្លៃបង្ហាញថាមិនត្រឹមត្រូវនៅពេលផ្ទុកទំព័រ។ វិធីនេះ អ្នកអាចជ្រើសរើសពេលណាដើម្បីធ្វើឲ្យពួកវាសកម្ម (ជាធម្មតាបន្ទាប់ពីការដាក់ស្នើទម្រង់ត្រូវបានព្យាយាម)។
  • ដើម្បីកំណត់រូបរាងទម្រង់ឡើងវិញ (ឧទាហរណ៍ក្នុងករណីនៃការដាក់ស្នើទម្រង់ថាមវន្តដោយប្រើ AJAX) សូមដក .was-validatedថ្នាក់ចេញពីទម្រង់ <form>ម្តងទៀតបន្ទាប់ពីការដាក់ស្នើ។
  • ជាជម្រើសជំនួស .is-invalidហើយ .is-validថ្នាក់អាចត្រូវបានប្រើប្រាស់ជំនួសឱ្យ pseudo-classes សម្រាប់ សុពលភាពផ្នែកខាងម៉ាស៊ីនមេ ។ ពួកគេមិនត្រូវការ .was-validatedថ្នាក់មេទេ។
  • ដោយសារតែមានឧបសគ្គនៅក្នុងរបៀបដែល CSS ដំណើរការ យើងមិនអាច (នៅពេលបច្ចុប្បន្ន) អនុវត្តរចនាប័ទ្ម <label>ដែលមកមុនការគ្រប់គ្រងទម្រង់នៅក្នុង DOM ដោយគ្មានជំនួយពី JavaScript ផ្ទាល់ខ្លួនទេ។
  • កម្មវិធីរុករកតាមអ៊ីនធឺណិតទំនើបទាំងអស់គាំទ្រ API សុពលភាពកម្រិត ដែលជាស៊េរីនៃវិធីសាស្ត្រ JavaScript សម្រាប់ធ្វើឱ្យមានសុពលភាពការត្រួតពិនិត្យទម្រង់។
  • សារមតិកែលម្អអាចប្រើប្រាស់ លំនាំដើមរបស់កម្មវិធីរុករក តាមអ៊ីនធឺណិត (ខុសគ្នាសម្រាប់កម្មវិធីរុករកតាមអ៊ីនធឺណិតនីមួយៗ និងមិនមានរចនាប័ទ្មតាមរយៈ CSS) ឬរចនាប័ទ្មមតិកែលម្អផ្ទាល់ខ្លួនរបស់យើងជាមួយនឹង HTML និង CSS បន្ថែម។
  • អ្នកអាចផ្តល់សារសុពលភាពផ្ទាល់ខ្លួនជាមួយ setCustomValidityនៅក្នុង JavaScript ។

ជាមួយនឹងគំនិតនោះ សូមពិចារណាការបង្ហាញខាងក្រោមសម្រាប់រចនាប័ទ្មសុពលភាពទម្រង់ផ្ទាល់ខ្លួនរបស់យើង ថ្នាក់ចំហៀងម៉ាស៊ីនមេស្រេចចិត្ត និងលំនាំដើមនៃកម្មវិធីរុករកតាមអ៊ីនធឺណិត។

រចនាប័ទ្មផ្ទាល់ខ្លួន

សម្រាប់សារសុពលភាពទម្រង់ Bootstrap ផ្ទាល់ខ្លួន អ្នកនឹងត្រូវបន្ថែម novalidateគុណលក្ខណៈប៊ូលីនទៅ <form>. នេះបិទដំណើរការការណែនាំឧបករណ៍មតិកែលម្អលំនាំដើមរបស់កម្មវិធីរុករក ប៉ុន្តែនៅតែផ្តល់នូវការចូលប្រើ APIs សុពលភាពទម្រង់នៅក្នុង JavaScript។ ព្យាយាមដាក់ទម្រង់ខាងក្រោម; 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 ដើម្បីផ្លាស់ប្តូរឥរិយាបថទម្រង់មែនទេ? ល្អទាំងអស់ អ្នកអាចប្រើលំនាំដើមរបស់កម្មវិធីរុករកតាមអ៊ីនធឺណិត។ សាកល្បងដាក់ទម្រង់ខាងក្រោម។ អាស្រ័យលើកម្មវិធីរុករកតាមអ៊ីនធឺណិត និងប្រព័ន្ធប្រតិបត្តិការរបស់អ្នក អ្នកនឹងឃើញរចនាប័ទ្មមតិកែលម្អខុសគ្នាបន្តិចបន្តួច។

ខណៈពេលដែលរចនាប័ទ្មមតិកែលម្អទាំងនេះមិនអាចត្រូវបានកំណត់រចនាប័ទ្មជាមួយ 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>ខាងលើ ប៉ុន្តែរចនាប័ទ្មសុពលភាពទម្រង់មានសម្រាប់ការគ្រប់គ្រងទម្រង់ផ្ទាល់ខ្លួនរបស់យើងផងដែរ។

ឧទាហរណ៍អត្ថបទមតិកែលម្អមិនត្រឹមត្រូវ
ឧទាហរណ៍ច្រើនទៀត អត្ថបទមតិកែលម្អមិនត្រឹមត្រូវ
ឧទាហរណ៍ មតិកែលម្អ ជ្រើសរើសផ្ទាល់ខ្លួនមិនត្រឹមត្រូវ
ឧទាហរណ៍ មតិកែលម្អឯកសារផ្ទាល់ខ្លួនមិនត្រឹមត្រូវ 
<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. គួរឲ្យសោកស្ដាយ យើងមិនអាចបង្កើត Custom មួយពី <input>CSS បានទេ ដោយសារ CSS contentមិនដំណើរការលើធាតុនោះ។

នៅក្នុងស្ថានភាពដែលបានគូស យើងប្រើ រូបតំណាង SVG ដែលបានបង្កប់ base64 ពី 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ថ្នាក់ pseudo នៅពេលកំណត់ដោយដៃតាមរយៈ 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>រូបរាងដំបូងរបស់ ហើយមិនអាចកែប្រែ <option>s បានទេ ដោយសារការកំណត់របស់កម្មវិធីរុករកតាមអ៊ីនធឺណិត។

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

ជួរ

បង្កើត <input type="range">ការគ្រប់គ្រងផ្ទាល់ខ្លួនជាមួយ .custom-range. បទ (ផ្ទៃខាងក្រោយ) និងមេដៃ (តម្លៃ) ត្រូវបានកំណត់រចនាប័ទ្មឱ្យបង្ហាញដូចគ្នានៅលើកម្មវិធីរុករក។ ដោយសារមានតែ IE និង Firefox ប៉ុណ្ណោះដែលគាំទ្រ "ការបំពេញ" បទរបស់ពួកគេពីខាងឆ្វេង ឬខាងស្តាំនៃមេដៃជាមធ្យោបាយមួយដើម្បីបង្ហាញពីការវិវឌ្ឍន៍ដោយមើលឃើញ យើងមិនគាំទ្រវាទេ។

<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">

ការបញ្ចូលជួរមានតម្លៃបង្កប់ន័យសម្រាប់ minនិង max— 0និង 100រៀងគ្នា។ អ្នកអាចបញ្ជាក់តម្លៃថ្មីសម្រាប់អ្នកដែលប្រើ minនិង maxគុណលក្ខណៈ។

<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">

តាមលំនាំដើម ជួរបញ្ចូល "ខ្ទាស់" ទៅតម្លៃចំនួនគត់។ ដើម្បីផ្លាស់ប្តូរវា អ្នកអាចបញ្ជាក់ stepតម្លៃមួយ។ ក្នុងឧទាហរណ៍ខាងក្រោម យើងបង្កើនចំនួនជំហានពីរដងដោយប្រើ step="0.5".

<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">

កម្មវិធីរុករកឯកសារ

ការបញ្ចូលឯកសារគឺភាគច្រើនបំផុតនៃក្រុម ហើយទាមទារ 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 widthនិង heightនៅលើ <input>សម្រាប់គម្លាតត្រឹមត្រូវសម្រាប់មាតិកាជុំវិញ។

ការបកប្រែ ឬប្ដូរខ្សែអក្សរតាមបំណង

ថ្នាក់ :lang()pseudo-class ត្រូវបានប្រើដើម្បីអនុញ្ញាតឱ្យបកប្រែអត្ថបទ "រកមើល" ទៅជាភាសាផ្សេងទៀត។ បដិសេធ ឬបន្ថែមធាតុទៅ $custom-file-textអថេរ Sass ជាមួយនឹង ស្លាកភាសា ដែលពាក់ព័ន្ធ និងខ្សែអក្សរដែលបានធ្វើមូលដ្ឋានីយកម្ម។ ខ្សែអក្សរអង់គ្លេសអាចត្រូវបានប្ដូរតាមបំណងតាមរបៀបដូចគ្នា។ ឧទាហរណ៍ នេះជារបៀបដែលមនុស្សម្នាក់អាចបន្ថែមការបកប្រែភាសាអេស្ប៉ាញ (កូដភាសាអេស្ប៉ាញគឺ 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-Languageបឋមកថា HTTP ក្នុងចំណោមវិធីសាស្រ្តផ្សេងទៀត។