សីហា
HTML 5 បន្ថែមសមត្ថភាពឲ្យ Text Box
នៅក្នុងពេលនេះគេហទំព័រ www.antkh.com យើងនឹងលើកយកពីការប្រើប្រាស់ Control ថ្មីមួយរបស់ HTML 5 ដែលមានលក្ខណៈងាយស្រួលនៅពេលដែលអ្នកចង់យក TextBox សម្រាប់ Search ហើយអ្នកមិនចាំបាច់ប្រើកូដបន្ថែមនោះទេ ។
នេះជារូបពេលដែលយើងដំណើរការវានឹងចេញពាក្យស្វែងរកដែលមានពណ៌ប្រផេះ
បន្ទាប់ពីយើងវាយពាក្យនៅក្នុង TextBox នោះវានឹងចេញ Button សម្រាប់លុបដោយខ្លួនឯង
ការប្រើប្រាស់ HTML 5
ជាធម្មតា នៅក្នុង Form របស់ HTML ដែលអ្នកកំពុងប្រើសព្វថ្ងៃមាន Attribute មួយឈ្មោះ Type ដែលក្នុង នោះមាន Value មួយចំនួនដូចជា Text , Password, Radio, CheckBox និង Submit ជាដើម ។ តែចំពោះ HTML 5 វាមាននូវ Value ថ្មីមួយចំនួនទៀតសម្រាប់បង្កលក្ខណៈងាយស្រួលដល់ Programmer ព្រោះក្នុង នោះអ្នកមិនចាំបាច់សរសេរកូដបន្ថែម ឬ ទាញ library ណាមកប្រើទេគឹវាអាចដំណើរការបានតែម្តង ក៏ ប៉ុន្តែ វាមិន Support ជាមួយ Browser ទាំងអស់ទេ ។
ខាងក្រោមយើងនឹងលើកយកពីការ ប្រើ Value ថ្មីមួយរបស់ Attribute នៅក្នុងForm មកធ្វើការបង្ហាញ ៖
- នៅបន្ទាត់ទី ៤ និង ទី ៥ ត្រង់ content=”text/html; charset=utf-8” គឺជា កូដសម្រាប់ឲ្យគេហទំព័ររបស់អ្នក អាចវាយអក្សរ Unicode និង អាចមើលអក្សរ Unicode បាន ។
- នៅបន្ទាត់ទី ៧ ជាចំណងជើងរបស់គេហទំព័ររបស់អ្នក គឺយើងត្រូវវាយចំណងជើងនោះនៅចន្លោះ Tag <title></title>ហើយត្រូវនៅក្នុង Block របស់ Tag <head> ។
- ចំណែកនៅបន្ទាត់ទី ១១ និង ១២ យើងប្រើ tag មួយឈ្មោះ input ដែលមាន attribute ចំនួនបី គឺ type=”Search” សម្រាប់កំណត់ប្រភេទ Control ដែលមានលក្ខណៈជា TextBox សម្រាប់ធ្វើការ Search , Name ជាឈ្មោះរបស់ Control និង placeholder ជាអក្សរដែលនឹងចេញនៅពេលដែលដំណើរការកូដនោះ ។
នេះជាលទ្ធផលនៃការដំណើរការកូដខាងលើ
ហើយនៅពេលដែលអ្នកដាក់ Cursor ចូលក្នុង TextBox នោះវានឹង Clear ពាក្យដែលអ្នកដាក់នៅក្នុង placeholder ហើយនៅពេលដែលអ្នកមាន Character ណាមួយវានឹងមាន Button សម្រាប់ឲ្យអ្នកធ្វើការ លុបពាក្យទាំងនោះបាន ។
ដំណើរការលើ Browser
Attribute ខាងលើដំណើរការជាមួយ Firefox 4.0, Opera 11.0, Chrome 3.0 និង Safari 3.0 ឡើង ប៉ុន្តែ មិនដំណើរការជាមួយ IE 8.0 ទេ ។
♦សម្រាប់ព័ត៌មានទំនាក់ទំនងមកយើងខ្ញុំ ៖ លេខទូរសព្ទ ០១០ / ០១៦ ៦៦៦ ៦៥៣
ឬ Facebook: https://www.facebook.com/anttrainning
Facebook Page: ANT Magazine & ANT Learner
Facebook Group: https://www.facebook.com/groups/ANTTrGroup/
.tb_button {padding:1px;cursor:pointer;border-right: 1px solid #8b8b8b;border-left: 1px solid #FFF;border-bottom: 1px solid #fff;} .tb_button.hover {borer:2px outset #def; background-color: #f8f8f8 ! important;} .ws_toolbar {z-index:100000} .ws_toolbar .ws_tb_btn {cursor:pointer;border:1px solid #555;padding:3px} .tb_highlight {background-color:yellow} .tb_hide {visibility:hidden} .ws_toolbar img {padding:2px;margin:0px}
មតិ និងយោបល់ទៅលើអត្ថបទនេះ (តាម Facebook)
ខាងក្រោមនេះជាយោបល់ផ្សេងៗរបស់អ្នកទស្សនា