Form និង Table

មាតិកា

1. Form ធ្វើអ្វី
2. Label និង Input
3. ប្រភេទ Input
4. Textarea, Select, Checkbox និង Radio
5. Button
6. Validation ដែលមានស្រាប់ក្នុង Browser
7. ទិន្នន័យទៅទីណា
8. Table
9. សាកល្បងដោយខ្លួនឯង

1. Form ធ្វើអ្វី

Form ប្រមូលទិន្នន័យពីអ្នកប្រើ ហើយផ្ញើវាទៅកន្លែងណាមួយ។ ប្រអប់ login, របារស្វែងរក, ទំព័រទូទាត់ប្រាក់ និងប្រអប់បញ្ចេញមតិ សុទ្ធតែជា form។ HTML ផ្តល់ជូនអ្នកនូវគ្រប់ control ដែលអ្នកត្រូវការ — ប្រអប់អត្ថបទ, checkbox, ម៉ឺនុយ, button — ហើយ browser ផ្តល់ឥរិយាបថ៖ ការគាំទ្រ keyboard, keyboard លើទូរស័ព្ទ និង validation មូលដ្ឋាន។ ទាំងអស់នេះ មុនពេលអ្នកសរសេរ JavaScript ណាមួយ។

Wrapper គឺ element <form>៖

<form action="/contact" method="post">
  <!-- controls go here -->
</form>

action គឺជា URL ដែលទិន្នន័យត្រូវផ្ញើទៅ ហើយ method គឺជា HTTP method ពី HTTP Request។ ផ្នែកទី 7 ពន្យល់ពីអ្វីដែលត្រូវធ្វើនៅលើ static site ដែលគ្មាន server សម្រាប់ផ្ញើទៅ។

2. Label និង Input

គូសំខាន់គឺ <label> និង <input>៖

<label for="name">Your name</label>
<input type="text" id="name" name="name">

Attribute បីភ្ជាប់អ្វីៗទាំងអស់ចូលគ្នា៖

• for លើ label ត្រូវគ្នានឹង id របស់ input។ នេះភ្ជាប់ពួកវា៖ ការចុចលើ label ធ្វើឲ្យ field ទទួល focus ហើយ screen reader ប្រកាស label នៅពេល field ត្រូវ focus។
• name គឺជា key ដែលតម្លៃត្រូវបានផ្ញើក្រោមឈ្មោះនោះ។ បើគ្មានវា តម្លៃរបស់ field នឹងមិនត្រូវបានផ្ញើទាល់តែសោះ។
• id ត្រូវតែមានតែមួយគត់នៅលើទំព័រ។

រាល់ form field ត្រូវការ label។ placeholder មិនមែនជា label ទេ — វាបាត់ទៅភ្លាមៗនៅពេលអ្នកវាយ ហើយច្រើនតែស្រអាប់ពេកមិនអាចអានបាន។ អ្នកអាចប្រើ placeholder ជាតម្រុយ (placeholder="e.g. Dara Sok") បន្ថែមពី label ប៉ុន្តែមិនមែនជំនួសវាឡើយ។

អ្នកក៏អាចដាក់ input នៅក្នុង label បានដែរ ក្នុងករណីនោះមិនចាំបាច់ប្រើ for និង id ទេ៖

<label>Your name <input type="text" name="name"></label>

3. ប្រភេទ Input

Attribute type ប្រែ element មួយទៅជា control ជាច្រើន៖

ការជ្រើសរើស type ឲ្យត្រូវគឺជាការកែលម្អឥតគិតថ្លៃ៖ keyboard ត្រឹមត្រូវលើទូរស័ព្ទ, validation ស្វ័យប្រវត្តិ ហើយពេលខ្លះមានឧបករណ៍ជ្រើសកាលបរិច្ឆេទ ឬពណ៌ដែលមានស្រាប់ក្នុង browser។

4. Textarea, Select, Checkbox និង Radio

<textarea> សម្រាប់អត្ថបទច្រើនបន្ទាត់។ វាមាន closing tag ហើយ rows កំណត់កម្ពស់របស់វា៖

<label for="message">Message</label>
<textarea id="message" name="message" rows="5"></textarea>

<select> គឺជាម៉ឺនុយ drop-down នៃ <option>៖

