❖ 1. មូលដ្ឋាន HTML និងការបង្ហាញអត្ថបទ (Text & Formatting)

1. ចំណងជើង (Headings) រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

ចំណងជើងមាន ៦ កម្រិត ដោយ <h1> ជាចំណងជើងធំបំផុត និង <h6> ជាចំណងជើងតូចបំផុត។

HTML Tag	ឧទាហរណ៍កូដ	លទ្ធផលបង្ហាញ (Output)
<h1>	`<h1>ចំណងជើង 1</h1>`	ចំណងជើង 1
<h2>	`<h2>ចំណងជើង 2</h2>`	ចំណងជើង 2 រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី
<h3>	`<h3>ចំណងជើង 3</h3>`	ចំណងជើង 3
<h4>	`<h4>ចំណងជើង 4</h4>`	ចំណងជើង 4
<h5>	`<h5>ចំណងជើង 5</h5>`	ចំណងជើង 5
<h6>	`<h6>ចំណងជើង 6</h6>`	ចំណងជើង 6

2. អត្ថបទ (Paragraphs) រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

HTML Tag	ការប្រើប្រាស់	ឧទាហរណ៍កូដ និង លទ្ធផល
<p>	កំណត់ជាកថាខណ្ឌ (Paragraph)។ រាល់អត្ថបទក្នុង p នឹងមានចន្លោះលើក្រោមស្វ័យប្រវត្តិ។	`<p>នេះជាអត្ថបទ។</p>` នេះជាអត្ថបទ។
<br>	ទម្លាក់បន្ទាត់ (Line Break) ដោយគ្មាន Tag បិទទេ។	`បន្ទាត់ទី១ <br> បន្ទាត់ទី២` បន្ទាត់ទី១ បន្ទាត់ទី២
<hr>	គូសបន្ទាត់ផ្តេក (Horizontal Rule) បែងចែកខ្លឹមសារ។	`អត្ថបទលើ <hr> អត្ថបទក្រោម` អត្ថបទលើ អត្ថបទក្រោម

3. ការរៀបចំទម្រង់អត្ថបទ (Text Formatting Elements) រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

ចែកចេញជា២ក្រុម គឺ ក្រុមPhysical (រូបរាង) និង ក្រុមSemantic (អត្ថន័យ)។

ក្រុម	HTML Tag	កូដ HTML	លទ្ធផលបង្ហាញ
៣.១ Physical Tags (ផ្តោតលើរូបរាង)	<b>	`<b>អត្ថបទដិត</b>`	អត្ថបទដិត
	<i>	`<i>អត្ថបទទ្រេត</i>`	អត្ថបទទ្រេត
	<s>	`<s>គូសឆូតកណ្តាល</s>`	~~គូសឆូតកណ្តាល~~
	<u>	`<u>គូសបន្ទាត់ក្រោម</u>`	គូសបន្ទាត់ក្រោម
៣.២ Semantic Tags (ផ្តោតលើអត្ថន័យ)	<strong>	`<strong>អត្ថបទសំខាន់</strong>`	អត្ថបទសំខាន់
	<em>	`<em>សង្កត់ន័យ</em>`	សង្កត់ន័យ
	<del>	`<del>លុបចោល</del>`	~~លុបចោល~~
	<ins>	`<ins>បញ្ចូលថ្មី</ins>`	បញ្ចូលថ្មី
	<mark>	`<mark>រំលេចពណ៌</mark>`	រំលេចពណ៌
	<sub>	`H<sub>2</sub>O`	H₂O
	<sup>	`X<sup>2</sup>`	X²
	<small>	`<small>អក្សរតូច</small>`	អក្សរតូច

4. ធាតុសម្រាប់ការដកស្រង់សម្តី និងការយោង រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

HTML Tag	ការប្រើប្រាស់	លទ្ធផលបង្ហាញ
<q>	ដកស្រង់ខ្លី (Quote) បន្ថែមសញ្ញា "" អូតូ	លោកគ្រូថា ខិតខំរៀន
<bdo>	ប្តូរទិសដៅអក្សរ (ឧ. ពីស្តាំមកឆ្វេង)	អក្សរនេះពីស្តាំមកឆ្វេង
<abbr>	ពាក្យបំព្រួញ (Abbreviation)	WHO
<cite>	ចំណងជើងសៀវភៅ ឬស្នាដៃ	រឿង ទុំទាវ
<address>	បង្ហាញអាសយដ្ឋានទំនាក់ទំនង	ភ្នំពេញ, កម្ពុជា
<blockquote>	ដកស្រង់សម្តីវែងៗជាកថាខណ្ឌ	នេះគឺជាការដកស្រង់សម្តីដែលវែង ហើយវាត្រូវបានរុញចូលក្នុងបន្តិចដោយស្វ័យប្រវត្តិ។

