ទិដ្ឋភាពមែកធាងនៃបញ្ជី HTML គឺ ជម្រើសដ៏ល្អបំផុតទិដ្ឋភាពទូទៅ និងការសិក្សាអំពីរចនាសម្ព័ន្ធឋានានុក្រមរបស់ពួកគេ។ សូមក្រឡេកមើលការបំប្លែងមួយចំនួននៃបញ្ជី HTML ធម្មតាទៅជាសភាពដូចមែកធាងដែលមើលឃើញកាន់តែច្រើន ដោយប្រើវេទមន្តនៃរចនាប័ទ្ម CSS ។

1. ឧទាហរណ៍នៃបញ្ជី HTML ធម្មតា។

• បញ្ជី​ដើម
  • មូលដ្ឋានចំណេះដឹង
    • សមាសធាតុ
    • កម្មវិធីជំនួយ
    • ម៉ូឌុល
  • ពិនិត្យ
  • ទំនាក់ទំនង

ការសម្គាល់បញ្ជី HTML

• បញ្ជី​ដើម
  • មូលដ្ឋានចំណេះដឹង
    • សមាសធាតុ
    • កម្មវិធីជំនួយ
    • ម៉ូឌុល
  • ពិនិត្យ
  • ទំនាក់ទំនង

2. ឧទាហរណ៍បញ្ជី HTML ជាមួយបន្ទាត់តភ្ជាប់

ចូរកំណត់ស្លាកមួយ។

ថ្នាក់ treeline ដើម្បីបង្កើតបន្ទាត់តភ្ជាប់សម្រាប់ផ្នែកនីមួយៗនៃបញ្ជី។
• បញ្ជី​ដើម
  • មូលដ្ឋានចំណេះដឹង
    • សមាសធាតុ
    • កម្មវិធីជំនួយ
    • ម៉ូឌុល
  • ពិនិត្យ
  • ទំនាក់ទំនង
ការសម្គាល់បញ្ជី HTML ជាមួយបន្ទាត់តភ្ជាប់
/* កំណត់ថ្នាក់មែកធាង */
• បញ្ជី​ដើម
  • មូលដ្ឋានចំណេះដឹង
    • សមាសធាតុ
    • កម្មវិធីជំនួយ
    • ម៉ូឌុល
  • ពិនិត្យ
  • ទំនាក់ទំនង
រចនាប័ទ្មបញ្ជី CSS ជាមួយបន្ទាត់តភ្ជាប់ .treeline, .treeline ul, .treeline li (រឹម: 0; padding: 0; line-height: 1.2; list-style: none; ) .treeline ul (រឹម៖ 0 0 0 15px; / * បន្ទាត់បញ្ឈរ */).treeline > li:not(:only-child), .treeline li li (ទីតាំង៖ relative; padding: 3px 0 0 20px; /* text padding */) //* រចនាប័ទ្មបន្ទាត់បញ្ឈរ*/ .treeline li:not(:last-child) ( border-left: 1px solid #ccc;) /* Horizontal line styles*/ .treeline li li:before, .treeline > li:not(:only-child): មុន (មាតិកា៖ ""; ទីតាំង៖ ដាច់ខាត; កំពូល៖ 0; ឆ្វេង៖ 0; ទទឹង៖ 1.1em; កម្ពស់៖ .7em; ព្រំដែន-បាត៖ 1px រឹង #ccc;) /* បន្ទាត់បញ្ឈរនៃធាតុចុងក្រោយក្នុងបញ្ជី * / .treeline li:last-child:before ( width: calc(1.1em - 1px); border-left: 1px solid #ccc; ) 3. ឧទាហរណ៍បញ្ជីទម្លាក់ចុះ HTML
• បញ្ជី​ដើម
  • មូលដ្ឋានចំណេះដឹង
    • សមាសធាតុ
    • កម្មវិធីជំនួយ
    • ម៉ូឌុល
  • ពិនិត្យ
  • ទំនាក់ទំនង
ការសម្គាល់បញ្ជីទម្លាក់ចុះ HTML

យើងបន្ថែម + ទៅសញ្ញាសម្គាល់មុន ដើម្បីអនុវត្តមុខងារពង្រីកធាតុនៃបញ្ជីមែកធាង។

• បញ្ជី​ដើម
  • + មូលដ្ឋានចំណេះដឹង / * បញ្ជីពង្រីកប្លុក */
    • សមាសធាតុ
    • កម្មវិធីជំនួយ
    • ម៉ូឌុល
  • ពិនិត្យ
  • ទំនាក់ទំនង
រចនាប័ទ្មបញ្ជីទម្លាក់ចុះ CSS

រចនាប័ទ្មខាងក្រោមត្រូវតែបន្ថែមទៅ CSS ពីឧទាហរណ៍មុន៖

