ទម្រង់​បែបបទ

មេរៀន​នេះ មាន​ជា​វីដេអូ ។

មេរៀន​ជា​វីដេអូ

ទម្រង់​បែបបទ​មាន​ដូចជា ៖

<form>

<form> ប្រើ​សំរាប់​បង្កើត​ទម្រង់​បែបបទ ដោយ​ក្ដោប​ក្ដាប់​ប្រអប់​បំពេញ​ឈ្មោះ ប្រអប់​បំពេញ​អក្សរ​សម្ងាត់ ប្រអប់​គ្រីស ចំនុច​ជ្រើសរើស... ដែល​វា​បង្ហាញ​ថា របស់​ក្នុង​នោះ​គឺ​ស្ថិត​នៅ​ក្នុង​បែបបទ​តែ​មួយ ។

Attribute
  • action កំណត់ URL ដែល​ត្រូវ​បញ្ជូន​ព័ត៌មាន​ទៅ​កាន់ ។ (តម្លៃ​ដើម​គឺ​ទំព័រ​បច្ចុប្បន្ន)
  • method កំណត់​ទម្រង់​នៃ​ការ​បញ្ជូន​ព័ត៌មាន ។ តម្លៃ​ដែល​សំខាន់ៗ​មាន ២
    • GET នឹង​បញ្ជូន​ព័ត៌មាន​ទាំងឡាយ​ទៅ​កាន់ URL ដែល​បាន​កំណត់​ដោយ action ។ (ជា​តម្លៃ​ដើម)
    • POST មិន​បញ្ជូន​ព័ត៌មាន​ទៅ​កាន់ URL ទេ ។ ជា​ទូទៅ​គេប្រើ POST method ប្រើ​សំរាប់​បញ្ជូន​ព័ត៌មាន​ផ្ទាល់ខ្លួន​ដូចជា អក្សរ​សម្ងាត់ជា​ដើម ។
  • target កំណត់​ទីតាំង​ដែល​ត្រូវ​បើក URL ដែល​បាន​កំណត់​ក្នុង action ។ តម្លៃ _blank គឺ​វា​នឹង​បើក នៅ​ក្នុង​ផ្ទាំង​ថ្មី​មួយ​ទៀត ។
<form method="post" target="_blank" action="/test/method">
    ឈ្មោះ
    <input type="text" name="name">
    <input type="submit" value="បញ្ជូន">
</form>
(សាក​ប្ដូរ method ពី post ទៅ url ហើយ​កត់​ចំណាំ URL)

ប្រអប់​អក្សរ

<input>

យើង​ត្រូវ​ប្រើ <input> ដើម្បី​បង្កើត​ប្រអប់​ដែល​អ្នក​ប្រើប្រាស់​អាច​បញ្ចូល​អក្សរ​បាន ។ ហើយ​ដើម្បី​ប្រាប់​អំពី​ប្រភេទ​នៃ​ប្រអប់​នោះ យើង​ត្រូវ​កំណត់ type ដែល​មាន​តម្លៃ​ដូច​ខាងក្រោម ៖

តម្លៃ​នៃ type
តម្លៃ​នៃ type បង្កើត​ប្រអប់​សំរាប់​ផ្ទុក
text អក្សរ
password អក្សរ​សម្ងាត់
email អាសយដ្ឋាន​អេឡិចត្រូនិច
tel លេខ​ទូរស័ព្ទ
url URL
search ពាក្យ​សម្រាប់​ស្វែង​រក
hidden ផ្ទុក​តម្លៃ​អ្វីក៏​បាន តែ​មិន​បង្ហាញ​រូបរាង
<form method="post" action="/test/method">
    <input type="text" name="name" placeholder="ឈ្មោះ"><br>
    <input type="password" name="password" placeholder="អក្សរសម្ងាត់"><br>
    <input type="email" name="email" placeholder="អាសយដ្ឋាន​អេឡិចត្រូនិច"><br>
    <input type="url" name="url" placeholder="ទំព័រ" value="http://www.khode.academy/"><br>
    <input type="tel" name="telephone" placeholder="លេខ​ទូរស័ព្ទ"><br>
    <input type="search" name="query" placeholder="ស្វែងរក">
    <input type="hidden" name="secret" value="hello world">
    <input type="submit" value="បញ្ជូន">
</form>

Attribute

តម្លៃ​គ្រប់​ប្រភេទ (ទោះ​ជា​លេខ​ក៏​ដោយ) នឹង​ត្រូវ​បញ្ជូន​ជា​អក្សរ​ទាំងអស់ ។

លំអិត​អំពី​ប្រភេទ​នីមួយៗ

<textarea>

