ទម្រង់

ឧទាហរណ៍ និងគោលការណ៍ណែនាំការប្រើប្រាស់សម្រាប់រចនាប័ទ្មការគ្រប់គ្រងទម្រង់ ជម្រើសប្លង់ និងសមាសធាតុផ្ទាល់ខ្លួនសម្រាប់បង្កើតទម្រង់ផ្សេងៗគ្នា។

នៅលើទំព័រនេះ។

ការគ្រប់គ្រងទម្រង់ រចនាប័ទ្មបញ្ចូលអត្ថបទ និងតំបន់អត្ថបទដោយមានការគាំទ្រសម្រាប់រដ្ឋច្រើន។

ជ្រើសរើស កែលម្អកម្មវិធីរុករកលំនាំដើមជ្រើសរើសធាតុជាមួយនឹងរូបរាងដំបូងផ្ទាល់ខ្លួន។

ពិនិត្យ និងវិទ្យុ ប្រើប៊ូតុងវិទ្យុផ្ទាល់ខ្លួន និងប្រអប់ធីករបស់យើងក្នុងទម្រង់សម្រាប់ជ្រើសរើសជម្រើសបញ្ចូល។

ជួរ ជំនួសការបញ្ចូលជួរលំនាំដើមរបស់កម្មវិធីរុករកតាមអ៊ីនធឺណិតជាមួយនឹងកំណែផ្ទាល់ខ្លួនរបស់យើង។

ក្រុមបញ្ចូល ភ្ជាប់ស្លាក និងប៊ូតុងទៅនឹងធាតុបញ្ចូលរបស់អ្នក ដើម្បីបង្កើនតម្លៃអត្ថន័យ។

ស្លាកអណ្តែត បង្កើតស្លាកទម្រង់សាមញ្ញដ៏ស្រស់ស្អាត ដែលអណ្តែតលើវាលបញ្ចូលរបស់អ្នក។

ប្លង់ បង្កើតប្លង់ក្នុងជួរ ផ្ដេក ឬស្មុគស្មាញជាមួយទម្រង់របស់អ្នក។

សុពលភាព ធ្វើឱ្យទម្រង់បែបបទរបស់អ្នកមានសុពលភាពជាមួយនឹងឥរិយាបថ និងរចនាប័ទ្មសុពលភាពផ្ទាល់ខ្លួន ឬដើម។

ទិដ្ឋភាពទូទៅ

ការគ្រប់គ្រងទម្រង់របស់ Bootstrap ពង្រីកលើ រចនាប័ទ្មទម្រង់ដែល បានចាប់ផ្ដើមឡើងវិញរបស់យើង ជាមួយនឹងថ្នាក់។ ប្រើថ្នាក់ទាំងនេះដើម្បីជ្រើសរើសការបង្ហាញតាមបំណងរបស់ពួកគេសម្រាប់ការបង្ហាញដែលស៊ីសង្វាក់គ្នាជាងមុននៅលើកម្មវិធីរុករកតាមអ៊ីនធឺណិត និងឧបករណ៍។

ត្រូវប្រាកដថាប្រើ typeគុណលក្ខណៈសមស្របលើធាតុបញ្ចូលទាំងអស់ (ឧ. emailសម្រាប់អាសយដ្ឋានអ៊ីមែល ឬ numberសម្រាប់ព័ត៌មានជាលេខ) ដើម្បីទាញយកអត្ថប្រយោជន៍ពីការគ្រប់គ្រងការបញ្ចូលថ្មីៗដូចជា ការផ្ទៀងផ្ទាត់អ៊ីមែល ការជ្រើសរើសលេខ និងច្រើនទៀត។

នេះជាឧទាហរណ៍រហ័សដើម្បីបង្ហាញរចនាប័ទ្មទម្រង់របស់ Bootstrap ។ បន្តអានសម្រាប់ឯកសារអំពីថ្នាក់ដែលត្រូវការ ប្លង់ទម្រង់ និងច្រើនទៀត។

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

ទម្រង់អត្ថបទ

អត្ថបទទម្រង់កម្រិតប្លុក ឬកម្រិតក្នុងបន្ទាត់អាចត្រូវបានបង្កើតដោយប្រើ .form-text.

ការភ្ជាប់អត្ថបទទម្រង់ជាមួយការគ្រប់គ្រងទម្រង់