Treeline .drop (ទីតាំង៖ absolute; left: -6px; top: 5px; width: 11px; height: 11px; line-height: 1em; text-align: center; background: #9F9F9F; color: #fff; //* ផ្ទៃខាងក្រោយ និងពណ៌នៃប៊ូតុងដែលបើកបញ្ជី */ ទំហំពុម្ពអក្សរ៖ 78% /* ទំហំ +/- */ ទស្សន៍ទ្រនិច៖ -webkit-user-select: គ្មាន -moz-user-select: none); treeline li: last-child > .drop (រឹម-ឆ្វេង៖ 1px;) .treeline .drop + ul (display: none;) .treeline .dropM +ul (display: block;)

ស្គ្រីបអនុវត្តមុខងារបញ្ជីទម្លាក់ចុះ

បន្ថែមពីលើ HTML និង CSS វិធីសាស្រ្តនៃការរចនាបញ្ជីមែកធាងនេះតម្រូវឱ្យមានការប្រើប្រាស់ JS:

$(function() ( var ul = document.querySelectorAll( "treeline > li:not(:only-child) ul, .treeline ul ul"); for (var i = 0; i< ul.length; i++) { var div = document.createElement("div"); div.className = "drop"; div.innerHTML = "+"; ul[i].parentNode.insertBefore(div, ul[i].previousSibling); div.onclick = function() { this.innerHTML = (this.innerHTML == "+" ? "−" : "+"); this.className = (this.className == "drop" ? "drop dropM" : "drop"); } } })();

កូដ JS នេះអាចត្រូវបានបញ្ចូលនៅចុងបញ្ចប់នៃសម្ភារៈដោយចូលទៅកាន់របៀបមើលកូដប្រភព។ សូមចំណាំថា កូដស្គ្រីបអាចត្រូវបានកាត់ផ្តាច់ដោយអ្នកកែសម្រួល ហើយដូច្នេះវាមិនដំណើរការទេ។ ក្នុងករណីនេះ សូមចូលទៅកាន់ការកំណត់កម្មវិធីនិពន្ធ ហើយអនុញ្ញាតឱ្យប្រើស្លាក។

4. ឧទាហរណ៍នៃបញ្ជីដើមឈើបញ្ឈរ
• បញ្ជី​ដើម
  • មូលដ្ឋានចំណេះដឹង
    • សមាសធាតុ
    • កម្មវិធីជំនួយ
    • ម៉ូឌុល
  • ពិនិត្យ
  • ទំនាក់ទំនង
ការសម្គាល់ HTML សម្រាប់បញ្ជីមែកធាងបញ្ឈរ
/* ចាត់តាំងថ្នាក់ treevertical */
• បញ្ជី​ដើម
  • មូលដ្ឋានចំណេះដឹង
    • សមាសធាតុ
    • កម្មវិធីជំនួយ
    • ម៉ូឌុល
  • ពិនិត្យ
  • ទំនាក់ទំនង
រចនាប័ទ្ម CSS សម្រាប់បញ្ជីមែកធាងបញ្ឈរ .treevertical, .treevertical ul (ទីតាំង៖ ទាក់ទង; ការបង្ហាញ៖ តារាង; រឹម៖ 5px 0 0 0 !important; padding: 6px 0 0 0 !important; line-height: normal; text-align: center ; word-wrap: break-word; word-break: break-all;) .treevertical li ( position: relative; display: table-cell;) /* Indent between paragraphs */ .treevertical li:not(:only-child ) (ទ្រនាប់៖ 0 .5em;).treevertical li: last-child (padding-right: 0;).treevertical li:first-child (padding-left:0;) // រចនាប័ទ្មបន្ទាត់ */ .treevertical ul:before , .treevertical ul li:before, .treevertical ul li:after ( content: ""; position: absolute; top: -5px; left: 0; width: 50%; height: 5px; border-right: 1px solid #999 ); ) :first-child:before (ស្តាំ:0; left:auto; border-left: 1px solid #999; border-right: none;) .treevertical ul li:not(:only-child):first-child:before , .treevertical ul li:not(:only-child): last-child:before ( width: calc(50% + .5em/2); ) .treevertical ul li:after (border: none;).treevertical ul li:not(:last-child):not(:first-child):after ( width: 100%; border-top: 1px solid #999; )

ម៉ឺនុយទម្លាក់ចុះផ្ដេកត្រូវបានប្រើដើម្បីរៀបចំរចនាសម្ព័ន្ធរុករកគេហទំព័រ។ ចំនួនដ៏ល្អប្រសើរនៃកម្រិតសំបុកគឺមួយ ឬពីរ។ កម្រិតនៃឯកសារភ្ជាប់កាន់តែតិច វាកាន់តែងាយស្រួលសម្រាប់អ្នកចូលមើលគេហទំព័រដើម្បីស្វែងរកព័ត៌មានដែលពួកគេត្រូវការ។ របៀបបង្កើតម៉ឺនុយផ្ដេកធម្មតាត្រូវបានពិពណ៌នាលម្អិតនៅក្នុង។

របៀបបង្កើតម៉ឺនុយទម្លាក់ចុះផ្ដេក 1. ការសម្គាល់ HTML និងរចនាប័ទ្មមូលដ្ឋានសម្រាប់ម៉ឺនុយទម្លាក់ចុះដែលមានកម្រិតដាក់មួយ។

ការសម្គាល់ HTML នៃម៉ឺនុយទម្លាក់ចុះផ្ដេកខុសពីម៉ឺនុយធម្មតាដែលវាភ្ជាប់ទៅធាតុបញ្ជីដែលចង់បាន

• បន្ថែម​បញ្ជី​ដែល​បាន​បង្កប់
  ឬ។

  ដើម្បីដាក់ទីតាំងម៉ឺនុយរងទាក់ទងទៅនឹងម៉ឺនុយមេ រចនាប័ទ្មខាងក្រោមត្រូវបានប្រកាស៖
  - សម្រាប់​ធាតុ​បញ្ជី​ដែល​បញ្ជី​ទម្លាក់​ចុះ​ត្រូវ​បាន​គេ​ដាក់​នៅ​ក្នុង​បញ្ជី៖ li (ទីតាំង៖ ទាក់ទង;);
  - សម្រាប់ម៉ឺនុយទម្លាក់ចុះ ul (ទីតាំង៖ absolute;) ក៏ដូចជាតម្លៃខាងឆ្វេង និងកំពូល។

  ដើម្បីភាពច្បាស់លាស់ និងងាយស្រួលក្នុងការធ្វើទ្រង់ទ្រាយ ចូរយើងបន្ថែមថ្នាក់កំពូលទៅម៉ឺនុយមេ និងម៉ឺនុយរងទៅម៉ឺនុយទម្លាក់ចុះ។

  មានវិធីជាច្រើនដើម្បីលាក់ម៉ឺនុយទម្លាក់ចុះ៖
  1) បង្ហាញ: គ្មាន;
  2) ភាពមើលឃើញ: លាក់;
  3) ភាពស្រអាប់: 0;
  ៤) ការបំប្លែង៖ មាត្រដ្ឋានY(០);
  5) ដោយប្រើបណ្ណាល័យ jQuery ។

  វិធីសាស្រ្ត 1. (បង្ហាញ: គ្មាន;)

  ម៉ឺនុយទម្លាក់ចុះត្រូវបានលាក់ដោយប្រើ .submenu (display: none;) នៅលើ hover វាត្រូវបានបង្ហាញដោយប្រើ .topmenu li:hover .submenu (display: block;) ។

  វិធីសាស្រ្ត 2. (ភាពមើលឃើញ: លាក់;)

  ម៉ឺនុយត្រូវបានលាក់ដោយប្រើ .submenu (ភាពមើលឃើញ៖ លាក់;) និងបង្ហាញដោយប្រើ .topmenu li:hover .submenu (ភាពមើលឃើញ៖ អាចមើលឃើញ;) ។

  វិធីសាស្រ្ត 3. (ភាពស្រអាប់: 0;)

  ម៉ឺនុយត្រូវបានលាក់ដោយប្រើ .submenu (ភាពស្រអាប់៖ 0;) និងបង្ហាញដោយប្រើ .topmenu li:hover .submenu (ភាពស្រអាប់៖ 1;) ។ ដើម្បី​ការពារ​ម៉ឺនុយ​មិន​ឱ្យ​បង្ហាញ​នៅ​ពេល​អ្នក​ដាក់​លើ​តំបន់​ដែល​វា​មាន​ទីតាំង សូម​បន្ថែម​ភាពមើលឃើញ៖ លាក់; ហើយនៅពេលដាក់ ប្តូរវាទៅជាភាពមើលឃើញ៖ អាចមើលឃើញ។ .

  វិធីសាស្រ្ត 4. (បំលែង៖ មាត្រដ្ឋានY(0);)

  ម៉ឺនុយត្រូវបានលាក់ដោយប្រើ .submenu (ប្លែង៖ scaleY(0);) ហើយបង្ហាញដោយប្រើ .topmenu li:hover .submenu (transform: scaleY(1);) ។ ដោយសារការបំប្លែងធាតុលំនាំដើមកើតឡើងពីចំណុចកណ្តាល អ្នកត្រូវបន្ថែមសម្រាប់ .submenu (transform-origin: 0 0;) , i.e. ពីជ្រុងខាងឆ្វេងខាងលើ។

  វិធីទី ៥៖ ការប្រើប្រាស់ jQuery $(.five li ul").hide(); // លាក់ម៉ឺនុយទម្លាក់ចុះ $(.five li:has(.submenu")").hover(function())($(.five li ul").stop().fadeToggle(300) ;) /* ជ្រើសរើសធាតុបញ្ជីដែលមានធាតុជាមួយថ្នាក់ .submenu ហើយបន្ថែមមុខងារដាក់លើវាដែលបង្ហាញ និងលាក់ម៉ឺនុយទម្លាក់ចុះ */); 2. ម៉ឺនុយទម្លាក់ចុះ 3D

  បែបផែនគួរឱ្យចាប់អារម្មណ៍អាចត្រូវបានបង្កើតដោយប្រើការបំប្លែង CSS3 ឧទាហរណ៍ ធ្វើឱ្យម៉ឺនុយលេចឡើងពីជម្រៅនៃអេក្រង់។

  • ផ្ទះ
  • ហាង
  • ប្លុក
    • ប្រភេទ
    • អ្នកនិពន្ធ
    • បណ្ណសារ
    • ស្លាក
  • ផលប័ត្រ
    • ប្រភេទ
    • អ្នកនិពន្ធ
    • បណ្ណសារ
    • ស្លាក
  • ទំនាក់ទំនង
  * (ទំហំប្រអប់៖ ប្រអប់ស៊ុម; ) តួ (រឹម៖ ០; ផ្ទៃខាងក្រោយ៖ ជម្រាលរ៉ាដាល់(#BFD6E2 1px, rgba(255,255,255,0) 2px); ទំហំផ្ទៃខាងក្រោយ៖ 10px 10px; ) nav ul (list-style : none; រឹម៖ 0; : rgba(255,255,255,.8); .topmenu > li ( display: inline-block; position: relative; ) .topmenu > li > a ( font-family: "Exo 2", sans-serif; height: 70px; line -height: 70px; a:hover ( color: #E6855F; ) .submenu ( background: white; border: 2px solid #003559; position: absolute; left: 0; visibility: hidden; opacity: 0; z-index: 5; width: 150px; transform: perspective(600px) rotateX(-90deg); transform-origin: 0% 0% transition: .6s ងាយស្រួលចេញចូល; ភាពស្រអាប់: 1; ការបំប្លែង៖ ទស្សនៈ (៦០០ ភីច) បង្វិល X (០ ដឺក្រេ); ) .submenu li a ( color: #7f7f7f; font-size: 13px; line-height: 36px; padding: 0 25px; font-family: "Kurale", serif; )
  3. ម៉ឺនុយទម្លាក់ចុះដែលអាចពង្រីកបានជាមួយនឹងនិមិត្តសញ្ញា

  ក្នុងឧទាហរណ៍នេះ ផ្នែកកំពូលនៃទំព័រមានស្លាកសញ្ញា និងការរុករកគេហទំព័រ។ និមិត្តសញ្ញាអាចជារូបភាពឬអត្ថបទ។ ម៉ឺនុយទម្លាក់ចុះពង្រីកបន្តិចម្តង ៗ ពីក្រោមធាតុបញ្ជីកំពូលដោយប្រើមុខងារបំលែង CSS3 ។

  និមិត្តសញ្ញា

  • ផ្ទះ
  • អំពី​ពួក​យើង
    • ផលិតផល
    • ហាង
    • សេវាកម្ម
  • គម្រោង
  • ទំនាក់ទំនង
  * (ទំហំប្រអប់៖ ស៊ុមប្រអប់; ) តួ (រឹម៖ ០; ផ្ទៃខាងក្រោយ៖ #f2f2f2; ) បឋមកថា (ផ្ទៃខាងក្រោយ៖ ស; តម្រឹមអត្ថបទ៖ កណ្តាល;) បឋមកថា a (ការតុបតែងអត្ថបទ៖ គ្មាន; គ្រោង៖ គ្មាន; បង្ហាញ : block; transition: .3s ease-in-out ) .logo ( color: #D5B45B; font-family: "Playfair Display", serif; font-size: 2.5em; padding: 20px 0;) nav ( display: តារាង; ទទឹង៖ 25% បណ្ដែត៖ ឆ្វេង; 404040; .submenu (ផ្ទៃខាងក្រោយ៖ #273037; ទីតាំង៖ ដាច់ខាត; ឆ្វេង៖ 0; កំពូល៖ 100%; z-index: 5; ទទឹង៖ 180px; ភាពស្រអាប់៖ 0; បំប្លែង៖ មាត្រដ្ឋានY(0); ការផ្លាស់ប្តូរប្រភពដើម៖ ០ ០; ការផ្លាស់ប្តូរ: .5s ភាពងាយស្រួលចូល-ចេញ; ) .submenu a ( color: white; text-align: left; padding: 12px 15px; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.1); ) .submenu li:last-child a ( border-bottom: none;
  4. ការពង្រីកម៉ឺនុយទម្លាក់ចុះ

  ឧទាហរណ៍មួយទៀតសម្រាប់ម៉ឺនុយទម្លាក់ចុះ។ ឥទ្ធិពលពង្រីកនៅពេលដែលម៉ឺនុយលេចឡើងត្រូវបានដឹងដោយកាត់បន្ថយទំហំដំបូង។ ម៉ឺនុយរង (បំប្លែង៖ មាត្រដ្ឋាន (.៨);) , នៅលើទំហំផ្ទុកកើនឡើងដល់.topmenu > li:hover .submenu (ប្លែង៖ មាត្រដ្ឋាន(1);) .

  • ផ្ទះ
  • ហាង
  • ប្លុក
    • ប្រភេទ
    • អ្នកនិពន្ធ
    • បណ្ណសារ
    • ស្លាក
  • ផលប័ត្រ
    • ប្រភេទ
    • អ្នកនិពន្ធ
    • បណ្ណសារ
    • ស្លាក
  • ទំនាក់ទំនង
  * (ទំហំប្រអប់៖ ប្រអប់ព្រំដែន; ) តួ (រឹម៖ ០; ផ្ទៃខាងក្រោយ៖ url(https://html5book.ru/wp-content/uploads/2015/10/background54.png) ) nav (ផ្ទៃខាងក្រោយ៖ ស; ) nav ul ( list-style: none; margin: 0; padding: 0; ) nav a ( text-decoration: none; outline: none; display: block; transition: .4s ease-in-out; ) .topmenu ( តម្រឹមអត្ថបទ៖ កណ្តាល; កម្ពស់៖ 12px; > li > a ( padding: 12px 26px; color: #767676; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; font-family: "Exo 2", sans-serif; ) .topmenu li a:hover ( color: #c0a97a; ) .submenu ( position: absolute; left: 50%; top: 100%; width: 210px; margin-left: -105px; background: #fafafa ; ស៊ុម៖ 1px រឹង #ededed; z-index: 5; ភាពមើលឃើញ: លាក់; ភាពស្រអាប់: 0; ការបំប្លែង៖ មាត្រដ្ឋាន (៨); ការផ្លាស់ប្តូរ: .4s ភាពងាយស្រួលចូល-ចេញ; ) .submenu li a ( padding: 10px 0; margin: 0 10px; border-bottom: 1px solid #efefef; font-size: 12px; color: #484848; font-family: "Kurale", serif; ) .topmenu > li:hover .submenu ( ភាពមើលឃើញ៖ អាចមើលឃើញ ភាពស្រអាប់៖ 1; transform: scale(1); )
  5. ម៉ឺនុយទម្លាក់ចុះទាញឡើង

  ម៉ឺនុយផ្តេកជាមួយចលនាតូច៖ នៅពេលអ្នកដាក់លើតំណម៉ឺនុយកំពូល រង្វង់តូចមួយនឹងលេចឡើង ដែលអមជាមួយរូបរាងនៃម៉ឺនុយទម្លាក់ចុះផងដែរ។

  • ផ្ទះ
  • ហាង
  • ប្លុក
    • ប្រភេទ
    • អ្នកនិពន្ធ
    • បណ្ណសារ
    • ស្លាក
  • ផលប័ត្រ
    • ប្រភេទ
    • អ្នកនិពន្ធ
    • បណ្ណសារ
    • ស្លាក
  • ទំនាក់ទំនង
  @import url("https://fonts.googleapis.com/css?.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; height: 100vh; position: relative; ) តួ៖ មុន (មាតិកា៖ ""; ទីតាំង៖ ដាច់ខាត; ឆ្វេង៖ ០; បាត៖ ០; កម្ពស់៖ ១០០%; ទទឹង៖ ១០០%; ផ្ទៃខាងក្រោយ៖ លីនេអ៊ែរ-ជម្រាល(៤៥ដឺក្រេ, rgba(0,0,0,0) , rgba(255,255,255,.8)); nav ( text-align: center; padding: 40px 0 0; ) nav ul ( list-style: none; margin: 0; padding: 0; ) nav a ( text-decoration : គ្មាន; បង្ហាញ៖ ប្លុក; ពណ៌៖ #222; ", cursive; font-size: 1.5em; line-height: 1; letter-spacing: 3px; ) .topmenu > li > a:before ( content: ""; position: absolute; z-index: 5; left: ទទឹង 50%៖ 10px; ភាពស្រអាប់: 1; ) .submenu ( ទីតាំង៖ absolute; z-index: 4; left: 50%; top: 100%; width: 150px; padding: 15px 0 15px; margin-top: 5px; background: white; border-radius: 5px; ប្រអប់-ស្រមោល៖ 0 0 30px rgba(0,0,0,.2); .submenu ( ភាពមើលឃើញ៖ អាចមើលឃើញ; ភាពស្រអាប់៖ 1; បំប្លែង៖ បកប្រែ(-50%, 0); ) .submenu a ( font-family: "Libre Baskerville", serif; font-size: 11px; letter-spacing: 1px; padding៖ 5px 10px;

  ជាញឹកញាប់ណាស់ នៅពេលចុះឈ្មោះ ឬការស្ទង់មតិនៅលើគេហទំព័រ អ្នកត្រូវបានស្នើឱ្យធ្វើការជ្រើសរើសពីបញ្ជីទម្លាក់ចុះ។ ជាឧទាហរណ៍ ជ្រើសរើសប្រទេសរបស់អ្នកពីប្រទេសជាច្រើនទៀត។ ទាំងនេះគឺជាធាតុទម្រង់ផ្សេងៗគ្នា ហើយពួកវាអាចត្រូវបានរចនាឡើងតាមរបៀបផ្សេងៗគ្នា៖ ពី HTML5 សាមញ្ញទៅ CSS3 ស្មុគស្មាញ។

  

  ថ្ងៃនេះយើងនឹងពិនិត្យមើលឧទាហរណ៍មួយនៃការរចនាវាលជ្រើសរើសដោយប្រើ HTML/CSS និងរូបតំណាងពុម្ពអក្សរអស្ចារ្យ។ ប៉ុន្តែយើងនឹងចាប់ផ្តើមដូចធម្មតាជាមួយនឹងការសម្គាល់ឯកសារ។

  កូដ HTML

  នៅខាងក្នុងស្លាកជ្រើសរើសគឺជាធាតុបញ្ជីទម្លាក់ចុះជម្រើស។ នៅក្នុងវេន ស្លាកជ្រើសរើស និងទម្រង់ត្រូវបានដាក់ក្នុងកុងតឺន័រ div ធម្មតា។ ស្លាកទម្រង់ត្រូវតែមានវត្តមាន ប្រសិនបើទិន្នន័យនឹងត្រូវបានផ្ញើជាបន្តបន្ទាប់ទៅកាន់ម៉ាស៊ីនមេ។

  
  
  
  
  ក្រហម
  ខៀវ
  ផ្កាឈូក
  ខ្មៅ
  ស
  
  
  
  

  យើងដាក់កុងតឺន័រជាមួយថ្នាក់ប្រអប់នៅកណ្តាលបង្អួច។

  ប្រអប់ (
  ទីតាំង៖ ដាច់ខាត;
  កំពូល: 50%;
  នៅសល់: 50%;
  បំប្លែង៖ បកប្រែ(-៥០%, -៥០%);
  }
  

  

  យើងរួមបញ្ចូលពុម្ពអក្សររូបតំណាងមុនស្លាកក្បាលបិទ។

  ការកំណត់រចនាប័ទ្មឧបករណ៍ជ្រើសរើស

  យើងកំណត់វិមាត្រសម្រាប់វាលជ្រើសរើស - 250x50 ភីកសែល និងធ្វើឱ្យវាលសម្រាប់ធាតុ 10 ភីកសែល នៅគ្រប់ជ្រុងទាំងអស់។

  ប្រអប់ជ្រើសរើស (
  ទទឹង: 250px;
  កម្ពស់: 50px;
  ទ្រនាប់៖ ១០ ភីច;
  }

  ការដកស៊ុមនិងជំងឺដាច់សរសៃឈាមខួរក្បាល៖

  ព្រំដែន៖ គ្មាន;
  គ្រោង៖ គ្មាន;

  យើងចុះឈ្មោះ ពណ៌ស្វាយផ្ទៃខាងក្រោយ ចំណងជើង ពណ៌ និងទំហំពុម្ពអក្សរសម្រាប់បញ្ជី។

  ផ្ទៃខាងក្រោយ៖ #ab05af;
  font-family: "Russo One", sans-serif;
  ពណ៌៖ #ffff;
  ទំហំពុម្ពអក្សរ៖ ២០ ភីច;

  បង្កើតស្រមោលជុំវិញវាល។

  ស្រមោលប្រអប់៖ 0 5px 20px rgba(0,0,0,.3);

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

  

  ភាគច្រើនទំនងជាអ្នករចនានឹងជំនួសត្រីកោណតូចដោយរូបតំណាងពីពុម្ពអក្សរល្អមែនទែន។

  

  វាមើលទៅស្អាតជាងវិធីនេះ ប៉ុន្តែកូដនៅតែត្រូវសរសេរដោយអ្នករចនាប្លង់។ តើអ្វីអាចជាដំណោះស្រាយនៅទីនេះ? យើងនឹងមិនប៉ះកូដ HTML ទេ ប៉ុន្តែនឹងប្រើធាតុមុន pseudo-element ។

  មុនពេល pseudo-element សម្រាប់ .box

  រឿងដំបូងដែលត្រូវធ្វើគឺសរសេរកូដរូបតំណាង និងឈ្មោះពុម្ពអក្សរ "Font Awesome 5 Free" ។ ជ្រើសរើសរូបតំណាងដែលចង់បាននៅលើគេហទំព័រ fontawesome.com ដោយចង្អុលបង្ហាញ "ការជ្រើសរើស" ហើយចម្លងកូដរបស់វា។

  
  

  

  
  .ប្រអប់ :: មុន (
  មាតិកា៖ "\f150";
  font-family: "Font Awesome 5 Free";
  ទីតាំង៖ ដាច់ខាត;
  កំពូល: 0;
  ស្តាំ៖ ០;
  ទទឹង: 50px;
  កម្ពស់: 50px;
  តម្រឹមអត្ថបទ៖ កណ្តាល;
  កម្ពស់បន្ទាត់៖ ៥០ ភីច;
  ពណ៌៖ #ffff;
  ទំហំពុម្ពអក្សរ៖ ២៨ ភីច;
  ផ្ទៃខាងក្រោយ៖ #da00e0;
  ព្រឹត្តិការណ៍ចង្អុល៖ គ្មាន;
  }

  បន្ទាប់យើងដាក់ទីតាំងដាច់ខាត ចង្អុលបង្ហាញវិមាត្រ 50x50, ពណ៌សរូបតំណាងមានផ្ទៃខាងក្រោយពណ៌ស្វាយស្រាល។ យើង​កំណត់​ធាតុ​ទ្រនិច​លក្ខណៈ​សំខាន់​ណាស់​-ព្រឹត្តិការណ៍៖ គ្មាន . នេះមានន័យថាធាតុមុន pseudo-element មិនមែនជាវត្ថុព្រឹត្តិការណ៍កណ្តុរទេ ហើយតម្លៃគ្មានប្រាប់ព្រឹត្តិការណ៍ "ការជ្រើសរើសកណ្ដុរ" ឱ្យចុះទៅស្រទាប់ខាងក្រោម ហើយចូលប្រើធាតុនៅក្រោមវា - ត្រីកោណតូចនោះ។ ត្រីកោណមិនបាត់ទេ វាគ្រាន់តែនៅក្រោមធាតុមុន pseudo-element គ្រាន់តែជាការតុបតែងប៉ុណ្ណោះ។ ដោយចុចលើរូបតំណាងដ៏ស្រស់ស្អាត ត្រីកោណ "អាក្រក់" ពិតជាដំណើរការ ហើយយើងធ្វើការជ្រើសរើសរបស់យើង។

  ជំរាបសួរ, អ្នកអានជាទីស្រឡាញ់នៃគេហទំព័រប្លក់។ ជាផ្នែកនៃការសិក្សារបស់យើងអំពីភាពស្មុគ្រស្មាញ ជាកិច្ចការបន្ទាប់ យើងនឹងបន្តវិភាគព័ត៌មានលម្អិតនៃការបង្កើតទម្រង់នៅលើគេហទំព័រដោយប្រើអ្វីដែលសមស្រប។

  ថ្ងៃនេះយើងនឹងមើលពីរបៀបបង្កើតបញ្ជីទម្លាក់ចុះ (ទម្លាក់ចុះ) រួមទាំងជម្រើសច្រើន ដោយប្រើជម្រើស និងជម្រើស របៀបបង្កើតវាលអត្ថបទដោយប្រើ Textarea ហើយក៏និយាយអំពីលទ្ធភាពនៃការពង្រីកមុខងារនៃទម្រង់ដោយប្រើ សំណុំវាល ស្លាក និងស្លាករឿងព្រេង។

  ខ្ញុំសូមរំលឹកអ្នកថាទម្រង់ណាមួយដែលមានវត្តមាននៅលើទំព័រត្រូវបានបង្កើតដោយប្រើ និងមានបំណងបញ្ចូលព័ត៌មានណាមួយពីអ្នកប្រើប្រាស់ ហើយផ្ញើវាទៅម៉ាស៊ីនមេ (ឧទាហរណ៍ - )។

  ជាអកុសល ឧបករណ៍ភាសាសម្គាល់ hypertext មិនអនុញ្ញាតឱ្យអ្នកដំណើរការព័ត៌មាននេះដោយផ្ទាល់ទេ ដូច្នេះ ដោយប្រើ HTMLយើងបង្កើតតែប៉ុណ្ណោះ រូបរាងទម្រង់ ហើយទិន្នន័យចាំបាច់ត្រូវបានផ្ញើសម្រាប់ដំណើរការ។ ចំពោះគោលបំណងនេះ ឯកសារពិសេសមួយត្រូវបានបង្កើតដោយចេតនានៅលើម៉ាស៊ីនមេគេហទំព័រ ដែលសរសេរជាភាសាម៉ាស៊ីនមេមួយ (ជាញឹកញាប់បំផុតគឺ PHP) ។ ចូរនិយាយថាសម្រាប់ មតិកែលម្អអ្នកអាចបង្កើតឯកសារ mail.php ដែលនឹងក្លាយជាអ្នកដោះស្រាយ។

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

  ព័ត៌មាននេះគឺចាំបាច់បំផុត ពីព្រោះទោះបីជាអ្នកប្រើឧបករណ៍អ្នកអភិវឌ្ឍន៍ទំនើបទាំងអស់ដែលបានបង្កើតនៅក្នុងពួកវាក៏ដោយ (ខ្ញុំសូមរំលឹកអ្នកថា សញ្ញាដំបូងក្នុងការអនុវត្តមុខងារនេះគឺ) អ្នកត្រូវតែយល់ច្បាស់អំពីយន្តការសម្រាប់ការប្រើប្រាស់ស្លាកសំខាន់ៗ បន្ទាប់មក ការកែសម្រួលកូដ HTML ដែលជាតម្រូវការដែលកើតឡើងពីពេលមួយទៅពេលមួយនឹងប្រែទៅជាសកម្មភាពរីករាយ។

  2. ច្រើន - គុណលក្ខណៈនេះ ដែលមិនមានប៉ារ៉ាម៉ែត្រ អនុញ្ញាតឱ្យជ្រើសរើសច្រើន មិនដូចឧទាហរណ៍ខាងលើ ដែលអ្នកអាចជ្រើសរើសបានតែធាតុមួយ (បន្ទាត់)។ ព្យាយាមជ្រើសរើសបន្ទាត់ជាច្រើននៅក្នុងបញ្ជីនេះដោយប្រើកណ្ដុរក្នុងពេលតែមួយ (ម្តងមួយៗនៅកន្លែងណាមួយ សង្កត់គ្រាប់ចុច Ctrl ឬប្រើ Shift បន្តបន្ទាប់គ្នាក្នុងជួរមួយ)៖

  ជម្រើស Textarea Label Fieldset Legend

  3. ទំហំ - កំណត់កម្ពស់នៃបញ្ជីទម្លាក់ចុះ ពោលគឺចំនួនបន្ទាត់ដែលបានបង្ហាញ។ ប្រសិនបើគុណលក្ខណៈច្រើនមានវត្តមាន ហើយតម្លៃទំហំមិនត្រូវបានបញ្ជាក់ (ដូចក្នុងឧទាហរណ៍ខាងលើ) បន្ទាប់មក តាមលំនាំដើម បន្ទាត់បួនត្រូវបានបង្ហាញហើយឧទាហរណ៍ជាមួយនឹងទំហំ = "5" ប្រាំនឹងអាចមើលឃើញ៖

  ជម្រើស Textarea Label Fieldset Legend

  ជម្រើស Textarea Label Fieldset Legend

  4. ទាមទារ (មិនមានប៉ារ៉ាម៉ែត្រ) - កំណត់ថាការជ្រើសរើសត្រូវតែត្រូវបានធ្វើឡើងមុនពេលបញ្ជូនទិន្នន័យទៅ processor ។ ប្រសិនបើធាតុពីបញ្ជីមិនត្រូវបានជ្រើសរើស នោះទិន្នន័យទម្រង់នឹងមិនត្រូវបានផ្ញើទេ៖

  ជម្រើស Textarea Label Fieldset Legend

  ជម្រើស Textarea Label Fieldset Legend

  5. Autofocus (មិនមានបញ្ហា) - កំណត់ការផ្តោតអារម្មណ៍ទៅបញ្ជីភ្លាមៗបន្ទាប់ពីទំព័រផ្ទុក។ លើសពីនេះទៀត ប្រសិនបើអ្នកប្រើទម្លាប់អនុវត្តសកម្មភាពភាគច្រើនដោយប្រើគ្រាប់ចុច នោះគ្រាន់តែការផ្តោតអារម្មណ៍ដែលបានកំណត់ទុកជាមុនបែបនេះនឹងជួយធ្វើការជ្រើសរើសពីបញ្ជីដោយប្រើព្រួញនៅលើក្តារចុចដោយមិនប្រើកណ្ដុរណាមួយឡើយ៖

  ជ្រើសរើសជម្រើស Textarea Label Fieldset Legend ពីបញ្ជី

  6. បិទ (គ្មានប៉ារ៉ាម៉ែត្រ) - រារាំងការចូលទៅកាន់បញ្ជី (បិទវា) ។ នៅក្នុងការអនុវត្ត ជាធម្មតាវាត្រូវបានប្រើក្នុងការភ្ជាប់ជាមួយស្គ្រីប ក្នុងករណីដែលអ្នកត្រូវការបើកបញ្ជីទម្លាក់ចុះតែនៅពេលដែលលក្ខខណ្ឌជាក់លាក់ត្រូវបានបំពេញ៖

  ជ្រើសរើសជម្រើស Textarea Label Fieldset Legend ពីបញ្ជី

  7. ទម្រង់ - ទំនាក់ទំនងបញ្ជីជាមួយទម្រង់មួយ ឬច្រើនដែលវាជាកម្មសិទ្ធិ ប៉ុន្តែមានទីតាំងនៅខាងក្រៅធុង។ ក្នុងករណីនេះ ប៉ារ៉ាម៉ែត្រត្រូវបានសរសេរជាតម្លៃនៃគុណលក្ខណៈទម្រង់ លេខសម្គាល់គុណលក្ខណៈសកលដែលត្រូវបានបន្ថែមទៅស្លាកទម្រង់៖

  ជ្រើសរើសជម្រើស Textarea Label Fieldset Legend ពីបញ្ជី

  ជ្រើសរើសជម្រើស Textarea Label Fieldset Legend ពីបញ្ជី

  កុំច្រឡំគុណលក្ខណៈជ្រើសរើសស្លាកជាមួយស្លាកទម្រង់មេ។ ក្នុងឧទាហរណ៍ខាងលើ គុណលក្ខណៈ id="data" ត្រូវបានបន្ថែមទៅស្លាកទម្រង់ ហើយ form="data" ត្រូវបានបន្ថែមទៅស្លាកជ្រើសរើស ដែលធ្វើឱ្យវាអាចភ្ជាប់បញ្ជីទម្លាក់ចុះជាមួយនឹងទម្រង់ជាក់លាក់មួយ។

  គុណលក្ខណៈស្លាកជម្រើស

  1. តម្លៃ - កំណត់តម្លៃពីបញ្ជីទម្លាក់ចុះដែលនឹងត្រូវបានបញ្ជូនទៅម៉ាស៊ីនមេ (ទម្រង់ដំណើរការ) ។ តាមពិត អ្នកដោះស្រាយត្រូវបានផ្ញើឈ្មោះ ដែលត្រូវបានបញ្ជាក់ដោយគុណលក្ខណៈឈ្មោះនៃស្លាកជ្រើសរើស និងតម្លៃ (សម្រាប់ ឧទាហរណ៍នេះ។— 1, 2, 3, 4, 5) ដែលត្រូវគ្នាទៅនឹងបន្ទាត់ដែលបានជ្រើសរើសនៃបញ្ជីទម្លាក់ចុះ៖

  ជ្រើសរើសជម្រើស Textarea Label Fieldset Legend ពីបញ្ជី

  ជម្រើស Textarea Label Fieldset Legend

  2. បិទ - រារាំងធាតុបញ្ជីទម្លាក់ចុះពីការត្រូវបានជ្រើសរើស។

  ជម្រើស Textarea Label Fieldset Legend

  ជម្រើស Textarea Label Fieldset Legend

  ដូចដែលអ្នកអាចឃើញពីឧទាហរណ៍ បន្ទាត់ "ជម្រើស" អសកម្ម និងមិនអាចជ្រើសរើសបានទេ។

  3. ស្លាក - បង្ហាញមាតិកាអត្ថបទ (ដែលជាតម្លៃរបស់វា) នៃធាតុបញ្ជីជាក់លាក់មួយ។ ប្រសិនបើស្លាកមានវត្តមាន នោះបន្ទាត់ដែលដូចគ្នាបេះបិទទៅនឹងតម្លៃនៃគុណលក្ខណៈនេះត្រូវបានបោះពុម្ព ហើយខ្លឹមសារអត្ថបទនៅខាងក្នុងស្លាកជម្រើសមិនត្រូវបានអើពើ។ រឿងដដែលនេះកើតឡើងប្រសិនបើគ្មានខ្លឹមសាររវាងពួកគេទាល់តែសោះ។

  Tag Textarea Tag Label Tag Fieldset Tag Legend

  Tag Textarea Tag Label Tag Fieldset Tag Legend

  មើល។ ក្នុងឧទាហរណ៍ខាងលើ បន្ទាត់ទីមួយសម្រាប់ជម្រើសក្នុងកូដគឺទទេ (នៅផ្នែកខាងឆ្វេងនៃតារាង) ប៉ុន្តែស្លាកប៉ារ៉ាម៉ែត្រ = "ជម្រើសស្លាក" ត្រូវបានសរសេរជាលទ្ធផល អត្ថបទពិសេសនេះលេចឡើងក្នុងបញ្ជី (នៅលើ ផ្នែកខាងស្តាំ) ។ ជួរទីពីរនៃកូដមានអត្ថបទ "Textarea Tag" ជាខ្លឹមសារនៃស្លាកជម្រើស ប៉ុន្តែទម្លាក់ចុះនៅខាងស្តាំបង្ហាញពាក្យ "Textarea" ដើម្បីផ្គូផ្គងតម្លៃនៃ label="Textarea"។

  4. បានជ្រើសរើស - ជ្រើសរើសធាតុបញ្ជីទម្លាក់ចុះបច្ចុប្បន្ន៖

  ជម្រើស Textarea Label Fieldset Legend

  ជម្រើស Textarea Label Fieldset Legend

  ប្រសិនបើគុណលក្ខណៈច្រើនមានវត្តមាន នោះវាអាចជ្រើសរើសធាតុច្រើនជាងមួយ៖

  ជម្រើស Textarea Label Fieldset Legend

  ជម្រើស Textarea Label Fieldset Legend

  គុណលក្ខណៈស្លាក Optgroup

  ប្រសិនបើបញ្ជីទម្លាក់ចុះត្រូវតម្រៀបតាមរបៀបណាមួយ ឧទាហរណ៍ បែងចែកជាក្រុម នោះកុងតឺន័រមួយត្រូវបានប្រើប្រាស់សម្រាប់ក្រុមនីមួយៗ ដែលរួមមានការបើក និងបិទស្លាក optgroup ដែលមានផ្នែកនៃធាតុបញ្ជីទម្លាក់ចុះ។ ទោះយ៉ាងណាក៏ដោយ មានគុណលក្ខណៈពីរសម្រាប់ការបង្កើតបញ្ជីទម្លាក់ចុះបែបនេះ។

  1. ស្លាក - កំណត់ឈ្មោះក្រុមនីមួយៗជាប៉ារ៉ាម៉ែត្រ៖

  ជម្រើស Textarea Label Fieldset Legend

  ជម្រើស Textarea Label Fieldset Legend

  រឿងដូចគ្នា ប៉ុន្តែមានច្រើន និងទំហំ = "7" នៃស្លាកជ្រើសរើស៖

  ជម្រើស Textarea Label Fieldset Legend

  ជម្រើស Textarea Label Fieldset Legend

  2. បិទ (គ្មានតម្លៃ) - រារាំងការជ្រើសរើសធាតុនៃក្រុមដែលទាក់ទងនឹងវាត្រូវបានដំឡើង ហើយធាតុអសកម្មជាធម្មតាត្រូវបានបន្លិច ប្រផេះ:

  ជម្រើស Textarea Label Fieldset Legend

  ជម្រើស Textarea Label Fieldset Legend

  វីដេអូខ្លីៗនឹងមានប្រយោជន៍នៅទីនេះ៖

  វាលអត្ថបទក្នុងទម្រង់ដោយប្រើ textarea

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

  បញ្ចូលអត្ថបទ៖

  បញ្ចូលអត្ថបទ៖

  អ្នកអាចអនុវត្តការបំបែកបន្ទាត់នៅក្នុងវាល ហើយអត្ថបទនឹងត្រូវបានផ្ទេរទៅខួរក្បាលនៅលើម៉ាស៊ីនមេ ដោយគិតគូរពីការផ្លាស់ប្តូរដែលបានធ្វើ។ វាលអាចត្រូវបានលាតសន្ធឹងក្នុងទទឹងនិងប្រវែងដោយចុចលើជ្រុងខាងស្តាំខាងក្រោមដែលត្រូវបានសម្គាល់ដោយឆ្នូតអង្កត់ទ្រូងពីរ។

  ឥឡូវ​យើង​ព្យាយាម​បន្ថែម​គុណលក្ខណៈ​ជា​ច្រើន​ជាមួយ​ប៉ារ៉ាម៉ែត្រ​ទៅ​កូដ​ដើម៖

  1. ឈ្មោះ - កំណត់ឈ្មោះនៃផ្ទៃអត្ថបទជាតម្លៃដើម្បីកំណត់អត្តសញ្ញាណវាបន្ទាប់ពីការបញ្ជូនទិន្នន័យទម្រង់នៅពេលដែលវាត្រូវបានដំណើរការនៅលើម៉ាស៊ីនមេ។

  2. Cols - ទទឹងវាល ដែលត្រូវបានបញ្ជាក់ជាប៉ារ៉ាម៉ែត្រជាលេខ ឈរនៅក្បែរនិមិត្តសញ្ញាដូចគ្នាត្រូវបានដាក់ផ្ដេក។ តម្លៃលំនាំដើមគឺ 20.

  3. ជួរដេក - កម្ពស់នៃវាលអត្ថបទដែលកំណត់ដោយចំនួនបន្ទាត់។ ប្រសិនបើចំនួនបន្ទាត់នៃអត្ថបទដែលបានបញ្ចូលដោយអ្នកប្រើប្រាស់គឺធំជាងតម្លៃដែលបានបញ្ជាក់ដោយគុណលក្ខណៈនេះ នោះ ឆ្នូតបញ្ឈររមូរ។

  4. ប្រវែងអតិបរមា - បង្ហាញពីចំនួនអតិបរមានៃតួអក្សរដែលអាចដាក់ក្នុងវាលអត្ថបទ។ ប្រសិនបើលើសពីដែនកំណត់នោះ ការបញ្ចូលបន្ថែមនឹងមិនអាចទៅរួចទេ។

  ខាងក្រោមនេះជាឧទាហរណ៍ជាមួយនឹងគុណលក្ខណៈខាងលើ ឥទ្ធិពលនីមួយៗ អ្នកអាចពិនិត្យមើលខ្លួនឯងបានដោយគ្រាន់តែដាក់ចំនួនអក្សរ និងបន្ទាត់ដែលត្រូវការនៅក្នុងតំបន់អត្ថបទ (អ្នកអាចបញ្ចូលតួអក្សរដូចគ្នាច្រើនដង)៖

  បញ្ចូលអត្ថបទ៖

  បញ្ចូលអត្ថបទ៖

  5. Minlength - បញ្ជាក់ចំនួនតួអក្សរអប្បបរមាដែលត្រូវតែបញ្ចូលក្នុងផ្ទៃអត្ថបទ។ ប្រសិនបើអ្នកប្រើព្យាយាមផ្ញើសារដែលមានតួអក្សរតិចជាងនេះ កម្មវិធីរុករកតាមអ៊ីនធឺណិតនឹងបង្ហាញសារខ្លីមួយជាមួយនឹងព័ត៌មានដែលនឹងមានការលើកឡើងអំពីតម្រូវការក្នុងការបំពេញបន្ថែមខ្លឹមសារនៃទម្រង់បែបបទ និងចំនួនតួអក្សរដែលបានបញ្ចូលរួចហើយ។

  7. Readonly (ដោយគ្មានប៉ារ៉ាម៉ែត្រ) - ប្រសិនបើអ្នកភ្ជាប់គុណលក្ខណៈនេះទៅ textarea នោះប្រអប់អត្ថបទនឹងមិនអាចកែសម្រួលបានដោយអ្នកប្រើប្រាស់ទេ ហើយនឹងត្រូវបានអានតែប៉ុណ្ណោះ។ ប៉ុន្តែអ្នកអាចផ្តោតលើវា (ផ្លាស់ទីទស្សន៍ទ្រនិចទៅវាលហើយចុចខាងឆ្វេង) ក៏ដូចជាជ្រើសរើសនិងចម្លង (ដោយផ្នែកឬទាំងស្រុង) អត្ថបទ៖

  គុណលក្ខណៈមួយចំនួនទៀតដែលអនុវត្តមុខងារបន្ថែមនៅពេលបំពេញវាល៖

  8. ការបំពេញដោយស្វ័យប្រវត្តិ - បង្ហាញថាតើកម្មវិធីរុករកគួរតែផ្តល់ព័ត៌មានជំនួយនៅពេលអ្នកប្រើបំពេញទម្រង់ដោយផ្អែកលើទិន្នន័យដែលបានបញ្ចូលពីមុន និងធ្វើឱ្យវាអាចបញ្ចូលអត្ថបទសមរម្យដោយស្វ័យប្រវត្តិ។

  មានតែ ប៉ារ៉ាម៉ែត្រពីរ: បើក (បើក) និងបិទ (បិទ) ។ នេះជាឧទាហរណ៍កូដ៖

  បញ្ចូលអត្ថបទ៖

  គុណលក្ខណៈនេះដែលមានតម្លៃ "បើក" ដំណើរការតែនៅពេលដែលការបំពេញដោយស្វ័យប្រវត្តិនៃវាលទម្រង់ត្រូវបានបើកនៅក្នុងកម្មវិធីរុករកតាមអ៊ីនធឺណិតរបស់អ្នកប្រើជាក់លាក់។

  9. Wrap - កំណត់ច្បាប់របស់កម្មវិធីរុករកតាមអ៊ីនធឺណិតសម្រាប់ការរុំបន្ទាត់នៅក្នុងតំបន់អត្ថបទដោយប្រើតម្លៃបី៖

  ទន់- សំណុំនៃតួអក្សរដែលមិនសមនឹងវាលនៅក្នុងទទឹងត្រូវបានផ្ទេរដោយស្វ័យប្រវត្តិទៅបន្ទាត់ថ្មី។ ក្នុងករណីនេះខួរក្បាល អត្ថបទនឹងត្រូវបានផ្ញើជាបន្ទាត់មួយ។. ប្រសិនបើអ្នកប្រើផ្ទេរអត្ថបទនៅក្នុងណាមួយ។ នៅកន្លែងត្រឹមត្រូវ។ដោយប្រើគ្រាប់ចុច "បញ្ចូល" បន្ទាប់មកការផ្ទេរនេះត្រូវបានរក្សាទុកនៅពេលដាក់ស្នើទម្រង់គេហទំព័រ។

  បញ្ចូលអត្ថបទ៖

  បញ្ចូលអត្ថបទ៖

  រឹង— សហសញ្ញា​ត្រូវ​បាន​បង្កើត​ដោយ​ស្វ័យ​ប្រវត្តិ ប្រសិន​បើ​អត្ថបទ​មិន​សម​នឹង​វាល​ក្នុង​ទទឹង ហើយ​នៅ​ពេល​ផ្ញើ​ទៅ processor កន្លែង​នៃ​សហសញ្ញា​នឹង​ត្រូវ​បាន​រក្សា​ទុក។ ជម្រើសនេះត្រូវបានប្រើតែនៅក្នុង ភ្ជាប់ជាមួយគុណលក្ខណៈ cols:

  បញ្ចូលអត្ថបទ៖

  បញ្ចូលអត្ថបទ៖

  បិទ- បិទការបំបែកបន្ទាត់។ ប្រសិនបើអ្នកបោះពុម្ពបំណែកអត្ថបទដោយគ្មានការផ្ទេរមេកានិកដោយប្រើគ្រាប់ចុច "បញ្ចូល" នោះអត្ថបទទាំងមូលនឹងត្រូវបានដាក់នៅលើបន្ទាត់មួយ ហើយរបាររមូរផ្តេកនឹងលេចឡើង៖

  បញ្ចូលអត្ថបទ៖

  បញ្ចូលអត្ថបទ៖

  10. Autofocus (មិនមានប៉ារ៉ាម៉ែត្រ) - ផ្តួចផ្តើមផ្តោតលើវាលអត្ថបទនៅពេលផ្ទុកទំព័រជាមួយទម្រង់។

  11. បិទ - មិនដូចគុណលក្ខណៈបានតែអានទេ (ដែលហាមឃាត់ការកែសម្រួលមាតិកានៃវាលផងដែរ ប៉ុន្តែធ្វើឱ្យវាអាចផ្តោតលើវា) រារាំងទាំងស្រុងនូវការចូលទៅកាន់ផ្ទៃអត្ថបទ ដែលជាធម្មតាមានពណ៌នៅក្នុង ពណ៌ប្រផេះ:

  វាលអត្ថបទអសកម្ម

  ថ្ងៃនេះខ្ញុំចង់បង្ហាញ "រូបមន្ត" តូចមួយសម្រាប់បង្កើតបញ្ជីនៅក្នុង CSS ។ គ្មាន JQuery គ្មាន CSS3 - គ្រាន់តែជា CSS ឆ្លងកាត់កម្មវិធីរុករកចាស់ល្អ។ ឧទាហរណ៍គឺសាមញ្ញណាស់ ដូច្នេះសមមិត្តដែលមានបទពិសោធន៍ប្រហែលជាមិនចាប់អារម្មណ៍ទេ។ យើងនឹងអនុវត្តបញ្ជីទម្លាក់ចុះដែលមានប៊ូតុងសង្គម។
  

  អញ្ចឹង​មិន​និយាយ​យូរ​ទេ ចាំ​ត្រង់​ទៅ

  HTML ចែករំលែកការបង្ហោះនេះ។
  • ហ្វេសប៊ុក
  • Twitter
  • Google Plus
  • នៅក្នុងការទំនាក់ទំនងជាមួយ
  • RSS

  ខ្ញុំលុបចោលដោយចេតនា ចំណុចទូទៅដូចជាការរួមបញ្ចូលរចនាប័ទ្ម ដើម្បីកុំឱ្យកូដកើនឡើង។ នៅផ្នែកខាងក្រោមនៃទំព័រខ្ញុំនឹងផ្តល់តំណភ្ជាប់ទៅប្រភព - អ្វីគ្រប់យ៉ាងគឺនៅទីនោះ។
  អ្វីដែលយើងមាននៅក្នុង HTML គឺជាបញ្ជីធម្មតា និងបឋមកថាមិនធម្មតា។ លក្ខណៈពិសេសមិនធម្មតារបស់វាគឺថាវាត្រូវបានបង្កើតឡើងជាមួយនឹងតំណខ្ពស់ដែលអនុញ្ញាតឱ្យអ្នកតាមដានព្រឹត្តិការណ៍ :hover នោះគឺជា hover ។ បញ្ជីទម្លាក់ចុះនឹងដំណើរការនៅពេលអ្នកដាក់លើចំណងជើង។

  CSS

  ជាដំបូង សូមក្រឡេកមើលរចនាប័ទ្មមូលដ្ឋាននៃបញ្ជីទម្លាក់ចុះ។ ខ្ញុំ​បាន​ព្យាយាម​ធ្វើ​អត្ថាធិប្បាយ​គ្រប់​បន្ទាត់​នៃ​កូដ ដើម្បី​ឱ្យ​វា​កាន់​តែ​ច្បាស់៖

  /*កំណត់បន្ទះឡើងវិញ*/ .droplink ul,.droplink h3,.droplink h3 a( padding:0;margin:0) /*Basic wrapper*/ .droplink ( width:200px; position:absolute; margin:10px 0 0 25px ) /*Hover block style*/ .droplink:hover( height:auto; background-color:#3E403D; border:solid 1px #3A3C39 ) /*Title in normal state*/ .droplink h3 a( text-align:center ទទឹង៖ 100% ការបង្ហាញ៖ ប្លុក; ទម្ងន់៖ ដិត ទីតាំង៖ ដាច់ខាត)

  មិនមានអ្វីពិសេសនៅទីនេះទេ យើងបានចង្អុលបង្ហាញទំហំ និងរចនាប័ទ្មនៃប្លុក រចនាប័ទ្មនៃបឋមកថា និងសម្រាប់ធាតុទាំងពីរ រចនាប័ទ្មរបស់ពួកគេនៅពេលដាក់ទស្សន៍ទ្រនិច។ ទៅ​ពេល​ខាង​មុខ:

  /*លាក់បញ្ជីដោយមិនដាក់កណ្ដុរ*/ .droplink ul(list-style:none; display:none) /*Display the list on hover*/ .droplink:hover ul( display:block; margin-top:40px) .droplink li (បង្ហាញ៖ ប្លុក)

  លេខកូដនេះកាន់តែគួរឱ្យចាប់អារម្មណ៍ និងបង្ហាញពីរបៀបដែលបញ្ជីទម្លាក់ចុះមានឥរិយាបថនៅពេលដាក់ពីលើ។ ក្នុងស្ថានភាពធម្មតាវាមានតម្លៃ បង្ហាញ៖ គ្មាន,នោះគឺវាមិនត្រូវបានបង្ហាញទេ។ នៅ​ពេល​ដាក់​លើ យើង​បង្ហាញ​វា​ជា​ប្លុក។ នោះជាអាថ៌កំបាំងទាំងស្រុង។ ឥឡូវនេះ ចូរយើងតុបតែងធាតុបញ្ជីបន្តិច ហើយបញ្ចូលរូបតំណាង៖

  /*List item style*/ .droplink li a(padding:5px 12px 4px 34px; margin:1px; background-color:#484A47; display:block; color:#FFF; text-decoration:none; font-size:12px ; background-repeat: no-repeat ទីតាំងផ្ទៃខាងក្រោយ៖ 10px 3px ) /*Hover element style*/ .droplink li a:hover( background-color:#999 ) /*Icons*/ .facebook a (background-image) :url("icons/facebook.png")) .twitter a (background-image:url("icons/twitter.png")) .vk a (background-image:url("icons/vk.png")) .rss a (background-image:url("icons/rss.png")) .gplus a (background-image:url("icons/gplus.png"))

  នោះហើយជាទាំងអស់ តាមពិត។ បញ្ជីទម្លាក់ចុះគឺរួចរាល់ហើយមើលទៅស្អាតណាស់។ អ្នកអាចរចនាធាតុតាមការសំរេចចិត្តរបស់អ្នក បន្ថែមជ្រុងមូល និងកណ្តឹង និងហួចផ្សេងទៀត។

  ប្រសិនបើអ្នកចង់ឱ្យបញ្ជី "ត្រួតលើគ្នា" អត្ថបទខាងក្រោមវានៅពេលដាក់ មើលទៅចំហៀង z-សន្ទស្សន៍.

  ប្រសិនបើមានអ្វីមួយមិនច្បាស់លាស់ ឬមិនដំណើរការ សូមសួរក្នុងមតិយោបល់ ឬប្រើប៊ូតុង "ផ្ញើសារ" វានៅទីនោះ ->

  
  
  

  សម្ភារៈពាក់ព័ន្ធ៖

  1. ការតាំងពិព័រណ៍ស្នាដៃរបស់ Kuzma Petrov-Vodkin បានបើកនៅក្នុងសារមន្ទីររុស្ស៊ី
  2. ក្រុមហ៊ុន Renaissance និងភាពទំនើប
  3. សេចក្តីណែនាំ៖ របៀបបំពេញ SZV-M ឱ្យបានត្រឹមត្រូវសម្រាប់ស្ថាបនិកដោយមិនមានប្រាក់ខែ តើខ្ញុំត្រូវដាក់ SZV-M សម្រាប់ស្ថាបនិកដែរឬទេ?
  4. Ethnopsychology: ទំនាក់ទំនងជាតិសាសន៍ ប្រជាជនតូចៗនៃ Dagestan