5. ធាតុសម្រាប់បង្ហាញទម្រង់កូដកុំព្យូទ័រ រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

HTML Tag	ការប្រើប្រាស់	ឧទាហរណ៍
<code>	សម្រាប់កូដខ្លីៗក្នុងបន្ទាត់តែមួយ (Inline)	ប្រើ Tag `<h1>` ដើម្បីសរសេរចំណងជើង
<pre>	សម្រាប់កូដច្រើនបន្ទាត់ រក្សាចន្លោះ space ដើម	int main() { return 0; }

❖ 2. បញ្ជីនៅក្នុង HTML (Lists)

ផ្នែកទី១៖ ការពន្យល់ពី Tag នៃបញ្ជីនីមួយៗ

ប្រភេទបញ្ជី	HTML Tags សំខាន់ៗ
១. បញ្ជីគ្មានលំដាប់ (Unordered List)	<ul> (ប្រអប់បញ្ជីធំ) និង <li> (ចំណុចនីមួយៗ)
២. បញ្ជីមានលំដាប់ (Ordered List)	<ol> (ប្រអប់បញ្ជីមានលេខ) និង <li> (ចំណុចនីមួយៗ)
៣. បញ្ជីពិពណ៌នា (Description List)	<dl> (ប្រអប់ធំ), <dt> (ចំណងជើង), និង <dd> (ការពិពណ៌នា)

ផ្នែកទី២៖ ឧទាហរណ៍កូដ និង លទ្ធផលបង្ហាញជាក់ស្តែង

កូដ HTML ឧទាហរណ៍	លទ្ធផលបង្ហាញ
<ul> <li>កាហ្វេ</li> <li>តែ</li> </ul>	កាហ្វេ តែ
<ol> <li>ភ្ញាក់ពីគេង</li> <li>ងូតទឹក</li> </ol>	ភ្ញាក់ពីគេង ងូតទឹក
<dl> <dt>HTML</dt> <dd>- ជាភាសាសរសេរវេប</dd> <dt>CSS</dt> <dd>- ប្រើសម្រាប់រចនា</dd> </dl>	HTML - ជាភាសាសរសេរវេប CSS - ប្រើសម្រាប់រចនា

កូដ HTML ឧទាហរណ៍

លទ្ធផលបង្ហាញ

<ul>
  <li>កាហ្វេ</li>
  <li>តែ</li>
</ul>

កាហ្វេ
តែ

<ol>
  <li>ភ្ញាក់ពីគេង</li>
  <li>ងូតទឹក</li>
</ol>

ភ្ញាក់ពីគេង
ងូតទឹក

<dl>
  <dt>HTML</dt>
  <dd>- ជាភាសាសរសេរវេប</dd>
  <dt>CSS</dt>
  <dd>- ប្រើសម្រាប់រចនា</dd>
</dl>

HTML: - ជាភាសាសរសេរវេប
CSS: - ប្រើសម្រាប់រចនា

❖ 3. តំណភ្ជាប់ រូបភាព និងមេឌា (Links, Images & Media)

1. តំណភ្ជាប់ Links រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Tag ដែលប្រើគឺ <a>។

Attribute	ឧទាហរណ៍	អត្ថន័យ / មុខងារ
href	`href="https://google.com"`	ភ្ជាប់ទៅវេបសាយក្រៅ
href	`href="about.html"`	ភ្ជាប់ទៅទំព័រក្នុងវេបសាយខ្លួនឯង
href	`href="mailto:a@mail.com"`	បើកកម្មវិធីផ្ញើអ៊ីមែល
target	`target="_self"`	បើកលីងក្នុងផ្ទាំង (Tab) ដដែល (Default)
target	`target="_blank"`	បើកលីងក្នុងផ្ទាំង (Tab) ថ្មី
target	`target="_parent"`	បើកក្នុង Parent Frame
target	`target="_top"`	បើកពេញផ្ទាំង Browser តែម្តង

2. រូបភាព Images រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Tag ដែលប្រើគឺ <img> (មិនមាន Tag បិទទេ)។