អត្ថបទទម្រង់គួរតែត្រូវបានទាក់ទងយ៉ាងច្បាស់ជាមួយនឹងការគ្រប់គ្រងទម្រង់ដែលវាទាក់ទងនឹងការប្រើប្រាស់ aria-describedbyគុណលក្ខណៈ។ វានឹងធានាថា បច្ចេកវិទ្យាជំនួយ ដូចជាកម្មវិធីអានអេក្រង់នឹងប្រកាសអត្ថបទទម្រង់នេះ នៅពេលដែលអ្នកប្រើប្រាស់ផ្តោត ឬបញ្ចូលការគ្រប់គ្រង។

ទម្រង់អត្ថបទខាងក្រោមធាតុបញ្ចូលអាចត្រូវបានកំណត់រចនាប័ទ្មជាមួយ .form-text. ប្រសិនបើធាតុកម្រិតប្លុកនឹងត្រូវបានប្រើ រឹមកំពូលត្រូវបានបន្ថែមសម្រាប់គម្លាតងាយស្រួលពីធាតុបញ្ចូលខាងលើ។

ពាក្យសម្ងាត់

ពាក្យសម្ងាត់របស់អ្នកត្រូវតែមានប្រវែង 8-20 តួអក្សរ មានអក្សរ និងលេខ ហើយមិនត្រូវមានដកឃ្លា តួអក្សរពិសេស ឬសញ្ញាអារម្មណ៍នោះទេ។

<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>

អត្ថបទក្នុងជួរអាចប្រើធាតុ HTML ធម្មតាណាមួយ (មិនថាជា <span>, <small>ឬអ្វីផ្សេងទៀត) ដោយគ្មានអ្វីលើសពី .form-textថ្នាក់នោះទេ។

ពាក្យសម្ងាត់

ត្រូវតែមាន 8-20 តួអក្សរ។

<div class="row g-3 align-items-center">
  <div class="col-auto">
    <label for="inputPassword6" class="col-form-label">Password</label>
  </div>
  <div class="col-auto">
    <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
  </div>
  <div class="col-auto">
    <span id="passwordHelpInline" class="form-text">
      Must be 8-20 characters long.
    </span>
  </div>
</div>

ទម្រង់បិទ

បន្ថែម disabledគុណលក្ខណៈប៊ូលីននៅលើធាតុបញ្ចូល ដើម្បីការពារអន្តរកម្មរបស់អ្នកប្រើ និងធ្វើឱ្យវាកាន់តែស្រាលជាងមុន។

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

បន្ថែម disabledគុណលក្ខណៈទៅ a <fieldset>ដើម្បីបិទការគ្រប់គ្រងទាំងអស់នៅក្នុង។ កម្មវិធីរុករកតាមអ៊ីនធឺណិតចាត់ទុកការគ្រប់គ្រងទម្រង់ដើមទាំងអស់ ( <input>, <select>, និង <button>ធាតុ) នៅខាងក្នុង <fieldset disabled>ជាបិទ ដោយការពារអន្តរកម្មក្តារចុច និងកណ្តុរនៅលើពួកវា។

ទោះយ៉ាងណាក៏ដោយ ប្រសិនបើទម្រង់របស់អ្នករួមបញ្ចូលផងដែរនូវធាតុដែលស្រដៀងនឹងប៊ូតុងផ្ទាល់ខ្លួនដូចជា <a class="btn btn-*">...</a>ទាំងនេះនឹងត្រូវបានផ្តល់តែរចនាប័ទ្ម pointer-events: noneមានន័យថាពួកវានៅតែអាចផ្តោតអារម្មណ៍ និងអាចដំណើរការបានដោយប្រើក្តារចុច។ ក្នុងករណីនេះ អ្នកត្រូវតែកែប្រែការគ្រប់គ្រងទាំងនេះដោយដៃដោយបន្ថែម tabindex="-1"ដើម្បីការពារពួកវាពីការទទួលការផ្តោតអារម្មណ៍ និង aria-disabled="disabled"ដើម្បីបង្ហាញស្ថានភាពរបស់ពួកគេចំពោះបច្ចេកវិទ្យាជំនួយ។

<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <div class="mb-3">
      <label for="disabledTextInput" class="form-label">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="mb-3">
      <label for="disabledSelect" class="form-label">Disabled select menu</label>
      <select id="disabledSelect" class="form-select">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

ភាពងាយស្រួល

