HTML Part 02

สำหรับทำความเข้าใจและใช้งานสื่อและฟอร์มในเว็บเพจ

การแสดงรูปภาพ <img>

แท็ก <img> ใช้สำหรับฝังรูปภาพลงในหน้าเว็บ คุณต้องระบุแหล่งที่มาของรูปภาพด้วยคุณสมบัติ src และข้อความอธิบายรูปภาพด้วยคุณสมบัติ alt เพื่อประโยชน์ด้านการเข้าถึงและในกรณีที่รูปภาพไม่สามารถโหลดได้

  • src: ระบุ URL หรือที่อยู่ของไฟล์รูปภาพ
  • alt: ข้อความอธิบายรูปภาพสำหรับผู้อ่านหน้าจอ หรือเมื่อรูปภาพโหลดไม่สำเร็จ
  • width: กำหนดความกว้างของรูปภาพเป็นพิกเซลหรือเปอร์เซ็นต์
  • height: กำหนดความสูงของรูปภาพเป็นพิกเซลหรือเปอร์เซ็นต์

ตัวอย่างการแสดงรูปภาพ:

รูปภาพตัวอย่าง แสดงพื้นหลังสีน้ำเงินอ่อนพร้อมข้อความ Sample Image

รูปภาพตัวอย่างขนาด 600x300 พิกเซล

<img src="https://placehold.co/600x300/a3ccff/333333?text=Sample+Image" alt="รูปภาพตัวอย่าง" width="600" height="300">

การแสดงวิดีโอ <video>

แท็ก <video> ใช้สำหรับฝังไฟล์วิดีโอลงในหน้าเว็บ เพื่อให้ผู้ใช้สามารถเล่นวิดีโอได้โดยตรง

  • src: ระบุ URL ของไฟล์วิดีโอ
  • width: กำหนดความกว้างของวิดีโอ
  • height: กำหนดความสูงของวิดีโอ
  • controls: เพิ่มปุ่มควบคุมการเล่น (play/pause, volume, fullscreen)
  • poster: กำหนดรูปภาพที่จะแสดงก่อนวิดีโอจะถูกโหลดหรือเล่น
  • autoplay: เริ่มเล่นวิดีโออัตโนมัติเมื่อหน้าเว็บโหลดเสร็จ (ควรใช้คู่กับ `muted`)
  • loop: เล่นวิดีโอซ้ำเมื่อจบ
  • muted: ปิดเสียงวิดีโอเริ่มต้น

ตัวอย่างการแสดงวิดีโอ:

วิดีโอตัวอย่าง (Big Buck Bunny) พร้อมปุ่มควบคุม

<video width="640" height="360" controls poster="video-poster.jpg">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    เบราว์เซอร์ของคุณไม่รองรับการเล่นวิดีโอ
</video>

การแสดงไฟล์เสียง <audio>

แท็ก <audio> ใช้สำหรับฝังไฟล์เสียงลงในหน้าเว็บ

  • src: ระบุ URL ของไฟล์เสียง
  • controls: เพิ่มปุ่มควบคุมการเล่น (play/pause, volume)
  • autoplay: เริ่มเล่นเสียงอัตโนมัติเมื่อหน้าเว็บโหลดเสร็จ (ควรใช้คู่กับ `muted`)
  • loop: เล่นเสียงซ้ำเมื่อจบ
  • muted: ปิดเสียงเริ่มต้น

ตัวอย่างการแสดงไฟล์เสียง:

ไฟล์เสียงตัวอย่างพร้อมปุ่มควบคุม

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    เบราว์เซอร์ของคุณไม่รองรับการเล่นไฟล์เสียง
</audio>

การใช้ iframe <iframe>

แท็ก <iframe> ใช้สำหรับฝังเอกสาร HTML อื่นๆ ลงในเอกสาร HTML ปัจจุบัน

  • src: ระบุ URL ของหน้าเว็บที่ต้องการฝัง
  • width: กำหนดความกว้างของ iframe
  • height: กำหนดความสูงของ iframe
  • allowfullscreen: อนุญาตให้ iframe เข้าสู่โหมดเต็มหน้าจอได้

ตัวอย่างการใช้ iframe (แสดงหน้าเว็บวิทยาลัยการคอมพิวเตอร์ มหาวิทยาลัยขอนแก่น):

ตัวอย่างการฝังหน้าเว็บ computing.kku.ac.th

หมายเหตุ: เว็บไซต์บางแห่ง เช่น Google อาจไม่อนุญาตให้ฝังผ่าน iframe ด้วยเหตุผลด้านความปลอดภัย 
<iframe src="https://computing.kku.ac.th/index" width="100%" height="300" frameborder="0" allowfullscreen>
    เบราว์เซอร์ของคุณไม่รองรับ iframe
</iframe>

การสร้าง HTML Form

แท็ก <form> ใช้สำหรับสร้างแบบฟอร์มเพื่อเก็บข้อมูลจากผู้ใช้

ตัวอย่าง Input Type ต่างๆ

ปุ่มประเภทต่างๆ

Input type="image" ทำหน้าที่เหมือน submit button

Radio Buttons

Checkboxes

Select Box (Single)

Select Box (Multiple)

Select Box with Optgroup

Fieldset และ Legend

ข้อมูลส่วนตัว

Form Attributes กับ Input Element

คุณสมบัติ (Attributes) ที่สำคัญสำหรับ Input Element ใน Form:

ตัวอย่างการใช้งาน Attributes

ฟิลด์นี้จำเป็นต้องกรอก
ระบบอาจแนะนำอีเมลที่คุณเคยใช้
เลือกได้มากกว่า 1 ไฟล์
ป้อนอีเมลคั่นด้วยเครื่องหมายจุลภาค
ต้องเป็นตัวเลข 5 หลักเท่านั้น

คุณสมบัติ novalidate จะถูกเพิ่มลงในแท็ก <form> เพื่อปิดการตรวจสอบความถูกต้องของเบราว์เซอร์อัตโนมัติ (เช่น ฟิลด์ required)

<form action="/submit" method="post" novalidate>
    <!-- elements here -->
</form>
Back Top