Attribute	ឧទាហរណ៍	អត្ថន័យ / មុខងារ
src	`<img src="photo.jpg">`	ទាញរូបភាពពី Folder ក្នុងម៉ាស៊ីនខ្លួនឯង
src	`<img src="https://url...">`	ទាញរូបភាពពីវេបសាយក្រៅ
alt	`alt="រូបឆ្កែ"`	អត្ថបទបង្ហាញជំនួសនៅពេលរូបភាពខូចមិនលោតចេញ
width / height	`width="500" height="300"`	កំណត់ប្រវែងបណ្តោយ និងទទឹងរបស់រូប

3. មេឌា (Video, Audio & iframe) រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

ផ្នែកទី១៖ ការបកស្រាយពី Syntax នីមួយៗ

Syntax Tag	ការបកស្រាយ និងអត្ថន័យ
<video>	ប្រើសម្រាប់ទាញយកវីដេអូមកចាក់បង្ហាញនៅលើវេបសាយផ្ទាល់។
<audio>	ប្រើសម្រាប់ទាញយកឯកសារសំឡេង ឬចម្រៀងមកចាក់។
<iframe>	ប្រើសម្រាប់ទាញយកទំព័រវេបសាយផ្សេង ឬវីដេអូពី YouTube មកបង្ហាញក្នុងស៊ុមមួយ។

ផ្នែកទី២៖ ឧទាហរណ៍នៃការសរសេរកូដ

Syntax Tag	កូដ HTML ឧទាហរណ៍
<video>	<video controls width="300"> <source src="video.mp4" type="video/mp4"> </video>
<audio>	<audio controls> <source src="music.mp3" type="audio/mpeg"> </audio>
<iframe>	<iframe src="https://youtube.com/embed/ID" width="500" height="300"></iframe>

Syntax Tag

កូដ HTML ឧទាហរណ៍

<video>

<video controls width="300">
  <source src="video.mp4" type="video/mp4">
</video>

<audio>

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
</audio>

<iframe src="https://youtube.com/embed/ID" width="500" height="300"></iframe>

ការប្រើប្រាស់ Attributes បន្ថែមសម្រាប់ Media៖

មូលដ្ឋាន (Video/Audio)៖ controls (បង្ហាញប៊ូតុង Play/Pause), autoplay (លេងអូតូ), muted (បិទសំឡេង), loop (លេងសារចុះឡើងគ្មានទីបញ្ចប់)។
បន្ថែមសម្រាប់ Video៖ poster="img.jpg" (រូបគម្របមុនពេលចុច Play), preload (រៀបចំទាញយកទិន្នន័យទុកមុន)។
បន្ថែមសម្រាប់ iframe៖ allowfullscreen (អនុញ្ញាតឱ្យពង្រីកពេញអេក្រង់), loading="lazy" (ទាញយកពេលអូសទៅដល់ ជួយឱ្យវេបដើរលឿន), frameborder="0" (លុបបន្ទាត់ស៊ុម)។

ឧទាហរណ៍កូដជាក់ស្តែងរួមបញ្ចូលគ្នា៖

១. សម្រាប់ Video: លេងវីដេអូអូតូ តែបិទសំឡេង លេងសារចុះឡើង និងមានរូបគម្រប

<video src="movie.mp4" controls autoplay muted loop poster="cover.jpg" width="100%"></video>

២. សម្រាប់ Audio: បង្ហាញប៊ូតុងចុច និងលេងសារចុះឡើងមិនចេះចប់

<audio src="music.mp3" controls loop></audio>

៣. សម្រាប់ iframe: អនុញ្ញាតឱ្យពង្រីកពេញអេក្រង់ ទាញយកពេលចាំបាច់ និងលុបស៊ុម

<iframe src="https://youtube.com/ID" width="100%" height="315" allowfullscreen loading="lazy" frameborder="0"></iframe>

❖ 4. ការបង្កើតតារាង (Tables)

1. រចនាសម្ព័ន្ធចម្បង (Main Structure) រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

TAG	ន័យ និងការប្រើប្រាស់
<table>	ប្រអប់មេសម្រាប់បង្កើតតារាងទាំងមូល
<caption>	ចំណងជើងតារាង (បង្ហាញនៅខាងលើតារាង)
<thead>	រុំព័ទ្ធផ្នែកក្បាលតារាង (Header section)
<tbody>	រុំព័ទ្ធផ្នែកទិន្នន័យកណ្តាលតារាង (Body section)
<tfoot>	រុំព័ទ្ធផ្នែកបាតតារាង (Footer section ជាទូទៅដាក់តម្លៃសរុប)
<tr>	Table Row (បង្កើតជួរដេកមួយជួរ)
<th>	Table Header (ប្រអប់ទិន្នន័យក្បាលតារាង អក្សរដិត និងនៅកណ្តាល)
<td>	Table Data (ប្រអប់ទិន្នន័យធម្មតា)

