บทความ IT เจ๋งๆ
5+ HTML Elements มีประโยชน์ แต่ไม่ค่อยถูกพูดถึง
13-ก.ย.-23
คัมภีร์เทพ IT
การหา HTML Elements เจ๋ง ๆ ไม่ใช่เรื่องที่ทำได้ง่ายนักโดยเฉพาะเมื่อคุณไม่แน่ใจว่ากำลังมองหาอะไรอยู่ นั่นหมายความว่า ยังมี HTML Elements น่าสนใจอีกเยอะที่คุณยังไม่รู้จัก และบทความนี้ก็ได้รวบรวม 5+ HTML Elements มีประโยชน์ แต่ไม่ค่อยถูกพูดถึง
1. The meter element
Progress Element ถือเป็นสิ่งที่เหมาะสมในการแสดง Progress Bar แต่ถ้าคุณต้องการสิ่งที่ทำอะไรได้มากขึ้น Meter Element จะช่วยยกระดับขึ้นไปอีกขั้น
คุณควรทราบไว้ว่า Tool ตัวนี้ ไม่เพียงแสดงการวัดแบบ Scale ภายใน Range ที่ระบุไว้ แต่มันยังช่วยให้คุณสามารถระบุค่า Low, ค่า High และค่า Optimum สำหรับการวัดได้อีกด้วย
ลองดูตัวอย่าง Code ด้านล่างนี้:
อย่างที่คุณเห็น Code ด้านบนนี้ แสดงถึง HTML <meter> Element ที่ใช้ในการแสดงการวัดภายใน Range ที่ระบุไว้
Attributes จะกำหนดค่า Minimum และ Maximum, Lower และ Upper Thresholds, ค่าที่ต้องการ และค่าปัจจุบันของการวัด เมื่อแสดงผลใน Browser เจ้า Meter Element จะแสดงการวัดให้เห็นคล้าย ๆ กับ Progress Bar
ดังนั้น การใช้ Meter Element จึงเป็นวิธีที่ดีในการเน้นและกำหนดค่าของปริมาณใน Progress Bar
และนี่ก็คือ ตัวอย่าง Codepen ที่คุณสามารถลองตรวจสอบได้:
ตัวอย่างของผู้เขียนบทความ จาก Codepen(External Source)
2. Map & Area
Map และ Area Elements จะช่วยให้คุณสามารถสร้าง Image Maps ได้ ซึ่งโดยพื้นฐานแล้วคือ Image ที่สามารถ Click ได้ คุณสามารถกำหนดขอบเขตเฉพาะบนรูปภาพและกำหนดลิงก์หรือการดำเนินการให้กับพื้นที่เหล่านั้นได้
นี่คือตัวอย่าง Code:
ดังที่คุณเห็นใน Code ด้านบน <img> Element จะแสดงรูปภาพชื่อ "workplace.jpg" พร้อมด้วย Source File ที่ระบุ ส่วน alt Attribute จะเป็น Text ที่แสดงแทนสำหรับรูปภาพ ซึ่งก็คือ " Workplace"
usemap Attribute จะระบุ Image Map ที่เกี่ยวข้อง โดยใช้ชื่อ "workmap"
นอกจากนี้ width และ height Attributes จะกำหนดขนาดของรูปภาพเป็น 400 pixels และ 379 pixels ตามลำดับ
<map> Element จะกำหนด Image Map ชื่อ "workmap" โดย Image Map จะช่วยให้ Area ที่กำหนดภายในรูปภาพสามารถ Click ได้ และเชื่อมโยงกับ URLs ต่าง ๆ ได้
ภายใน <map> Element มี 3 <area> Elements โดยแต่ละ <area> Element จะแสดงถึง Area ที่สามารถ Click ได้ ภายใน Image Map สำหรับ shape Attribute จะระบุรูปร่างของ Area ที่สามารถ Click ได้ ซึ่งอาจเป็น "rect" (สี่เหลี่ยมผืนผ้า) หรือ "circle" (วงกลม) ก็ได้
coords Attribute จะเป็นการกำหนดพิกัดของ Area ที่สามารถ Click ได้ โดยจะระบุตำแหน่งและขนาดของ Area ส่วน alt Attribute จะเป็น Text ที่แสดงแทนสำหรับ Area ซึ่งอธิบาย Content ของมัน และอันสุดท้าย href Attribute จะระบุ URL หรือ Destination ที่เกี่ยวข้องกับ Area ที่สามารถ Click ได้
โดยสรุปแล้ว Code จะแสดงรูปภาพของ Workplace พร้อม Area ที่สามารถ Click ได้ ซึ่งกำหนดโดย Image Map การ Click ใน Area ต่าง ๆ ภายในรูปภาพ จะพาเราไปยัง Web Pages หรือ Destinations ต่าง ๆ เช่น "computer.html", "phone.html" หรือ "coffee.html" ขึ้นอยู่กับ Area ที่ถูกกำหนดว่า สามารถ Click ได้
คุณสามารถดู GIF ที่ด้านล่างนี้ เพื่อทำความเข้าใจเพิ่มเติม:
GIF โดยผู้เขียน เพื่ออธิบายเกี่ยวกับ Map และ Area Elements
3. Sup & Sub
หากคุณต้องการเพิ่ม Superscripts หรือตัวยก (เช่น x²) หรือ Subscripts หรือตัวห้อย (เช่น x₀) ลงใน Document คุณสามารถใช้ Sup และ Sub Elements ได้ มันมีประโยชน์ในกรณีที่คุณต้องการใช้สัญลักษณ์ทางคณิตศาสตร์หรือในสถานการณ์อื่น ๆ ที่ต้องมีการจัดในรูปแบบดังกล่าว
ดูตัวอย่างที่ Code นี้:
Output:
ภาพ Capture โดยผู้เขียนบทความ
ในบรรทัดแรก Sub Elements จะใช้เพื่อแสดง Subscript “2” ในสูตรทางเคมีสำหรับคาร์บอนไดออกไซด์ ซึ่งที่พวกเรารู้จักกันในรูปแบบของ CO₂
2 Sup Elements จะใช้เพื่อแสดง Superscript “3” ในนิพจน์ทางคณิตศาสตร์ 2³ ซึ่งบ่งบอกว่า 2 ถูกยกกำลัง 3
ตัวอย่างเหล่านี้แสดงให้เห็นถึง การใช้งานพื้นฐานของ Sub และ Sup Elements เพื่อแสดงตัวห้อยและตัวยกใน HTML ตามลำดับ
4. Datalist
datalist Element จะช่วยให้คุณสามารถเพิ่ม Autocomplete Suggestions ให้กับ Input Fields ของคุณได้ มันไม่ได้จำกัดการใช้งานเฉพาะ Input ในรูปแบบ Text เท่านั้น แต่คุณยังสามารถใช้งานมันกับ Color Pickers, Date Pickers, Time Inputs หรือแม้แต่ Range Sliders ได้อีกด้วย
ค่า Style ที่ถูก Default ไว้ อาจยังไม่เหมาะกับการใช้งานของคุณมากนัก แต่คุณก็สามารถ Customize เองได้อย่างง่ายดายโดยใช้ CSS
ดูตัวอย่าง Code นี้:
ในตัวอย่างนี้ เรามี Input Field ที่ User สามารถเลือก Fruit ได้ ซึ่ง datalist Element ก็จะถูกใช้ในการให้คำแนะนำเพื่อ Autocomplete สำหรับ Input Field
list Attribute ใน Input Field จะอ้างอิงถึง id ของ datalist Element ซึ่งเป็นการสร้างการเชื่อมโยงระหว่างพวกมัน
หมายเหตุ: Datalist ID จะต้องมีค่าเดียวกันกับ list Attribute ที่เราเพิ่มลงใน Input Tag
ภายใน datalist Element เรามี Option Elements หลายรายการ แต่ละ Option จะแสดงถึง Fruit ที่เราสามารถเลือกได้ เมื่อ User เริ่มพิมพ์ใน Input Field ตัว Browser ก็จะแสดง Options ที่สามารถใช้ได้มาให้ซึ่งก็ขึ้นอยู่กับ Input ของ User
ในกรณีนี้ ขณะที่ User พิมพ์ พวกเขาก็จะเห็นคำแนะนำ เช่น “Apple”, “Banana”, “Orange”, “Grapes” และ “Mango” ขึ้นมาให้
สรุปแล้ว datalist Element เป็น HTML Feature ที่มีประโยชน์สำหรับการให้ Autocomplete Suggestions หรือ Dropdown Options สำหรับ Input Fields และอย่างที่กล่าวไว้ในตอนต้นคือ มันไม่ได้ถูกจำกัดให้ใช้งานแค่กับ Input ในรูปแบบ Text เท่านั้น แต่ยังใช้ได้กับ Inputs ประเภทอื่น ๆ ได้อีกด้วย เช่น Color, Date, Time และ Range ได้อีกด้วย
คุณสามารถตรวจสอบ Codepen ด้านล่างนี้ เพื่อทำความเข้าใจวิธีการทำงานของมัน:
ตัวอย่างของผู้เขียนบทความ จาก Codepen(External Source)
5. Details & Summary Elements
หากคุณต้องการสร้าง Content ในแบบขยาย-ยุบได้โดยที่ไม่ต้องใช้ JavaScript คุณสามารถใช้ Details และ Summary Elements ได้ พวกมันจะถูกใช้ในการสร้าง Dropdowns หรือส่วนที่ Hide/Show ใน Content ได้
ภาพ Capture โดยผู้เขียนบทความ
นี่คือตัวอย่าง Code ที่คุณควรลองตรวจสอบดู:
ในตัวอย่างนี้ เรามี Content ที่สามารถขยาย-ยุบได้อยู่ 3 Sections แต่ละ Section ประกอบด้วย Summary Element ที่ทำหน้าที่เป็น Header หรือ Title สำหรับ Section นั้น และ Details Element ที่ประกอบด้วย Content ที่จะให้เปิดเผยหรือซ่อนไว้
เมื่อ Page ถูก Load ขึ้นมา Content ที่อยู่ภายใน Details Element จะถูกซ่อนไว้ตั้งแต่ต้น อย่างไรก็ตาม เมื่อ User ทำการ Click ที่ Summary Element แล้ว Content ก็จะขยายออกหรือยุบเข้า เปิดเผยหรือซ่อนข้อมูล
Section แรกประกอบด้วย ข้อมูลเกี่ยวกับบุคคล Section ที่ 2 แสดง List ของ Skills และ Section ที่ 3 แสดง List ของ Projects โดยคุณสามารถ Customize Content ภายใน Details Element เพื่อให้เหมาะกับความต้องการของคุณได้
คุณสามารถดู Codepen นี้เพื่อทำความเข้าใจเพิ่มเติม:
ตัวอย่างของผู้เขียนบทความ จาก Codepen
สรุปแล้ว Details และ Summary Elements เป็นวิธีที่ช่วยให้คุณสร้าง Content แบบขยาย-ยุบ ได้โดยที่ไม่ต้องใช้ JavaScript แต่อย่างใด มันมีประโยชน์อย่างยิ่งสำหรับใช้กับ FAQs ส่วนของการเปิดเผยข้อมูล หรือ Content ใด ๆ ที่สามารถสลับระหว่างขยาย-ยุบข้อมูล
ที่มา: https://blog.devgenius.io/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด