ข้อ 1 นักศึกษาได้ทำการสั่งอุปกรณ์คอมพิวเตอร์ แต่ไม่มีใบเสร็จให้ นักศึกษาจึงต้องทำใบเสร็จเอง โดยมีรูปแบบข้อมูลตามในรูป
วิธีทำ: เปิดไฟล์นี้ในโปรแกรม vscode จากนั้นเขียนตารางด้วย HMTL ใน <div id="ex1">
| Invoice | ||||
|
ID | 64070011 | Date | 22/01/2021 |
| Name | เขมฐิติ หวังทรัพย์ทวี | |||
| Order | ||||
| Monitor 24 inch | x1 | 3900 | ||
| Ram 4 GB | x2 | 3200 | ||
| Fan | x2 | 120 | ||
| Total | 7220 ฿ | |||
ข้อ 2 นักศึกษาอยากได้ข้อมูลของผู้ใช้งาน จึงกำหนดฟอร์มให้ผู้ใช้งานกรอกดังนี้
- ตัวเลือกคำนำหน้าชื่อ ประกอบไปด้วย นาย/นาง/นางสาว โดยให้
name="prename" - ช่องกรอกชื่อจริง ให้ตั้ง
name="fname" - ช่องกรอกนามสกุล ให้ตั้ง
name="lname" - ช่องใส่วันเกิด โดยจะกดเลือกวันที่ได้ ให้ตั้ง
name="dob" - ช่องใส่อายุ กรอกได้เฉพาะตัวเลข ให้ตั้ง
name="age" - ปุ่มตัวเลือกชั้นปี radio button ให้ตั้ง
name="year" - checkbox เพื่อเลือกว่าจะติดตามข่าวสารหรือไม่ ให้ตั้ง
name="subscribe"และ value="subscribe" - checkbox เพื่อเลือกว่าจะยอมรับหรือไม่ ให้ตั้ง
name="accept"และ value="accept" - ปุ่มสำหรับ submit ข้อมูล
หน้าที่ของนักศึกษาคือให้สร้างฟอร์มตามที่กำหนด เพื่อเช็กว่าแบบฟอร์มที่นักศึกษาทำนั้นถูกต้องหรือยัง ให้เช็กโดยการกดปุ่ม submit ข้อมูลที่กรอกไปในฟอร์มจะแสดงออกมา ตามรูป
วิธีทำ: เปิดไฟล์นี้ในโปรแกรม vscode จากนั้นเขียน code ใน <form id="form">