2. ការរួមបញ្ចូល Cells ចូលគ្នា (Merge Cells) រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

ATTRIBUTE	ន័យ និង ឧទាហរណ៍
colspan="N"	បញ្ចូលគ្នា N column ផ្តេក។ ឧទាហរណ៍៖ `<td colspan="2">` (រួម២ក្រឡាចូលគ្នា)
rowspan="N"	បញ្ចូលគ្នា N row ឈរ។ ឧទាហរណ៍៖ `<td rowspan="3">` (រួម៣ជួរចុះក្រោម)

3. Attributes បន្ថែមសម្រាប់តារាង (Table Attributes) រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

ជាទូទៅ Attributes ទាំងនេះត្រូវបានសរសេរដោយផ្ទាល់នៅក្នុង Tag <table> ដើម្បីកំណត់រចនាប័ទ្មមូលដ្ឋាននៃតារាង៖

ATTRIBUTE	ន័យ និងការប្រើប្រាស់	ឧទាហរណ៍កូដ
border	កំណត់កម្រាស់បន្ទាត់ស៊ុមជុំវិញតារាង និងក្រឡា។ (បើដាក់ 0 គឺគ្មានស៊ុម)	`<table border="1">`
width / height	កំណត់ប្រវែងទទឹង និងបណ្តោយរបស់តារាង (គិតជាភីកសែល px ឬ ភាគរយ %)។	`<table width="100%">`
cellpadding	កំណត់គម្លាត (Spacing) ពីស៊ុមក្រឡាមកកាន់អត្ថបទខាងក្នុង ដើម្បីកុំឱ្យអត្ថបទនៅកៀកស៊ុមពេក។	`<table cellpadding="10">`
cellspacing	កំណត់គម្លាតរវាងក្រឡាមួយទៅក្រឡាមួយទៀត (Space ខាងក្រៅក្រឡា)។	`<table cellspacing="5">`

4. ការកំណត់ Style តាមជួរឈរ (Column Grouping) រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

TAG	ន័យ និង ឧទាហរណ៍
<colgroup>	រុំព័ទ្ធដើម្បីបង្កើតជាក្រុម column
<col>	កំណត់ style ឬពណ៌ ឱ្យ column នីមួយៗ (ឧ. `<col style="background-color: red;">`)

5. កំហុសដែលគួរជៀសវាងសម្រាប់ <colgroup> រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

កំហុសក្នុងការប្រើប្រាស់	ការប្រើប្រាស់ត្រឹមត្រូវ
ដាក់ `<col>` ក្រៅ `<colgroup>`	`<col>` ត្រូវតែស្ថិតនៅក្នុង `<colgroup>`
ដាក់ `<colgroup>` ក្រោយ `<tr>`	ត្រូវដាក់វាភ្លាមៗបន្ទាប់ពី `<table>` មុន rows ទាំងអស់
គិតថា `<col>` អាច merge cell បាន	ការ Merge ត្រូវប្រើ `colspan` / `rowspan` លើ `td` ឬ `th`
សរសេរអត្ថបទក្នុង `<col>អត្ថបទ</col>`	វាជា Empty Tag (មិនមាន Tag បិទ និងមិនមានអត្ថបទ)
ប្រើ `<col>` ដើម្បី style ជួរដេក (row)	Style បានតែជួរឈរ (column) ប៉ុណ្ណោះ។

❖ 5. ការរៀបចំជាគ្រោងឆ្អឹងនៃវេបសាយទាំងមូល (HTML Semantics)

1. គ្រោងឆ្អឹង Semantic ចម្បង (Main Layout) រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

Semantic Tag គឺជា Tag ដែលប្រាប់ពីអត្ថន័យច្បាស់លាស់ទៅកាន់ Browser និងអ្នកសរសេរកូដ៖