ប្រើប្រាស់ <input> ខាងលើ គឺ​សំរាប់​តែ​ពាក្យ​ពេចន៍​បន្តិច​តែ​ប៉ុណ្ណោះ សំរាប់​ពាក្យ​ច្រើន​ជា​អត្ថបទ​មួយ​តែ​ម្ដង យើងត្រូវ​ប្រើ <textarea> ជំនួស​វិញ ។

<form method="post" action="/test/method">
    <textarea name="bio" placeholder="អំពី​អ្នក"></textarea>
    <input type="submit" value="បញ្ជូន">
</form>

ប្រអប់​លេខ

ដើម្បី​បង្កើត​ប្រអប់​សំរាប់​ផ្ទុក​លេខ ក៏​យើង​ប្រើ <input> ដែរ ។ តម្លៃ​នៃ type ដែល​យើង​ត្រូវ​សិក្សា​មាន ៖

តម្លៃ​នៃ type
តម្លៃ​នៃ type បង្កើត​ប្រអប់​សំរាប់​ផ្ទុក
number លេខ
range លេខ​ក្នុង​ដែន
<form method="post" action="/test/method">
    លេខ
    <input type="number" name="number" step="0.1"><br>
    លេខពី ៥ ទៅ ១០
    <input type="range" name="range" min="5" max="10" value="6"><br>
    <input type="submit" value="បញ្ជូន">
</form>

Attribute

ប្រអប់​កាលបរិច្ឆេទ

ដើម្បី​បង្កើត​ប្រអប់​សំរាប់​ផ្ទុក​លេខ ក៏​យើង​ប្រើ <input> ដែរ ។ តម្លៃ​នៃ type ដែល​យើង​ត្រូវ​សិក្សា​មាន ៖

តម្លៃ​នៃ type
តម្លៃ​នៃ type បង្កើត​ប្រអប់​សំរាប់​ផ្ទុក ទម្រង់​តម្លៃ
week សប្ដាហ៍ និង​ឆ្នាំ yyyy-Www
month ខែ និង​ឆ្នាំ yyyy-mm
date កាលបរិច្ឆេទ yyyy-mm-dd
time ម៉ោង​ពេល hh:mm
datetile-local កាលបរិច្ឆេទ និង​ម៉ោង​ពេល yyyy-mm-ddThh:mm
<form method="post" action="/test/method">
    សប្ដាហ៍
    <input type="week" name="week" disabled value="2018W15"><br>
    ខែ
    <input type="month" name="month"><br>
    កាលបរិច្ឆេទ
    <input type="date" name="date" autofocus><br>
    ម៉ោង​ពេល
    <input type="time" name="time" readonly value="08:45"><br>
    កាលបរិច្ឆេទ និង​ម៉ោង​ពេល
    <input type="datetime-local" name="datetime" required><br>
    <input type="submit" value="បញ្ជូន">
</form>

Attribute

យើង​អាច​ប្រើ​ min និង max ដើម្បី​កំណត់​ព្រំដែន​នៃ​តម្លៃ​ដែល​អនុញ្ញាត​ឲ្យ​កំណត់ ។

ប្រអប់​ជ្រើសរើស

ដើម្បី​បង្កើត​ប្រអប់​សំរាប់​ផ្ទុក​លេខ ក៏​យើង​ប្រើ <input> ដែរ ។ តម្លៃ​នៃ type ដែល​យើង​ត្រូវ​សិក្សា​មាន ៖

តម្លៃ​នៃ type
តម្លៃ​នៃ type បង្កើត​ប្រអប់​សំរាប់​ផ្ទុក
checkbox ការ​គ្រីស
radio ការ​ជ្រើសរើស
<form method="post" action="/test/method">
    ភេទ<br>
    <input type="radio" name="gender" value="m" id="male">
    <label for="male">ប្រុស</label><br>
    <input type="radio" name="gender" value="f" id="female" checked>
    <label for="female">ស្រី</label>
    <hr>
    យាន្ដជំនិះ<br>
    <lable>
        <input type="checkbox" name="vehicle" value="car"> យានយន្ដ
    </lable>
    <lable>
        <input type="checkbox" name="vehicle" value="motor"> ទោចក្រយានយន្ដ
    </lable>
    <lable>
        <input type="checkbox" name="vehicle" value="bicycle"> ទោចក្រយាន
    </lable>
    <hr>
    <input type="submit" value="បញ្ជូន">
</form>

Attribute

<label>

<label> ប្រើ​សំរាប់កំណត់​ស្លាក​ទៅ​ឲ្យ​ប្រអប់​ណាមួយ ។

