ប្រអប់បញ្ចូលអក្សរ

អនុញ្ញាតឱ្យអ្នកប្រើប្រាស់អាចបញ្ចូលអក្សរ លេខ និងសញ្ញាសម្គាល់ផ្សេងៗ ដាក់ក្នុងបន្ទាត់តែមួយ។

មានជាទូទៅ

ឧទាហរណ៍

មានសេចក្តីណែនាំ និងរូបសញ្ញា

នេះជាសេចក្តីណែនាំ
នេះជាសេចក្តីណែនាំ
នេះជាសេចក្តីណែនាំ
សារប្រាប់ពីបញ្ហា
នេះជាសេចក្តីណែនាំ

 
<div class="cgds form-group mb-2">
  <label for="defaultWith" class="form-label">បុរេជម្រើស</label>
  <div id="defaultWithHelp" class="form-text">នេះជាសេចក្តីណែនាំ</div>
  <div class="cgds form-control-group">
    <input type="text" class=" form-control" id="defaultWith" aria-describedby="defaultWith" placeholder="សរសេរនៅត្រង់នេះ">
    <i class="bi bi-search form-control-icon"></i>
  </div>
</div>
<div class="cgds form-group mb-2">
  <label for="hoverWith" class="form-label">Hover</label>
  <div id="hoverWithHelp" class="form-text">នេះជាសេចក្តីណែនាំ</div>
  <div class="cgds form-control-group">
    <input type="text" class="form-control" id="hoverWith" aria-describedby="hoverWithHelp" placeholder="សរសេរនៅត្រង់នេះ" autofocus />
    <i class="bi bi-search form-control-icon"></i>
  </div>
</div>
<div class="cgds form-group mb-2 was-validated">
  <label for="errorWith" class="form-label">មានបញ្ហា</label>
  <div id="errorWithHelp" class="form-text">នេះជាសេចក្តីណែនាំ</div>
  <div class="cgds form-control-group">
    <input type="text" class="form-control" id="errorWith" aria-describedby="errorWithHelp errorWithInvalid" placeholder="សរសេរនៅត្រង់នេះ" required />
    <i class="bi bi-search form-control-icon"></i>
    <div id="errorWithInvalid" class="invalid-feedback">សារប្រាប់ពីបញ្ហា</div>
  </div>
</div>
<div class="cgds form-group has-feedback mb-2">
  <label for="disabledWith" class="form-label">បិទដំណើរការ</label>
  <div id="disabledWithHelp" class="form-text">នេះជាសេចក្តីណែនាំ</div>
  <div class="cgds form-control-group">
    <input type="text" class="form-control" id="disabledWith" aria-describedby="disabledWithHelp" placeholder="Text goes here" disabled />
    <i class="bi bi-search form-control-icon"></i>
  </div>
</div>

គ្មានសេចក្តីណែនាំ និងរូបសញ្ញា

សារប្រាប់ពីបញ្ហា

 
<div class="form-group mb-2">
  <label for="defaultWithout" class="form-label">បុរេជម្រើស</label>
  <input type="text" class="form-control" id="defaultWithout" placeholder="សរសេរនៅត្រង់នេះ" />
</div>
<div class="form-group mb-2">
  <label for="hoverWithout" class="form-label">Hover</label>
  <input type="text" class="form-control" id="hoverWithout" placeholder="សរសេរនៅត្រង់នេះ" autofocus />
</div>
<div class="form-group mb-2 was-validated">
  <label for="errorWithout" class="form-label">មានបញ្ហា</label>
  <input type="text" class="form-control" id="errorWithout" aria-describedby="errorWithoutInvalid" placeholder="សរសេរនៅត្រង់នេះ" required />
  <div id="errorWithoutInvalid" class="invalid-feedback">សារប្រាប់ពីបញ្ហា</div>
</div>
<div class="form-group mb-2">
  <label for="disabledWithout" class="form-label">បិទដំណើរការ</label>
  <input type="text" class="form-control" id="disabledWithout" placeholder="សរសេរនៅត្រង់នេះ" disabled />
</div>

ធាតុផ្សំ

Text Input Anatomy
  1. ស្លាកសញ្ញាជាអក្សរ៖ ប្រាប់អ្នកប្រើប្រាស់ថាតើប្រភេទទិន្នន័យអ្វីដែលត្រូវបានដាក់ក្នុងប្រអប់នេះ។ ស្លាកសញ្ញាជាអក្សរត្រូវតែនៅពីក្រៅប្រអប់។
  2. សេចក្តីណែនាំ៖ ផ្តល់ការណែនាំដល់អ្នកប្រើប្រាប់អំពីប្រភេទទិន្នន័យដែលពួកគាត់ត្រូវបញ្ចូល។
  3. សញ្ញាសម្គាល់ (ដាក់ក៏បានមិនដាក់ក៏បាន)៖ បង្ហាញពីប្រភេទទិន្នន័យដែលត្រូវបានបញ្ចូលក្នុងប្រអប់ និងអំពីមុខងាររបស់វា។ ឧទាហរណ៍ សញ្ញាកែវយឹត សញ្ញាទម្លាក់ចុះ សញ្ញាប្រភេទរូបិយប័ណ្ណជាដើម។
  4. សារប្រាប់ពីបញ្ហា៖ ផ្ដល់ព័ត៌មានអំពីការបញ្ហាដែលបានកើតឡើងដើម្បីឱ្យអ្នកប្រើប្រាស់អាចធ្វើការកែប្រែបាន។

គម្លាត

