บทเรียน HTML

สิ่งที่คุณจะสร้าง

ฟอร์มติดต่อขนาดเล็ก — ช่องกรอกที่มีป้ายกำกับ, ปุ่มส่ง, พฤติกรรมของแป้นพิมพ์และโปรแกรมอ่านหน้าจอจริง — เริ่มจากแบบไม่ตกแต่งก่อน แล้วค่อยใส่สไตล์ ภายในประมาณ 10 นาที

ก่อนเริ่ม

คุณต้องมีเบราว์เซอร์และโปรแกรมแก้ไขข้อความเท่านั้น (git ช่วยให้ดึงไฟล์คอมโพเนนต์ได้สะดวก แต่คุณคัดลอกจาก GitHub ในเบราว์เซอร์ก็ได้)

ขั้นที่ 1 — รับโค้ด

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-html-headless

คอมโพเนนต์ทุกตัวเป็นไฟล์เดี่ยวใน components/ — button.html, text-input.htmlและอื่น ๆ — พร้อมคอมเมนต์หัวไฟล์ที่ระบุแท็ก HTML, class hook, พฤติกรรมแป้นพิมพ์ และสัญญาด้านการเข้าถึง ไฟล์เหล่านี้ คือ ไลบรารีเอง — คัดลอกสิ่งที่ต้องการแล้วไปต่อได้เลย

ขั้นที่ 2 — คอมโพเนนต์แรกของคุณ

เปิด components/button.htmlหรือเขียนมาร์กอัปเลยก็ได้ — class hook คือสัญญา:

<button class="button" type="button">
  Save
</button>

เพราะเป็น <button>จริง โฟกัสแป้นพิมพ์ การกระตุ้นด้วย Enter และ Space และบทบาทปุ่มโดยนัยจึงถูกต้องอยู่แล้ว

ขั้นที่ 3 — ประกอบฟอร์มเล็ก ๆ

<form class="form">
  <div class="field">
    <label class="label" for="name">Full name</label>
    <input class="text-input" type="text" id="name" name="name" required />
  </div>
  <div class="field">
    <label class="label" for="email">Email</label>
    <input class="email-input" type="email" id="email" name="email" required />
  </div>
  <button class="button" type="submit">Save</button>
</form>

สังเกตรูปแบบนี้: ทุกตัวควบคุมเชื่อม <label for>ของตัวเอง ใช้ชนิด input ที่เฉพาะเจาะจงที่สุด และมี class hook แบบ kebab-case เพียงหนึ่งตัวพอดี

ขั้นที่ 4 — ใส่สไตล์

เขียน CSS ให้ตรงกับ hook:

.button {
  background: #2563eb;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 0.5rem;
}
.text-input,
.email-input {
  padding: 0.5rem 0.75rem;
  border: 2px solid #6b7280;
  border-radius: 0.25rem;
}
.label { display: block; font-weight: 600; margin-bottom: 0.25rem; }

หรือข้ามการเขียน CSS เองไปเลย — ลิงก์ธีมสำเร็จรูปหนึ่งใน 45 ธีม แล้วมาร์กอัปเดิมก็จะสว่างขึ้นทันที:

<link rel="stylesheet" href="/themes/united-kingdom-national-health-service-england-for-patients.css" />

ขั้นที่ 5 — สำรวจเพิ่มเติม

• การทดสอบของรีโพรันบนเบราว์เซอร์จริง: pnpm install && pnpm test (WebDriverIO)
• Storybook สำหรับทุกคอมโพเนนต์: pnpm run storybook.
• แอปตัวอย่าง HTML+CSS+JS แสดงทั้ง 571 คอมโพเนนต์พร้อมสไตล์ ค้นหาได้ และมีเดโม

ขั้นต่อไป

• การกำหนดธีม — การสลับธีมขณะรันไทม์ด้วย theme-picker
• ตัวช่วยการตั้งค่า — ภาษาและขนาดตัวอักษร
• แคตตาล็อกคอมโพเนนต์ — เอกสารอ้างอิงครบ

มีคำถามระหว่างทางไหม? หน้าช่วยเหลือ เต็มไปด้วยคำตอบ — และถ้าขั้นตอนไหนทำให้ชัดเจนกว่านี้ได้ บอกเรา แล้วเรายินดีปรับปรุงบทเรียน