TAG	ការប្រើប្រាស់ / អត្ថន័យ
<header>	ផ្នែកក្បាលខាងលើនៃវេបសាយ (ជាទូទៅមាន Logo និង ចំណងជើង)
<nav>	ផ្នែក Navigation របាម៉ឺនុយសម្រាប់ចុចទៅកាន់ទំព័រផ្សេងៗ
<main>	រុំព័ទ្ធខ្លឹមសារគោលសំខាន់បំផុតនៃទំព័រវេបសាយ
<section>	បែងចែកវេបសាយជាផ្នែកៗ (ឧ. ផ្នែកសេវាកម្ម, ផ្នែកអំពីយើង)
<article>	ខ្លឹមសារឯករាជ្យ (ឧ. អត្ថបទព័ត៌មានមួយ, ប្លុកមួយ)
<aside>	ផ្នែកចំហៀងនៃវេបសាយ (Sidebar ឧ. ពាណិជ្ជកម្ម, មាតិការង)
<footer>	ផ្នែកបាតក្រោមនៃវេបសាយ (ឧ. រក្សាសិទ្ធិ, ទំនាក់ទំនង)

<details>	បង្កើតប្រអប់ដែលអាចចុចទម្លាក់ចុះក្រោមបាន (Accordion)
<summary>	ជាចំណងជើងរបស់ details ដែលបង្ហាញមុនពេលចុចទម្លាក់

2. ធាតុរុំព័ទ្ធចម្បង (Non-Semantic Elements) រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

TAG	ការប្រើប្រាស់ / អត្ថន័យ
<div>	Block-level element: រុំព័ទ្ធផ្នែកធំៗនៃកូដ (ទម្លាក់បន្ទាត់អូតូ)
<span>	Inline element: រុំព័ទ្ធអត្ថបទខ្លីៗ ឬពាក្យក្នុងបន្ទាត់ ដើម្បីប្តូរពណ៌ដោយមិនឱ្យវាទម្លាក់បន្ទាត់

❖ 6. ការបង្កើតទម្រង់បែបបទ (Forms)

1. ធាតុរុំព័ទ្ធចម្បង (<form> Container) រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

គ្រប់ Input ទាំងអស់ត្រូវស្ថិតនៅក្នុង <form>...</form>។

ATTRIBUTE	ន័យ និងការប្រើប្រាស់
action="..."	ទីតាំង File (ឧ. process.php) ដែលនឹងទទួលទិន្នន័យពេលចុច Submit
method="GET"	បញ្ជូនទិន្នន័យដោយបង្ហាញលើ URL (មិនសុវត្ថិភាព ប្រើសម្រាប់ការ Search)
method="POST"	បញ្ជូនទិន្នន័យជាលក្ខណៈសម្ងាត់ (សុវត្ថិភាពខ្ពស់ ប្រើសម្រាប់ Login/Register)
autocomplete	បើក (on) ឬបិទ (off) ការបំពេញទិន្នន័យដោយស្វ័យប្រវត្តិពី Browser
enctype="..."	ត្រូវតែដាក់ `multipart/form-data` នៅពេល Form នោះមានការ Upload ឯកសារ (File)
target="..."	កំណត់ផ្ទាំងថ្មី ឬចាស់ ពេលបញ្ជូនទិន្នន័យ (ដូចទៅនឹងតំណភ្ជាប់ `a`)

2. ប្រភេទនៃធាតុបញ្ចូល (<input> types) រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

ប្រភេទ (Type)	កូដ HTML `type="..."`	ការប្រើប្រាស់ និង UI បង្ហាញ
"text"	`<input type="text">`	ប្រអប់បញ្ចូលអត្ថបទធម្មតា
"password"	`<input type="password">`	ប្រអប់លេខសម្ងាត់ (លាក់អក្សរជាចំណុចខ្មៅ)
"email"	`<input type="email">`	ទាមទារឱ្យមានសញ្ញា @ ពេលបញ្ចូល
"number"	`<input type="number">`	វាយបានតែលេខ និងមានព្រួញឡើងចុះ
"radio"	`<input type="radio">`	ប៊ូតុងមូល (ជ្រើសរើសបានតែមួយគត់)
"checkbox"	`<input type="checkbox">`	ប្រអប់គ្រីស (ជ្រើសរើសបានច្រើន)
"file"	`<input type="file">`	សម្រាប់ជ្រើសរើសឯកសារ/រូបភាពពីកុំព្យូទ័រ
"date"	`<input type="date">`	បង្ហាញប្រតិទិនសម្រាប់ជ្រើសរើសថ្ងៃខែ
"range"	`<input type="range">`	របាសម្រាប់អូសកំណត់កម្រិតទិន្នន័យ
"hidden"	`<input type="hidden">`	លាក់ទិន្នន័យមិនឱ្យ User ឃើញ តែបញ្ជូនទៅ Server
"submit"	`<input type="submit">`	ប៊ូតុងបញ្ជូនទិន្នន័យទាំងអស់ក្នុង Form
"reset"	`<input type="reset">`	ប៊ូតុងលុបទិន្នន័យដែលបានវាយបញ្ចូលក្នុង Form ចោលទាំងអស់

