ទម្រង់​បែបបទ (HTML Forms)

ការបង្កើតទម្រង់បញ្ជូលទិន្នន័យ (HTML Forms & Inputs)

Form គឺជាផ្នែកដ៏មានឥទ្ធិពលបំផុតនៅក្នុង HTML សម្រាប់ការប្រាស្រ័យទាក់ទង (Interactive) រវាងអ្នកប្រើប្រាស់ និង Server! គ្រប់ពេលដែលអ្នក Log In, បង្កើតគណនីថ្មី, បញ្ចូលទិន្នន័យកាតធនាគារ, ឬស្វែងរកទិន្នន័យលើ Google, នោះអ្នកកំពុងតែប្រើប្រាស់ Form ហើយ។

១. រចនាសម្ព័ន្ធរបស់ Form និង Attributes សំខាន់ៗ

យើងប្រើប្រាស់ Tag <form> ដើមបើក្តោបប្រអប់បញ្ជូលទិន្នន័យទាំងអស់ (Inputs) និងប៊ូតុង។ វាត្រូវការ Attribute សំខាន់ពីរ៖

• action="/submit-url" : ប្រាប់ Form ថា ពេលចុចបញ្ជូន (Submit) តើត្រូវយកទិន្នន័យនេះទៅអោយ Server មួយណា?
• method="GET" ឬ "POST" : GET យកទិន្នន័យទៅបង្ហាញជាប់លើ URL (ល្អសម្រាប់ការ Search)។ POST លាក់ទិន្នន័យក្នុងខ្លួន (មានសុវត្ថិភាពខ្ពស់ ត្រូវតែប្រើសម្រាប់រឿងសំងាត់ដូចជា Password ជាដើម)។

២. ប្រអប់អត្ថបទ (Input Types)

Tag <input> គឺជា Empty Element ដ៏អស្ចារ្យ ព្រោះវាអាចប្រែក្រឡាបានរាប់សិបមុខ ដោយគ្រាន់តែប្តូរ Attribute type។ ខាងក្រោមនេះគឺជាប្រភេទពេញនិយម៖

• type="text" : សម្រាប់វាយអក្សរធម្មតា (ឈ្មោះ)។
• type="password" : លាក់អក្សរទៅជាចំណុចខ្មៅៗ ដើម្បីកុំអោយអ្នកឈរក្បែរមើលឃើញ។
• type="email" : វានឹងជួយចាប់កំហុស បើអ្នកប្រើប្រាស់ភ្លេចវាយសញ្ញា @។
• type="number" : សម្រាប់វាយលេខ (អាចកំណត់ min និង max បាន)។
• type="radio" : ប្រអប់មូល ដែលអាចជ្រើសរើសបាន តែមួយគត់ ក្នុងចំណោមជម្រើសច្រើន (ឧទាហរណ៍៖ រើសភេទ ត្រូវដាក់ name អោយដូចគ្នា)។
• type="checkbox" : ប្រអប់ការ៉េ ដែលអាចជ្រើសរើសបាន ច្រើនក្នុងពេលតែមួយ (ឧ. ចំណូលចិត្ត)។
• type="date" : លោតចេញជាប្រតិទិនអោយរើសថ្ងៃខែ។
• type="submit" : ប៊ូតុងពណ៌ខៀវ ដែលចុចទៅ វានឹងវេចខ្ចប់ទិន្នន័យក្នុង Form ទាំងអស់ផ្ញើទៅ Server!

៣. ប្រអប់ធំៗ និងជម្រើស (Textarea & Select)

ចុះបើចង់វាយអត្ថបទវែងៗដូចជា មតិយោបល់ (Comments)? ប្រើ <textarea>។

ចុះបើចង់បង្កើតជាម៉ឺនុយទម្លាក់ចុះ (Dropdown) អោយគេរើសខេត្ត? ប្រើ <select> រួមជាមួយកូនចៅ <option>។

៤. តួនាទីដ៏សំខាន់របស់ name និង label

• <label> : គឺជាអក្សរពន្យល់ពីប្រអប់នីមួយៗ។ ភាពឆ្លាតវៃរបស់វាគឺ បើអ្នកប្រើ for="id_របស់_input" ពេលដែលអ្នកចុចលើអក្សរ វានឹងលោត (Focus) ទៅប្រអប់នោះដោយស្វ័យប្រវត្តិ (មានប្រយោជន៍ខ្លាំងណាស់សម្រាប់ Checkbox តូចៗ ដែលពិបាកចុច)។
• name="..." : នេះគឺចាំបាច់បំផុត! បើគ្មាន Name ទេ Server នឹងមិនដឹងថាទិន្នន័យនេះជារបស់ប្រអប់មួយណាឡើយ។ ប្រអប់ទាំងអស់ត្រូវតែមាន name (ឧ. name="username")។
• placeholder="..." : អក្សរព្រាលៗនៅក្នុងប្រអប់ ដើម្បីផ្តល់ជាឧទាហរណ៍ (វានឹងរលាយបាត់ពេលយើងចាប់ផ្តើមវាយ)។
• required : ជា Attribute បង្ខំ! បើមិនបំពេញប្រអប់នេះទេ គឺមិនអោយចុច Submit ដាច់ខាត។