ប្រអប់បញ្ចូលអត្ថបទ

អនុញ្ញាតឱ្យអ្នកប្រើប្រាស់បញ្ចូលអត្ថបទបានលើសពីមួយបន្ទាត់។

មានជាទូទៅ

ឧទាហរណ៍

ប្រអប់បញ្ចូលអត្ថបទតាមបុរេជម្រើស

ដើម្បីបន្ថែមចំនួនជួរក្នុងប្រអប់បញ្ចូលអត្ថបទ អ្នកអាចបង្កើនចំនួនរបស់វានៅក្នុង class row នៅក្នុងកូដ។
ស្លាកសញ្ញាជាអក្សរ
0/200

 
<div class="cgds form-group">
  <div class="d-flex justify-content-between">
    <div for="exampleFormControlTextarea1" class="form-label">ស្លាកសញ្ញាជាអក្សរ</div>
    <div class="form-text">0/200</div>
  </div>
  <textarea class="form-control" id="exampleFormControlTextarea1" rows="5" placeholder="សូមសរសេរនៅត្រង់នេះ"></textarea>
</div>

        

Hover

ស្លាកសញ្ញាជាអក្សរ
0/200

 
<div class="cgds form-group">
  <div class="d-flex justify-content-between">
    <div for="exampleFormControlTextarea1" class="form-label">ស្លាកសញ្ញាជាអក្សរ</div>
    <div class="form-text">0/200</div>
  </div>
  <textarea class="form-control" id="exampleFormControlTextarea1" rows="5" placeholder="សូមសរសេរនៅត្រង់នេះ" autofocus></textarea>
</div>

        

មានបញ្ហា

ស្លាកសញ្ញាជាអក្សរ
0/200
សារប្រាប់ពីបញ្ហា

 
<div class="cgds form-group was-validated">
  <div class="d-flex justify-content-between">
    <div for="exampleFormControlTextarea1" class="form-label">ស្លាកសញ្ញាជាអក្សរ</div>
    <div class="form-text">0/200</div>
  </div>
  <textarea class="form-control" id="exampleFormControlTextarea1" rows="5" placeholder="សូមសរសេរនៅត្រង់នេះ" required></textarea>
  <div class="invalid-feedback">សារប្រាប់ពីបញ្ហា</div>
</div>

        

បិទដំណើរការ

ដាក់បញ្ចូល class disabled ទៅក្នុងកូដប្រសិនបើអ្នកចង់បិទដំណើរការប្រអប់បញ្ចូលអត្ថបទ។
ស្លាកសញ្ញាជាអក្សរ
0/200

 
<div class="cgds form-group">
  <div class="d-flex justify-content-between">
    <div for="exampleFormControlTextarea1" class="form-label">ស្លាកសញ្ញាជាអក្សរ</div>
    <div class="form-text">0/200</div>
  </div>
  <textarea class="form-control" id="exampleFormControlTextarea1" rows="5" placeholder="សូមសរសេរនៅត្រង់នេះ" disabled></textarea>
</div>

        

ធាតុផ្សំ

Text Area Anatomy
  1. ស្លាកសញ្ញាជាអក្សរ៖ ប្រាប់អ្នកប្រើប្រាស់អំពីអ្វីដែលត្រូវបញ្ចូលក្នុងប្រអប់បញ្ចូលអត្ថបទ។ ស្លាកសញ្ញាជាអក្សរត្រូវតែនៅពីខាងក្រៅប្រអប់។
  2. ការរាប់ចំនួនពាក្យ (ដាក់ក៏បានមិនដាក់ក៏បាន)៖ ដើម្បីប្រាប់អ្នកប្រើប្រាស់ពីចំនួនពាក្យច្រើនបំផុតដែលអាចសរសេរដាក់ក្នុងប្រអប់បញ្ចូលអត្ថបទ។

គម្លាត

Text Area Spacing

នៅក្នុងប្រអប់បញ្ចូលអត្ថបទ
រក្សាគម្លាតយ៉ាងតិច 16px នៅលើគែមនៃអ័ក្សដេករវាងប្រអប់នឹងអក្សរ និង 8px នៅលើគែមនៃអ័ក្សឈរ។

គោលការណ៍ណែនាំនៃការប្រើប្រាស់

ប្រអប់បញ្ចូលអត្ថបទគួរប្រើប្រាស់នៅពេល៖

  • ពេលអ្នកចង់ឱ្យអ្នកប្រើប្រាស់បញ្ចូលខ្លឹមសារជាអក្សរ និងមានប្រវែងច្រើនបន្ទាត់។

ប្រអប់បញ្ចូលអត្ថបទមិនគួរប្រើប្រាស់នៅពេល៖

  • ពេលសំណួររបស់អ្នកមានលក្ខណៈស្មុគស្មាញនឹងតម្រូវឱ្យអ្នកប្រើប្រាស់ឆ្លើយចម្លើយដែលមានច្រើនផ្នែក។ ករណីនេះយើងណែនាំឱ្យអ្នកបំបែកសំណួរជាផ្នែកតូចៗ រួចប្រើប្រាស់ធាតុផ្សេងដូចជាប្រអប់ជម្រើសឱ្យពួកគាត់បញ្ចូលចម្លើយជំនួសវិញ។

គោលការណ៍ណែនាំនៃការរចនា

ផ្តល់ការរាប់ចំនួនពាក្យ
ករណីអ្នកចង់ដាក់ការកំណត់ទៅលើប្រវែងរបស់ចម្លើយដែលអ្នកប្រើប្រាស់បញ្ចូល អ្នកគួរបង្ហាញការរាប់ចំនួនពាក្យទៅកាន់ពួកគាត់។

ស្លាកសញ្ញាជាអក្សរត្រូវនៅពីក្រៅប្រអប់
ស្លាកសញ្ញាជាអក្សរត្រូវនៅនៅពីលើ ឬនៅសងខាង ឬជិតប្រអប់ ប៉ុន្តែដាច់ខាតមិនត្រូវដាក់ក្នុងប្រអប់ទេ។

កុំប្រើប្រាស់អក្សរ Placeholder
អក្សរ Placeholder នឹងបាត់នៅពេលអ្នកប្រើប្រាស់បញ្ចូលទិន្នន័យចូល។ ប្រសិនបើមិនឃើញអក្សរ Placeholder ទេ អ្នកប្រើប្រាស់នឹងមិនបានមើលឃើញពីប្រភេទទិន្នន័យដែលគាត់ត្រូវបញ្ចូលទេ។ ដូចនេះ សូមប្រើអក្សរជំនួយជំនួសឱ្យអក្សរ Placeholder វិញ។

Home


Previous version 1.0.3