3. ការប្រើប្រាស់ Label និងធាតុបញ្ចូលផ្សេងទៀត រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

TAG	ន័យ និង ការប្រើប្រាស់	ចំណាំ
<label>	ភ្ជាប់ឈ្មោះទៅនឹង Input។ ពេលចុចលើឈ្មោះ ប្រអប់ Input នឹងលោតទទួលអូតូ។	ត្រូវប្រើ attribute `for="id_របស់_input"`
<fieldset> & <legend>	`fieldset` គូសបន្ទាត់ជុំវិញក្រុម Input ឯ `legend` គឺដាក់ចំណងជើងលើបន្ទាត់នោះ។	ល្អសម្រាប់ Form ដែលវែងៗ
<select> & <option>	បង្កើតជាបញ្ជីទម្លាក់ចុះ (Dropdown Menu) ដើម្បីរើសជម្រើសណាមួយ។	`select` ជាប្រអប់ធំ, `option` ជាជម្រើសនីមួយៗ
<optgroup>	ចងក្រង `option` ជាក្រុមៗនៅក្នុង `select`។	ធ្វើឱ្យ Dropdown មានរបៀប
<datalist>	ដូចគ្នានឹង select ដែរ តែអនុញ្ញាតឱ្យ User វាយអក្សរបញ្ចូលបន្ថែមបានបើគ្មានជម្រើស។	ត្រូវភ្ជាប់ជាមួយ `<input list="...">`
<textarea>	ប្រអប់សម្រាប់វាយអក្សរបានច្រើនបន្ទាត់ (ដូចជាប្រអប់ Comment)។	មិនប្រើ attribute `value` ទេ តែសរសេរចន្លោះ Tag បើក និងបិទ។

4. Attributes សំខាន់នៃធាតុបញ្ចូល រៀបរៀងដោយ: លោក អ៊ុតថា សៀវអុី

ATTRIBUTE	ន័យ និង មុខងារ	ចំណាំ
name	ឈ្មោះសម្គាល់ Input ដែលបញ្ជូនទៅកាន់ Server (ខ្វះមិនបាន)	PHP/Backend ស្គាល់ទិន្នន័យតាមរយៈ name នេះ
id	សម្គាល់ Input ជាលក្ខណៈពិសេសមួយសម្រាប់ទាក់ទងជាមួយ CSS, JS ឬ Label	ក្នុងមួយទំព័រ id មិនអាចមានឈ្មោះជាន់គ្នាទេ
placeholder	បង្ហាញអក្សរព្រាលៗបញ្ជាក់ពីអ្វីដែលត្រូវវាយបញ្ចូលក្នុងប្រអប់	វានឹងបាត់ទៅវិញពេល User ចាប់ផ្តើមវាយ
required	បង្ខំឱ្យ User ត្រូវតែបំពេញប្រអប់នោះ (មិនអាចទុកចោលបានទេ)	សរសេរទទេរៗ មិនបាច់មានតម្លៃស្មើអ្វីឡើយ
disabled	បិទមិនឱ្យ User វាយ ឬចុចបាន ហើយក៏មិនបញ្ជូនទិន្នន័យទៅ Server ដែរ	ប្រអប់នឹងប្រែជាពណ៌ប្រផេះ
readonly	User អាចមើលឃើញតម្លៃ តែមិនអាចកែប្រែបាន។ ទិន្នន័យនៅតែបញ្ជូនទៅ Server	ជាទូទៅប្រើជាមួយ `value="..."` ដើម្បីបង្ហាញទិន្នន័យដែលមានស្រាប់
maxlength	កំណត់ចំនួនតួអក្សរអតិបរមាដែលអាចវាយបញ្ចូលបាន	ឧ. `maxlength="10"` វាយបានត្រឹម ១០ តួអក្សរ
autofocus	ធ្វើឱ្យទាក់ទាញចំណាប់អារម្មណ៍ (លោត Cursor ចូលអូតូ) ពេលបើកទំព័រភ្លាម	ប្រើបានតែមួយគត់ក្នុងមួយទំព័រ