ត្រូវប្រាកដថាការគ្រប់គ្រងទម្រង់ទាំងអស់មានឈ្មោះសមរម្យដែលអាចចូលប្រើបាន ដើម្បីឱ្យគោលបំណងរបស់ពួកគេអាចត្រូវបានបញ្ជូនទៅអ្នកប្រើប្រាស់នៃបច្ចេកវិទ្យាជំនួយ។ មធ្យោបាយដ៏សាមញ្ញបំផុតដើម្បីសម្រេចបាននូវចំណុចនេះ គឺត្រូវប្រើ <label>ធាតុមួយ ឬ - ក្នុងករណីប៊ូតុង - ដើម្បីរួមបញ្ចូលអត្ថបទពិពណ៌នាគ្រប់គ្រាន់ជាផ្នែកនៃ <button>...</button>មាតិកា។

សម្រាប់ស្ថានភាពដែលមិនអាចបញ្ចូល <label>ខ្លឹមសារអត្ថបទដែលមើលឃើញ ឬសមស្របនោះ មានវិធីជំនួសក្នុងការនៅតែផ្តល់ឈ្មោះដែលអាចចូលប្រើបាន ដូចជា៖

<label>ធាតុដែលលាក់ដោយប្រើ .visually-hiddenថ្នាក់
ចង្អុលទៅធាតុដែលមានស្រាប់ដែលអាចដើរតួជាស្លាកដោយប្រើaria-labelledby
ការផ្តល់ titleគុណលក្ខណៈ
កំណត់យ៉ាងច្បាស់នូវឈ្មោះដែលអាចចូលប្រើបាននៅលើធាតុដោយប្រើaria-label

ប្រសិនបើមិនមានអ្វីទាំងនេះទេ បច្ចេកវិទ្យាជំនួយអាចងាកមកប្រើ placeholderគុណលក្ខណៈជាជម្រើសជំនួសសម្រាប់ឈ្មោះ <input>និង <textarea>ធាតុដែលអាចចូលប្រើបាន។ ឧទាហរណ៍នៅក្នុងផ្នែកនេះផ្តល់នូវវិធីសាស្រ្តមួយចំនួនដែលបានស្នើ និងករណីជាក់លាក់

ខណៈពេលដែលការប្រើប្រាស់មាតិកាដែលលាក់ដោយមើលឃើញ ( .visually-hidden, aria-label, និងសូម្បីតែ placeholderមាតិកាដែលបាត់នៅពេលដែលវាលទម្រង់មានមាតិកា) នឹងផ្តល់អត្ថប្រយោជន៍ដល់អ្នកប្រើប្រាស់បច្ចេកវិទ្យាជំនួយ ការខ្វះអត្ថបទស្លាកដែលមើលឃើញអាចនៅតែមានបញ្ហាសម្រាប់អ្នកប្រើប្រាស់មួយចំនួន។ ទម្រង់មួយចំនួននៃស្លាកដែលមើលឃើញជាទូទៅគឺជាវិធីសាស្រ្តដ៏ល្អបំផុត ទាំងភាពងាយស្រួល និងលទ្ធភាពប្រើប្រាស់។

សាស

អថេរទម្រង់ជាច្រើនត្រូវបានកំណត់នៅកម្រិតទូទៅដើម្បីត្រូវបានប្រើឡើងវិញ និងពង្រីកដោយសមាសធាតុសំណុំបែបបទនីមួយៗ។ អ្នកនឹងឃើញអថេរទាំងនេះញឹកញាប់បំផុត $btn-input-*និង ជា $input-*អថេរ។

អថេរ

$btn-input-*អថេរត្រូវបានចែករំលែកអថេរសកលរវាង ប៊ូតុង របស់ យើង និងសមាសធាតុទម្រង់របស់យើង។ អ្នកនឹងរកឃើញថាទាំងនេះជាញឹកញាប់ត្រូវបានកំណត់ជាតម្លៃទៅអថេរជាក់លាក់សមាសភាគផ្សេងទៀត។

$input-btn-padding-y:         .375rem;
$input-btn-padding-x:         .75rem;
$input-btn-font-family:       null;
$input-btn-font-size:         $font-size-base;
$input-btn-line-height:       $line-height-base;

$input-btn-focus-width:         .25rem;
$input-btn-focus-color-opacity: .25;
$input-btn-focus-color:         rgba($component-active-bg, $input-btn-focus-color-opacity);
$input-btn-focus-blur:          0;
$input-btn-focus-box-shadow:    0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color;

$input-btn-padding-y-sm:      .25rem;
$input-btn-padding-x-sm:      .5rem;
$input-btn-font-size-sm:      $font-size-sm;

$input-btn-padding-y-lg:      .5rem;
$input-btn-padding-x-lg:      1rem;
$input-btn-font-size-lg:      $font-size-lg;

$input-btn-border-width:      $border-width;