Practice: Forms, Tables & Semantic Layout

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

ခဏလေး ဒီလိုပဲ စဉ်းစားကြည့်

ဒီ lesson ကတော့ ပထမ lesson ထက် ခက်ပါတယ် — tag တစ်ခုချင်းစီကို မဟုတ်ဘဲ semantic structure, form validation, table accessibility စတဲ့ concept များစုံကို တစ်ပြိုင်နက်တည်း ပေါင်းသုံးရပါမယ်။ Real project တစ်ခု build လုပ်တဲ့အခါ ဒီလိုမျိုး layer အများကြီးကို တစ်ပြိုင်နက် စဉ်းစားရတတ်ပါတယ်။ Form, table, semantic tags သုံးခုစလုံးကို တစ်ခုတည်းသော page ထဲမှာ ပေါင်းထည့်ကြည့်ခြင်းအားဖြင့် real-world component ဆောက်တဲ့ feel ကို ရရှိစေမှာပါ။ Task အားလုံးအောင်မြင်ရင် final project chapter (profile card, landing page) ကို စလုပ်ဖို့ အသင့်ဖြစ်ပါပြီ။

လေ့ကျင့်ခန်းများ

Task 1: header, main, footer semantic tags သုံးပြီး page layout အခြေခံကို ဆောက်ပါ၊ main ထဲမှာ article တစ်ခု ထည့်ပါ။ Task 2: name, email (required, pattern သို့မဟုတ် type="email"), message (textarea) ပါတဲ့ contact form တစ်ခုကို label အားလုံးနဲ့ ပေါင်းပြီး ရေးပါ။ Task 3: caption နဲ့ scope="col" attribute ပါတဲ့ accessible table တစ်ခုကို data row သုံးခုနဲ့ ဆောက်ပါ။ Task 4 (bonus): details/summary ကို FAQ section တစ်ခုလိုမျိုး သုံးပြီး article အောက်မှာ ထည့်ကြည့်ပါ။

Semantic layout (header, main, article, footer) ကို correct nesting နဲ့ ဆောက်နိုင်သည်
Form field များကို label, required, appropriate input type နှင့် ချိတ်နိုင်သည်
Table ကို caption နှင့် scope attribute ပါစေပြီး accessible ဖြစ်အောင် ရေးနိုင်သည်

Code နမူနာ

html

<!-- Starter skeleton — task 1-4 ကို ဖြည့်ပါ -->
<!DOCTYPE html>
<html lang="my">
<head>
  <meta charset="UTF-8">
  <title>Practice Layout</title>
</head>
<body>
  <header><!-- site title / nav --></header>

  <main>
    <article>
      <!-- Task 2: contact form (name, email, message) -->

      <!-- Task 3: accessible table with caption + scope -->

      <!-- Task 4 (bonus): details/summary FAQ -->
    </article>
  </main>

  <footer><!-- copyright text --></footer>
</body>
</html>

You should see

Header/footer ရှိတဲ့ layout တစ်ခုအတွင်းမှာ working contact form, accessible table, FAQ dropdown တို့ ပါဝင်တဲ့ page တစ်ခု ပေါ်လာမှာပါ။

၅ မိနစ် စမ်းကြည့်

15 မိနစ်ယူပြီး task 1-3 ကို အရင်ပြီးအောင်လုပ်ပါ၊ ပြီးရင် form ကို submit button နှိပ်ကြည့်ပြီး required field validation အလုပ်လုပ်မလုပ် စမ်းကြည့်ပါ။

သတိလေးတစ်ချက်

Table ကို layout ဆောက်ဖို့ မသုံးပါနဲ့ — data ဖော်ပြဖို့ table ဖြစ်ပြီး, page layout အတွက်ကတော့ semantic tags သို့မဟုတ် CSS layout ကိုသာ သုံးသင့်ပါတယ်။