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 เป็นเพื่อนนะคะ

เพิ่มเพื่อน

 

บทความล่าสุด