ទម្រង់បែបបទ (HTML Forms)
ទម្រង់បែបបទ HTML គឺជាធាតុសំខាន់ក្នុងការប្រមូលព័ត៌មានពីអ្នកប្រើប្រាស់ ។ Form អាចប្រើសំរាប់ការចុះឈ្មោះ ការចូលប្រើប្រាស់ ការស្វែងរក ការបញ្ជូនមតិយោបល់ និងមុខងារជាច្រើនទៀត ។
HTML forms collect user input through various input elements like text fields, radio buttons, checkboxes, dropdown lists, and more.
១. រចនាសម្ព័ន្ធមូលដ្ឋាននៃ Form (Basic Form Structure)
Form ទាំងអស់ត្រូវរុំក្នុង <form> element ។ នៅខាងក្រោយគឺជា attribute សំខាន់ៗរបស់ <form>:
action- URL ដែលត្រូវបញ្ជូនទិន្នន័យទៅកាន់ (specifies where to send form data)method- របៀបបញ្ជូនទិន្នន័យ:GETឬPOST(HTTP method for sending data)name- ឈ្មោះរបស់ form សំរាប់កំណត់អត្តសញ្ញាណ (form identifier)target- កំណត់ទីតាំងបង្ហាញលទ្ធផល:_self,_blank,_parent,_top
ឧទាហរណ៍មូលដ្ឋាន (Basic Example):
២. ប្រភេទ Input ទាំងអស់ (All Input Types)
HTML5 បានផ្តល់ input type ជាច្រើនដែលមានមុខងារផ្សេងៗគ្នា ។
Text Input Types:
Number & Range Inputs:
Date & Time Inputs:
Color Picker:
Radio Buttons & Checkboxes:
File Upload:
Hidden & Submit Inputs:
៣. Input Attributes សំខាន់ៗ (Important Input Attributes)
Attributes ទាំងនេះជួយក្នុងការត្រួតពិនិត្យ និងបង្កើនបទពិសោធន៍អ្នកប្រើប្រាស់ ។
| Attribute | ពិពណ៌នា (Description) | ឧទាហរណ៍ (Example) |
|---|---|---|
required |
ចាំបាច់ត្រូវបំពេញ (Must be filled) | <input type="text" required> |
placeholder |
អត្ថបទបង្ហាញជាគំរូ (Hint text) | <input placeholder="បញ្ចូលឈ្មោះ"> |
value |
តម្លៃលំនាំដើម (Default value) | <input value="Cambodia"> |
readonly |
អានតែបាន មិនអាចកែ (Read only) | <input value="Fixed" readonly> |
disabled |
បិទមិនឲ្យប្រើ (Disabled) | <input disabled> |
maxlength |
ចំនួនតួអក្សរអតិបរមា (Max characters) | <input maxlength="10"> |
min, max |
តម្លៃអប្បបរមា និងអតិបរមា (Min/max value) | <input type="number" min="1" max="100"> |
step |
ចន្លោះនៃលេខ (Number interval) | <input type="number" step="0.5"> |
pattern |
Regular expression សំរាប់ត្រួតពិនិត្យ (Validation pattern) | <input pattern="[0-9]{3}-[0-9]{3}"> |
autofocus |
ផ្តោតស្វ័យប្រវត្តិពេលផ្ទុកទំព័រ (Auto focus on load) | <input autofocus> |
autocomplete |
បំពេញស្វ័យប្រវត្តិ (Auto-complete) | <input autocomplete="on"> |
៤. <label> Element
<label> ត្រូវបានប្រើដើម្បីបង្កើតស្លាកសម្គាល់សំរាប់ input elements ។ ការប្រើ for attribute ជាមួយ id នៃ input នឹងធ្វើឲ្យការចុចលើ label ក៏ដូចជាចុចលើ input ដែរ ។
៥. <select> - បញ្ជីជ្រើសរើស (Dropdown List)
<select> ប្រើសំរាប់បង្កើតបញ្ជីជ្រើសរើសចុះក្រោម ។ ប្រើ <option> សំរាប់ជម្រើសនីមួយៗ ។
Multiple Selection with <optgroup>:
ចុច Ctrl (Windows) ឬ Cmd (Mac) ដើម្បីជ្រើសច្រើន
៦. <textarea> - ប្រអប់អត្ថបទ (Text Area)
<textarea> ប្រើសំរាប់បញ្ចូលអត្ថបទច្រើនបន្ទាត់ ។
៧. <fieldset> និង <legend>
<fieldset> ប្រើដើម្បីដាក់ក្រុមធាតុផ្សេងៗនៃ form ជាមួយគ្នា ។ <legend> ជាចំណងជើងសំរាប់ fieldset ។
៨. Form Validation (ការត្រួតពិនិត្យទម្រង់)
HTML5 មានមុខងារត្រួតពិនិត្យភាពត្រឹមត្រូវរបស់ទិន្នន័យដោយស្វ័យប្រវត្តិ ។
ឧទាហរណ៍នៃ Validation:
៩. ឧទាហរណ៍ពិតប្រាកដ (Real-World Examples)
Form ចុះឈ្មោះ (Registration Form):
Form ចូលប្រើប្រាស់ (Login Form):
Form ទំនាក់ទំនង (Contact Form):
១០. GET vs POST Methods
ការប្រៀបធៀបរវាង GET និង POST methods:
| លក្ខណៈ | GET | POST |
|---|---|---|
| ទិន្នន័យនៅក្នុង URL | បាទ/ចាស - ទិន្នន័យបង្ហាញនៅក្នុង URL | ទេ - ទិន្នន័យលាក់នៅក្នុង request body |
| សុវត្ថិភាព | មិនសុវត្ថិសម្រាប់ព័ត៌មានសម្ងាត់ | សុវត្ថិជាងសម្រាប់ព័ត៌មានសម្ងាត់ |
| ទំហំទិន្នន័យ | មានកំណត់ (តិចជាង 2048 តួអក្សរ) | គ្មានកំណត់ |
| ការប្រើប្រាស់ | ស្វែងរក, ទំព័របង្ហាញទិន្នន័យ | ចុះឈ្មោះ, ចូលប្រើប្រាស់, ផ្ទុកឯកសារ |
ឧទាហរណ៍:
១១. Best Practices (ការអនុវត្តល្អបំផុត)
- ប្រើ
<label>ជានិច្ច - ធ្វើឲ្យ form មានភាពអាចចូលដំណើរការបាន (accessible) និងងាយស្រួលប្រើ - ប្រើ
placeholderជាគំរូ - ជួយឲ្យអ្នកប្រើយល់ពីទម្រង់នៃទិន្នន័យ - ប្រើ HTML5 validation - រក្សាទុកពេលវេលា និងបង្កើនបទពិសោធន៍អ្នកប្រើ
- ប្រើ POST សម្រាប់ព័ត៌មានសម្ងាត់ - កុំប្រើ GET សម្រាប់ពាក្យសម្ងាត់ ឬទិន្នន័យសម្ងាត់
- ដាក់ក្រុមដោយប្រើ
<fieldset>- ធ្វើឲ្យ form មានរចនាសម្ព័ន្ធល្អ - ប្រើ
autocomplete- ជួយបំពេញទិន្នន័យលឿនជាង - ប្រើ
requiredattribute - កំណត់វាលចាំបាច់ - ប្រើ input type ត្រឹមត្រូវ -
emailសំរាប់អ៊ីមែល,telសំរាប់ទូរស័ព្ទ,dateសំរាប់កាលបរិច្ឆេទ - ផ្តល់មតិត្រឡប់មកពីការ validation - ប្រាប់អ្នកប្រើពីកំហុសឲ្យបានច្បាស់
- គិតអំពី Mobile Users - input type ត្រឹមត្រូវនឹងបង្ហាញ keyboard ត្រឹមត្រូវនៅលើទូរស័ព្ទ
១២. សេចក្តីសន្និដ្ឋាន (Conclusion)
HTML Forms គឺជាឧបករណ៍ដ៏មានប្រសិទ្ធភាពសំរាប់ប្រមូលព័ត៌មានពីអ្នកប្រើប្រាស់ ។ ការប្រើ input types, attributes, និង validation ត្រឹមត្រូវនឹងបង្កើតបទពិសោធន៍អ្នកប្រើល្អ និងកាត់បន្ថយកំហុសនៃការបញ្ចូលទិន្នន័យ ។
ចូលមើលមេរៀនបន្ទាប់ដើម្បីស្វែងយល់អំពី HTML <head> element!