COOL IT IDEAS AND STUFF

See the original english version Click here!

HTML เป็นรากฐานของทุก Website แน่นอนว่าในฐานะ Web Developer คุณควรมีความเข้าใจในเชิงลึกถึงวิธีการทำงานของ HTML และ HTML Tags ก็เป็นสิ่งสำคัญในการช่วยให้ Website สวยงามและทำงานได้ตามที่ต้องการ บทความจะมาแนะนำ 5 HTML Tags ที่ช่วยให้คุณทำงานสะดวกขึ้น

1. HTML Color Picker

เชื่อว่าคุณคงรู้อยู่แล้วว่า มี Input Tags อยู่หลายประเภท แต่คุณรู้หรือไม่ว่า คุณสามารถใช้ Tags ในการเลือกสีได้เช่นกัน ซึ่ง Input type=”color” จะช่วยให้คุณทำเช่นนั้นได้ มันช่วยให้คุณสามารถเลือกสีจาก Colour Spectrum ได้ ไม่เพียงเท่านั้น แต่ยังมี Eye Drop Feature ที่ช่วยให้คุณสามารถเลือกสีบนหน้าจอของคุณได้ โดยค่า Default แล้ว สีที่คุณเลือกจะแสดงเป็นค่าเลขฐานสิบหก (Hex Value)

คุณสามารถดูตัวอย่างได้ที่ CodePen ด้านล่างนี้

2. HTML Progress bar

เชื่อว่าก่อนหน้านี้ คงมี Web Developer บางคนที่เคยสร้าง Progress Bars โดยใช้ <div>, :: before pseudo-element รวมทั้งอาจใช่ CSS และ JavaScript ร่วมด้วย แต่ตอนนี้ มี HTML Tag ที่คุณสามารถใช้แทนที่ Code เหล่านั้นทั้งหมดได้ ซึ่ง Tag ที่ว่านั้นก็คือ <progress>

ดังนั้น เมื่อคุณสร้าง Progress Element ที่ว่างเปล่าตามด้านล่างนี้ Element ดังกล่าวจะช่วยสร้าง Progress Bar ได้

แต่หากต้องการเปลี่ยนให้เป็น Functional Progress Bar คุณสามารถเพิ่ม Value และ Max Properties ได้ดังต่อไปนี้

จากตัวอย่าง CodePen ด้านล่างนี้ คุณจะได้เห็นว่า จะสามารถใช้ CSS ใน Progress Tag ได้อย่างไร

3. HTML Meter

หากคุณต้องการแสดง Gauges, Ratings หรือค่าใด ๆ ก็ตาม พร้อมทั้งสามารถระบุระดับเกณฑ์ต่ำสุดและสูงสุดได้ด้วย คุณสามารถใช้ <meter> Tag สำหรับทำสิ่งนั้นได้ คุณสามารถตั้งค่าระดับเกณฑ์ได้โดยใช้ Low, Optimum และ High Properties และตั้งค่า Min และ Max Properties ได้ดังต่อไปนี้

เมื่อค่าอยู่ภายในระดับเกณฑ์ที่กำหนด ระบบจะเปลี่ยนสีของ Meter Tag ให้โดยอัตโนมัติโดยที่ไม่ต้องใช้ CSS แต่อย่างใด หากคุณต้องการปรับแต่ง Style คุณก็สามารถทำได้เช่นดียวกัน 

ลองดูวิธีการปรับแต่งได้จาก CodePen ด้านล่างนี้

4. Group Options

หากคุณต้องการจัดระเบียบและจัดหมวดหมู่ของ Options ภายใน Dropdown Menu คุณสามารถใช้ <optgroup> Tag เพียงแค่ใส่ Options ที่คุณต้องการจะจัดหมวดหมู่ด้วย <optgroup> จากนั้นก็กำหนด Label Property ดังต่อไปนี้

คุณสามารถดูตัวอย่างได้จาก CodePen ด้านล่างนี้

5. HTML Templates

หากคุณต้องการกำหนดส่วนของ Markup ที่สามารถ Clone และ Insert ลงใน Document ได้แบบ Dynamic โดยใช้ JavaScript คุณสามารถใช้ <template> Tag ซึ่ง Tag ตัวนี้มีประโยชน์อย่างยิ่งสำหรับการสร้าง Content ที่จะนำมาใช้ซ้ำอีกได้ เช่น Structures หรือ Components ที่มีความซับซ้อน

หากต้องการสร้าง Template คุณเพียงแค่ใส่ Markup ด้วย <template> Tag เหมือนตัวอย่างต่อไปนี้ ตาม Default แล้ว มันจะไม่ปรากฏบนหน้าจอแม้ว่าจะมี Content อยู่ในนั้นก็ตาม

หากต้องการให้แสดงบนหน้าจอ คุณจะต้อง Clone มันโดยใช้ JavaScript จากนั้น สามารถผนวกมันเข้ากับ Element ใด ๆ ใน HTML Page ของคุณดังนี้ 

เมื่อทำการ Clone Content เนื้อหาไปยัง Variable ขอให้ตรวจสอบให้แน่ใจว่า ได้ส่งค่า True ไปยัง cloneNode Function เมื่อเสร็จแล้ว คุณสามารถสืบค้น Inner HTMLโดยใช้ JavaScript ได้ตามที่คุณต้องการ ดังแสดงด้านล่างนี้

สามารถตรวจสอบ CodePen ต่อไปนี้ เพื่อดูว่า คุณสามารถสร้าง Dynamic Elements โดยใช้ HTML <template> Tagได้อย่างไร

สรุป

แม้ว่า Tags ที่ใช้กันทั่วไปอย่าง <div>, <p> และ <a> จะเป็นสิ่งจำเป็น แต่การสำรวจ Tags ที่ไม่ค่อยมีคนรู้จัก เช่น <progress>, <meter> และ <template> จะช่วยให้คุณทำงานได้สะดวกขึ้น การเดินทางเพื่อการพัฒนา และการที่คุณเพิ่ม HTML Tags เหล่านี้เข้าไปใน Toolkit ของคุณ จะช่วยให้คุณสร้าง Website ที่น่าสนใจและเป็นมิตรกับ Users ได้ง่ายขึ้นมาก

ที่มา: https://medium.com/

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

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

• 5 Django Packages สำหรับสร้าง Apps ให้มีความปลอดภัยยิ่งขึ้น
• 10 Front-End Tools ที่แนะนำให้ลองใช้ในปี 2024
• 10 เกม Python ง่าย ๆ พร้อมตัวอย่าง Source Code ฟรี