<label for="topic">Topic</label>
<select id="topic" name="topic">
  <option value="">Choose one…</option>
  <option value="job">Job opportunity</option>
  <option value="project">Project collaboration</option>
  <option value="other">Something else</option>
</select>

Checkbox សម្រាប់ជម្រើសសូន្យឬច្រើន ចំណែក radio button សម្រាប់ជម្រើសតែមួយប៉ុណ្ណោះ។ Radio នៅក្នុងក្រុមតែមួយប្រើ name ដូចគ្នា។ សូមព័ទ្ធក្រុមមួយក្នុង <fieldset> ជាមួយ <legend> ដែលដាក់ឈ្មោះឲ្យវា៖

<fieldset>
  <legend>How should I reply?</legend>
  <label><input type="radio" name="reply" value="email" checked> Email</label>
  <label><input type="radio" name="reply" value="phone"> Phone</label>
</fieldset>

<label>
  <input type="checkbox" name="newsletter" value="yes">
  Send me occasional updates
</label>

5. Button

Element <button> គឺជា control ដែលអាចចុចបាន ហើយ type របស់វាសំខាន់៖

<button type="submit">Send</button>
<button type="reset">Clear</button>
<button type="button">Does nothing by itself</button>

• submit ផ្ញើ form (លំនាំដើមនៅក្នុង form)។
• reset ដាក់គ្រប់ field ត្រឡប់ទៅតម្លៃចាប់ផ្តើមវិញ។
• button មិនធ្វើអ្វីទេ រហូតដល់មាន JavaScript ភ្ជាប់ជាមួយវា។

ប្រើ <button> សម្រាប់ សកម្មភាព និង <a> សម្រាប់ ការរុករក — link ទៅកន្លែងណាមួយ ចំណែក button ធ្វើអ្វីមួយ។ កុំធ្វើឲ្យ <div> មើលទៅដូច button ព្រោះអ្នកនឹងបាត់ការគាំទ្រ keyboard និងអត្ថន័យសម្រាប់ screen reader។

6. Validation ដែលមានស្រាប់ក្នុង Browser

Browser អាចពិនិត្យទិន្នន័យមុនពេល form ត្រូវបាន submit។ បន្ថែម attribute ហើយ browser នឹងបញ្ឈប់ការ submit ព្រមទាំងបង្ហាញសារនៅពេលមានអ្វីខុស៖

<label for="email">Email</label>
<input type="email" id="email" name="email" required>

សូមសាកល្បង submit ពេលវាទទេ រួចសាកល្បងជាមួយ abc។ Browser ទប់ការ submit ហើយប្រាប់អ្នកពីមូលហេតុ — មិនពាក់ព័ន្ធ JavaScript ទេ។

ការព្រមានមួយ៖ validation របស់ browser គឺជាភាពងាយស្រួល មិនមែនជាសុវត្ថិភាពទេ។ នរណាក៏អាចរំលងវាបាន ដោយកែទំព័រក្នុង DevTools ឬផ្ញើ request ដោយផ្ទាល់ជាមួយ curl។ Server ពិតប្រាកដណាមួយត្រូវតែពិនិត្យទិន្នន័យម្តងទៀត។

7. ទិន្នន័យទៅទីណា

នៅពេលអ្នកចុច Submit, browser បង្កើត HTTP request ពីគ្រប់ field ដែលមាន name។ ជាមួយ method="get" តម្លៃទាំងនោះចូលទៅក្នុង query string — ?name=Dara&topic=job ដូចដែលបានឃើញនៅជំពូក URL។ ជាមួយ method="post" ពួកវានៅក្នុង request body។ ទោះបីជាបែបណាក៏ដោយ ត្រូវតែមានអ្វីមួយនៅលើ server ដែលទទួលពួកវា។

Static site មិនមាន server ផ្ទាល់ខ្លួនទេ ដូច្នេះវាមិនអាចដំណើរការ form ដោយខ្លួនឯងបានទេ។ អ្នកមានជម្រើសស្មោះត្រង់បី៖

1. mailto: — link ធម្មតាដែលបើកកម្មវិធី email របស់អ្នកទស្សនា។ សាមញ្ញ ហើយដំណើរការគ្រប់ទីកន្លែង ប៉ុន្តែមិនមែនជា form ពិតប្រាកដទេ។
2. សេវា form ដូចជា Formspree ឬ Web3Forms។ ពួកគេផ្តល់ URL ឲ្យអ្នកប្រើជា action ទទួលទិន្នន័យ ហើយផ្ញើ email មកអ្នក។
3. Backend ផ្ទាល់ខ្លួនរបស់អ្នក — លើសពីស៊េរីនេះ។