ប្រអប់​សំរាប់​គ្រីស វា​មាន​ទំហំ​តូច ដែល​លំបាក​ក្នុង​ការ​ចុច ។ ដូចនេះ យើង​ប្រើ <label> ដូចកូដ​ខាងលើ យើង​អាច​ចុច​ពាក្យ​ក្នុង label នោះ ជំនួស​វិញ ក៏​បាន​ដែរ ។

ត្រូវប្រើ for ដើម្បី​កំណត់ id នៃ​ធាតុ ដែល​វា​ត្រូវ​ភ្ជាប់​ទៅ​កាន់ ។

ភាព​ខុស​គ្នា​រវាង​ប្រភេទ​ទាំង ២

ភាព​ខុស​គ្នា​រវាង checkbox និង radio គឺ ៖

ប្រភេទ​ទាំង ២ នេះ មាន​តម្លៃ​ដើម on ។ ជាទូទៅ វា​មិនមែន​ជា​តម្លៃ​ដែល​យើង​ត្រូវ​ការ​នោះ​ទេ ដូចនេះ​យើង​តែង​ត្រូវ​ការ​ប្ដូរ​តម្លៃ​របស់​វា ហើយ​វា​អាច​ត្រូវ​បាន​ប្ដូរ​បាន​ដោយ​ប្រើ value ជា​ធម្មតា ។

តម្លៃ​នៃ​ប្រអប់​មួយ នឹង​មិន​ត្រូវ​បាន​បញ្ជូន​ទៅ​ទេ ប្រសិន​បើ​យើង​មិន​ជ្រើសរើស​យក​ប្រអប់​នោះ ។

បញ្ជី​ជ្រើសរើស

បញ្ជី​ជ្រើសរើស គឺ​ជា​បញ្ជី​ដែល​អ្នក​ប្រើប្រាស់​អាច​ជ្រើសរើស​ទិន្នន័យ​បាន ។ ដើម្បី​បង្កើត​បញ្ជី​ជ្រើសរើស ត្រូវ​ប្រើ <select> ។ ប្រើ <option> សំរាប់​សរសេរ​ជួរ​បញ្ជី ។

<form method="post" action="/test/method">
    យានជំនិះ
    <select multiple size="4">
        <option selected>ទោចក្រយាន</option>
        <option>ទោចក្រយានយន្ដ</option>
        <option selected>រថយន្ដ</option>
        <option>អយស្ម័យយាន</option>
        <option>អាកាសយាន</option>
        <option>អវកាសយាន</option>
    </select>
    <input type="submit" value="បញ្ជូន">
</form>

Attribute

ប៊ូតុង

ក្នុង​ការ​បង្កើត​ប៊ូតុង នៅ​ក្នុង​មេរៀន​នេះ ក៏​ប្រើ <input> ដែរ ។ តម្លៃ​នៃ type ដែល​យើង​ត្រូវ​សិក្សា​មាន ៖

តម្លៃ​នៃ type
តម្លៃ​នៃ type បង្កើត​ប្រអប់​សំរាប់
button ប៊ូតុង​ធម្មតា (គ្មាន​លក្ខណៈ​ពិសេស)
color ផ្ទុក​ពណ៌
file ជ្រើសរើស​ឯកសារ
image ប៊ូតុង​បញ្ជូន​ជា​រូបភាព
reset ប៊ូតុង​ជម្រះ
submit ប៊ូតុង​បញ្ជូន
<form method="post" action="/test/method">
    ឈ្មោះ <input type="text" name="name" value="ឧសភ័ក្ត្រា"> <br>
    ពណ៌ <input type="color"> <br>
    រូបភាព <input type="file" accept="image/*"> <br>
    <input type="reset" value="ជម្រះ">
    <input type="image" src="/static/img/lesson/right-arrow.png">
</form>

Attribute

accept នៃ type=file សំរាប​កំណត់​ប្រភេទ​ឯកសារ​ដែល​អនុញ្ញាត​ឲ្យ​ជ្រើសរើស ។ បើ​មិន​កំណត់ នោះ​យើង​អាច​ជ្រើសរើស​ឯកសារ​គ្រប់​ប្រភេទ ។ តម្លៃ​របស់ accept យើង​អាច​សិក្សា​បាន​តាម​ទំព័រ​នេះ ។

ទំព៏រ​ដើម កូដ វីដេអូ បញ្ជី ចែករំលែក បោះពុម្ភ ឡើង​លើ Facebook Google Plus Twitter មតិ ឧបត្ថម្ភ ទំនាក់ទំនង អាជ្ញាប័ណ្ឌ សិទ្ធ​អ្នក​និពន្ធ បិទ Khode Academy មុន បន្ទាប់ ប្ដូរ​ម៉ូត