Text Input Spacing

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

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

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

  • ពេលអ្នកចង់ឱ្យអ្នកប្រើប្រាស់បញ្ចូលខ្លឹមសារជាអក្សរ និងមានប្រវែងមួយបន្ទាត់។
  • ពេលអ្នកប្រើប្រាស់អាចបញ្ចូលចម្លើយដោយសេរី។
  • ផ្តល់ភាពងាយស្រួលដល់អ្នកប្រើប្រាស់។ ឧទាហរណ៍ ការសរសេរបញ្ចូលកាលបរិច្ឆេទដោយផ្ទាល់ងាយជាងការជ្រើសរើសកាលបរិច្ឆេទពីប្រអប់បញ្ចូលកាលបរិច្ឆេទ។

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

  1. ពេលអ្នកចង់ឱ្យអ្នកប្រើប្រាស់បញ្ចូលខ្លឹមសារជាអក្សរ និងមានប្រវែងច្រើនបន្ទាត់។
    1. ករណីនេះគួរប្រើប្រអប់បញ្ចូលអត្ថបទជំនួសវិញ។
  2. ពេលអ្នកចង់ឱ្យអ្នកប្រើប្រាស់ជ្រើសរើសចម្លើយដែលបានកំណត់ទុកជាមុនរួចមកហើយ។
    1. ករណីនេះគួរប្រើ <select> ឬ ប្រអប់គ្រីស ឬ ប៊ូតុងមូលជំនួសវិញ។

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

ត្រូវសរសេរស្លាកសញ្ញាជាអក្សរឱ្យខ្លីហើយងាយយល់
ដើម្បីឱ្យអ្នកប្រើប្រាស់ដឹងច្បាស់ថាគាត់ត្រូវសរសេរអ្វីដាក់ក្នុងប្រអប់បញ្ចូលអក្សរមួយនេះ។

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

រចនាប្រវែងប្រអប់ឱ្យត្រឹមត្រូវ
ប្រវែងរបស់ប្រអប់ត្រូវកំណត់វាធំឬតូចអាស្រ័យនឹងប្រវែងនៃខ្លឹមសារដែលយើងរំពឹងថាអ្នកប្រើប្រាស់នឹងបញ្ចូល។

ផ្តល់សេចក្តីណែនាំ
ផ្តល់សេចក្តីណែនាំដល់អ្នកប្រើប្រាស់អំពីប្រភេទទិន្នន័យដែលត្រូវបានបញ្ចូល។ វាជួយស្រាយចម្ងល់និងកាត់បន្ថយកំហុសនៅពេលអ្នកប្រើប្រាស់បញ្ចូលទិន្នន័យ។

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

ខ្នាតសម្រាប់រចនា

$form-text-margin-top: null !default;
$form-text-font-size: $font-size-base !default;
$form-text-font-style: null !default;
$form-text-font-weight: null !default;
$form-text-color: $text-muted !default;
$form-label-margin-bottom: .5rem !default;
$form-label-font-size: null !default;
$form-label-font-style: null !default;
$form-label-font-weight: $font-weight-bold !default;
$form-label-color: null !default;
$input-padding-y: $input-btn-padding-y !default;
$input-padding-x: $input-btn-padding-x !default;
$input-font-family: $input-btn-font-family !default;
$input-font-size: $input-btn-font-size !default;
$input-font-weight: $font-weight-base !default;
$input-line-height: $input-btn-line-height !default;
$input-padding-y-sm: $input-btn-padding-y-sm !default;
$input-padding-x-sm: $input-btn-padding-x-sm !default;
$input-font-size-sm: $input-btn-font-size-sm !default;
$input-padding-y-lg: $input-btn-padding-y-lg !default;
$input-padding-x-lg: $input-btn-padding-x-lg !default;
$input-font-size-lg: $input-btn-font-size-lg !default;
$input-bg: $body-bg !default;
$input-disabled-bg: $gray-200 !default;
$input-disabled-border-color: null !default;
$input-color: $body-color !default;
$input-border-color: $gray-400 !default;
$input-border-width: $input-btn-border-width !default;
$input-box-shadow: $box-shadow-inset !default;
$input-border-radius: $border-radius !default;
$input-border-radius-sm: $border-radius-sm !default;
$input-border-radius-lg: $border-radius-lg !default;
$input-focus-bg: $input-bg !default;
$input-focus-border-color: tint-color($component-active-bg, 50%) !default;
$input-focus-color: $input-color !default;
$input-focus-width: $input-btn-focus-width !default;
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
$input-placeholder-color: $gray-400 !default;
$input-plaintext-color: $body-color !default;
$input-height-border: $input-border-width * 2 !default;
$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
$input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
$input-height-inner-quarter: add($input-line-height * .25em, $input-padding-y * .5) !default;
$input-height: add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
$input-height-sm: add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
$input-height-lg: add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
$input-transition: border-color .15s ease-in-out,
box-shadow .15s ease-in-out !default;
$form-color-width: 3rem !default;
$form-feedback-margin-top: $form-text-margin-top !default;
$form-feedback-font-size: $form-text-font-size !default;
$form-feedback-font-style: $form-text-font-style !default;
$form-feedback-valid-color: $success !default;
$form-feedback-invalid-color: $danger !default;
$form-feedback-icon-valid-color: $form-feedback-valid-color !default;
$form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='#{$form-feedback-icon-valid-color}' viewBox='0 0 16 16'><path d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z'/></svg>") !default;
$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='#{$form-feedback-icon-invalid-color}' viewBox='0 0 16 16'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/><path d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z'/></svg>") !default;
$form-validation-states: ("valid": ("color": $form-feedback-valid-color, "icon": $form-feedback-icon-valid), "invalid": ("color": $form-feedback-invalid-color, "icon": $form-feedback-icon-invalid)) !default;
Home
Previous version 1.0.3