5 HTML Features ที่ไม่ควรมองข้ามในการพัฒนา Web
22-ต.ค.-24
คัมภีร์เทพ IT
HTML เป็น Tool สำหรับสร้าง Web Pages ที่มี Functions มากมายและ Structure ที่ชัดเจน อย่างไรก็ตาม มี Developers หลายคนที่อาจมองข้ามหรือไม่รู้จัก Features เหล่านี้ ซึ่งบทความนี้จะมาแนะนำ 5 HTML Features ที่ไม่ควรมองข้ามในการพัฒนา Web รวมทั้งยังมีส่วนช่วย ในการเพิ่มประสบการณ์ที่ดีของ Users อีกด้วย
1. <template> Element
<template> Element เป็นหนึ่งใน Features ที่น่าสนใจที่ซ่อนอยู่ใน HTML5 ซึ่งอาจมี Developers หลายคนที่ยังไม่ได้สำรวจมันอย่างเต็มที่นัก
เนื่องจากมันไม่ต้องใช้ Frameworks อย่าง React มันจึงทำหน้าที่เป็นเหมือน Container สำหรับเก็บ HTML Content ที่ยังไม่ได้แสดงผลบน Page ในทันที แต่ Content นี้สามารถถูก Clone และเพิ่มเข้าไปใน DOM ภายหลังได้ ซึ่งโดยปกติจะทำผ่าน JavaScript
มันเหมาะอย่างยิ่งสำหรับสถานการณ์ที่คุณต้องแสดงผล Content แบบ Dynamic เช่น ใน Single-Page Applications (SPAs) หรือเมื่อคุณมี Components ที่ต้องใช้ซ้ำหลายครั้ง
วิธีการทำงานมีดังนี้:
ในตัวอย่างนี้ เราใช้ <template> Element เพื่อสร้าง Card Component ที่นำมาใช้ซ้ำได้ ซึ่งสามารถ Clone และปรับแต่งด้วย JavaScript ได้อย่างง่ายดาย
2. <picture> Element สำหรับ Responsive Images
<picture> Element ถูกออกแบบมาเพื่อช่วยให้ Developers สามารถแสดงรูปภาพต่าง ๆ ได้ตามเงื่อนไขต่าง ๆ เช่น ขนาด Screen หรือ Resolution
Feature นี้จะทำให้การใช้ Media Queries ใน CSS แทบจะไม่จำเป็นอีกต่อไป
คุณสามารถนำ <picture> Element ไปใช้ได้อย่างไร:
ในตัวอย่างนี้ เราได้กำหนด Image Sources ต่าง ๆ สำหรับขนาด Screen ขนาดต่าง ๆ เพื่อให้แน่ใจว่า รูปภาพถูก Load อย่างเหมาะสมตาม Device ของ User
3. <datalist> Element สำหรับปรับปรุง Input Fields
<datalist> Element เป็นส่วนเสริมที่ยอดเยี่ยมสำหรับ HTML5 โดยมีการเตรียมวิธีการเสนอ Options ที่กำหนดไว้ล่วงหน้าภายใน Input Fields
มันจะสร้างรายการแบบ Drop-Down List ของคำแนะนำที่ Users สามารถเลือกได้ ซึ่งทำให้ Form และเป็นมิตรต่อ User มากขึ้น
มาดูวิธีใช้ <datalist> Element ใน Search Input Fields กัน:
4. Form Validation พร้อมทั้ง HTML5 Attributes
HTML5 ได้มี Built-in Form Validation Attributes เช่น Required, Pattern, Minlength และ Maxlength
Attributes เหล่านี้จะช่วยให้คุณสามารถบังคับใช้ Input Rules ได้โดยตรงใน HTML ซึ่งจะช่วยลดความจำเป็นในเรื่อง JavaScript Validation ที่ซับซ้อน
นี่คือตัวอย่างของ Form ที่มีการตรวจสอบความถูกต้องด้วย HTML5:
5. <output> Element สำหรับแสดงผลการคำนวน
<output> Element เป็น Tool ที่ยอดเยี่ยมใน HTML5 สำหรับการแสดงผลการคำนวณหรือสิ่งที่ User จะต้องทำ
Element นี้มีประโยชน์อย่างยิ่งใน Interactive Forms หรือ Web Applications ที่คุณต้องการแสดง Feedback ในทันทีโดยไม่ต้องพึ่งพา JavaScript
วิธีใช้ <output> Element มีดังนี้:
ในตัวอย่างนี้ <output> Element จะแสดง ผลรวมของตัวเลข 2 ตัว ให้แบบ Real-Time
ที่มา: https://levelup.gitconnected.com/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
บทความล่าสุด