សម្រាប់គម្រោងនេះ សូមសាងសង់ form ឲ្យ HTML ពេញលេញ និងត្រឹមត្រូវ ហើយចង្អុល action ទៅសេវា form នៅពេលក្រោយ ប្រសិនបើអ្នកចង់ឲ្យវាដំណើរការពិត។ Markup ដែលអ្នកសរសេរគឺដូចគ្នាទាំងពីរករណី។

<form action="https://example.com/your-form-url" method="post">
  <h2>Get in touch</h2>

  <label for="name">Name</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <button type="submit">Send</button>
</form>

8. Table

<table> សម្រាប់ ទិន្នន័យជាតារាង — ព័ត៌មានដែលមានជួរដេក និងជួរឈរ ដូចជាកាលវិភាគ ឬបញ្ជីតម្លៃ។ មិនមែនសម្រាប់រៀបចំ layout ទំព័រទេ (នោះជាតួនាទីរបស់ជំពូកទី 9 និង 10)។

<table>
  <caption>My skills</caption>
  <thead>
    <tr>
      <th scope="col">Skill</th>
      <th scope="col">Level</th>
      <th scope="col">Since</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>Comfortable</td>
      <td>2026</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>Learning</td>
      <td>2026</td>
    </tr>
  </tbody>
</table>

ផ្នែកនីមួយៗ៖

Header cell ដែលមាន scope អនុញ្ញាតឲ្យ screen reader ប្រកាស "Level: Comfortable" សម្រាប់ cell មួយ ជំនួសឲ្យការអានតែ "Comfortable" ទទេៗដោយគ្មានបរិបទ។ ដើម្បីបញ្ចូល cell ចូលគ្នា សូមប្រើ colspan និង rowspan។

Table ដែលគ្មាន border មើលទៅដូចអត្ថបទធម្មតា។ នោះជារឿងធម្មតា — វាជាការងាររបស់ CSS ក្នុងការធ្វើឲ្យវាស្អាត ហើយអ្នកនឹងធ្វើនោះនៅជំពូកទី 6។

9. សាកល្បងដោយខ្លួនឯង

1. បន្ថែម contact form។ ដាក់ form ពីផ្នែកទី 7 ក្នុង section #contact នៃ index.html។ ពិនិត្យថាការចុចលើ label នីមួយៗធ្វើឲ្យ field របស់វាទទួល focus។
2. សាកល្បង validation។ Submit ពេលវាទទេ រួចសាកល្បងជាមួយ email មិនត្រឹមត្រូវ។ បន្ថែម minlength="10" លើ message ហើយសាកល្បងម្តងទៀត។
3. សាកល្បងប្រភេទ input។ បន្ថែម <input type="date">, type="range" និង type="color" ទៅ file សាកល្បងមួយ។ បើកទំព័រនៅលើទូរស័ព្ទរបស់អ្នកតាមអាសយដ្ឋាន network របស់ Live Server ឬក្នុងរបៀបឧបករណ៍របស់ DevTools ហើយប្រៀបធៀប keyboard សម្រាប់ text, email និង tel។
4. រំលង validation របស់ខ្លួនឯង។ នៅក្នុង DevTools សូមលុប attribute required ពី field មួយ ហើយ submit ពេលវាទទេ។ នេះជាមូលហេតុដែល server ពិតប្រាកដក៏ត្រូវតែ validate ដែរ។
5. បន្ថែម table ជំនាញ ទៅទំព័រ About ជាមួយ <caption>, header cell ដែលមាន scope និងយ៉ាងហោចណាស់បួនជួរដេក។
6. ពិនិត្យ traffic។ ប្តូរ form ទៅ method="get" និង action="https://httpbin.org/get" ហើយ submit រួចអាន query string នៅក្នុង address bar។

សូម commit ការងាររបស់អ្នក។ ឥឡូវនេះ HTML ចប់ហើយ៖ អ្នកអាចរៀបចំរចនាសម្ព័ន្ធទំព័រណាក៏បាន។ ចាប់ពីជំពូកបន្ទាប់តទៅ យើងនឹងធ្វើឲ្យវាស្អាតដោយ CSS។